Page speed is one of the most important SEO factors today.
And proper image optimization is one of the most important page speed factors there is! That is why it is very important to pay particular attention to images. The main reason for this lies in the fact that images are prevalent on most websites and often account for over 50% of the page size.
Building a website – even a great-looking website, designed by experts – is not enough on its own for optimal images and image Search Engine Optimization. Images that are not optimized properly can ruin everything very quickly, both in terms of effort and money invested.
So, what can we do to ensure that your images are optimized and your website loads as fast as possible?
What Is Image Optimization?
When we talk about image optimization, we primarily mean image compression. On top of this, however, there is also the correct choice of format and the overall image resolution. All of these need to play well together so that the image is suitable for use on a website.
Overall Image Size
When it comes to image size, ideally, you should not exceed 150 kilobytes. However, if your site requires an extremely high-resolution image for a particular purpose, then it is possible to exceed this. In such a case, I recommend the size to be somewhere between 200 and 300 kilobytes.
It is very important to make a distinction between two types of image resolution on the site itself:
- resolution of the source (that you uploaded)
- resolution of the image displayed on the website
All images on the website should be optimized in such a way that their size (source) corresponds to their role ( for display). For example, the image displayed on a website in a resolution of, say, 900 x 400px should not originally be much larger (for example, 2000 x 1500px). Ideally, the uploaded images should be exactly the size to be displayed.
In practice, it often happens that the marketing department receives large images to upload to the site. They are then faced with two options:
- to upload the image as it is
- or to prepare and optimize it beforehand
If they choose the former, easier option, there would be a very serious risk of additional and unnecessary burden on the website server. This would ultimately slow down the website from the perspective of the visitor.
The Image Format
As for the image format, the following are mainly used on websites:
- JPG – is used for all those images that have a large variety of content and require a slightly richer display when it comes to colors
- PNG – which is used for images that require a transparent background and sometimes include text (logos are commonly done in png)
Which of the formats you choose largely depends on what is in the image itself, and how it will be used.
I personally use JPG in most cases for things like photos. Whereas PNG is great for products with no background (or white) or banners with text in them.
The basic rule you can follow is that if the image does not contain any background (as is often the case with, e.g. logos), you should primarily opt for PNG, while in other cases you can use either of the formats.
There are many different tools you can use to optimize your images, and which one you choose depends on the specific needs you have. Below I will show you a few tools that can be extremely useful when it comes to image optimization.
Image Optimization via Online Editor
If you need to quickly modify images and customize them for posting on your website, you can use several online tools that are very simple to use.
Some of them offer simple image compression, while others provide a slightly higher degree of control. All the tools listed below are very handy if you are working on your own and if you want to optimize images quickly and efficiently.
TinyPNG
One of the most effective online image compression tools is TinyPNG. It allows you to select multiple images at once (it is possible to upload up to 20 images at once) after which they are compressed. Although called TinyPNG, this tool allows you to compress images that are both in the PNG and JPG format.
After compression, following a drop-and-drag, is completed, the images become significantly smaller, and the most important thing is that their quality remains approximately the same as before the compression. Optimizing several images can save you up to a few megabytes overall.
Once the image compression process is complete, all you have to do is click the Download all button and the images will be saved on your computer. The whole process does not take longer than 2 minutes.
JPEG Optimizer
JPEG Optimizer is similar to TinyPNG but is primarily used to modify images in JPEG format. It is also very easy to use and offers several useful options.
The first step is to select the image you want to optimize and then you need to determine the percentage of compression. The lower the percentage you choose, the smaller the image size will be. However, it should be borne in mind that if you choose too small a percentage, the image can drastically drop in quality. This tool automatically sets the compression ratio to 65% and our recommendation is not to go much below that.
The third thing you can do is to determine the width of your image, and the tool adjusts its height (aspect ratio) accordingly. By clicking on the Optimize photo button, your image will be processed, and after the procedure is complete, you can save it on your computer.
Squoosh
Squoosh.app is another great tool from Google themselves. It is great at optimizing almost any format of image from PNG, JPG or even WebP – a format Google created.
You are immediately offered the option to select the image you want to optimize, and you are even offered the option to optimize SVG elements.
After selecting the desired image, a new window opens in which you can make lots of in-depth modifications. The great thing about this tool is that it offers you a before and after view to compare the original image and the optimized one. This allows you to easily tweak the settings to get the best results.
When it comes to the options offered to you, you can first change the size and resolution of the image by clicking on the Resize option. Then you have the opportunity to determine the image quality you need, and within the Advanced settings option, you can also experiment with modifying the color and sharpness of the image. If you are satisfied with your settings, just click on the blue arrow in the lower right corner to save the processed image.
Image Optimization via Photoshop
The online editors listed above are great when you are in a hurry and when you need to quickly and easily modify images. However, if you want to have a greater degree of control and use additional image optimization options, I recommend using Photoshop.
Those of you who work in a team can turn for help to designers who already have experience in using this tool. While you may not be doing this part of the job on your own, it is very important that you become familiar with the basic features that Photoshop offers when it comes to fast image optimization.
Be aware that ignorance with Photoshop can cost you dearly, so be sure you know what you are doing with this tool. For this very reason, below I have listed the most basic options you can use to quickly and easily optimize images in this powerful design tool.
Crop Option
Before you use a picture on a website, ask yourself what is most important on the image. The original may include things you don’t need, or that can be removed with little to no effect.
This is important because the larger the number of details in an image the bigger its final size. Therefore, it is necessary to first look at the image in detail and decide what can be removed. Of course, cropping is not always possible, but when it is, make full use of it – less is more!
To quickly crop an image in Photoshop, you can use the simple Crop option, which will give you the ability to select the size you need to remove any unnecessary areas. The icon for this option is located on the left side of the window, within the main Photoshop menu.
Image Size
After you crop the image, you need to think about whether its resolution/size is appropriate and whether it corresponds to the size that will be used on your website. As already mentioned above, it often happens that the source of the image is quite different from the display on your website. So, it is often necessary to resize the image before using it.
To adjust the image resolution, you can use an option called Image size. After clicking on the top navigation menu and selecting the appropriate option, a new window will open in which you will change the resolution of the image.
Make sure the link icon between the width and height options is turned on to keep the aspect ratio of the image. If you don’t, the image can become distorted.
How Do Experts Optimize Images?
As a brief summary of this text, we will list all the steps performed by those who are more versed in this before posting the image on their sites.
- Step 1: Crop unnecessary areas from an image to help reduce its size
- Step 2: Resize the image to the appropriate resolution for the particular use on your website.
- Step 3: Compress the final resized image without ruining the quality too much. Keep in mind that if an image is very small, compression will not be seen as easily.
As you may have noticed, there are several different ways to optimize an image and prepare it for use on your website. From online tools, that are cheap and easy to use, to expensive design tools like Photoshop.
It doesn’t really matter which one you choose, just be sure to optimize your images before you upload them to help improve your website speed and your SEO.
