We all know that in order to make a website interesting for visitors, we need to use images. Good images beautify the content and serve as a visual aid to explain it better. Unfortunately, they are typically the largest files on a website and therefore the biggest culprit for slowing it down. For this reason, we need to optimize images to reduce their size and make the website load faster.
Additionally, image optimization can also help you with your SEO. Many people look for images on search engines such as Google, and to get your fair share of the traffic, you will want to put some effort into making your images search engine friendly.
So now you know why optimizing images is so important. But you might still be wondering how to do it. This article will give you a step by step process to follow every time you upload an image to your website to make sure you get the most of it.
What does it mean to optimize an image?
Image optimization is a rather simple but pretty time-consuming process that requires a lot of diligence on your part. This process aims at two things:
- Reducing image sizes to reduce page load times and improve user experience, and
- Labeling images with an appropriate name and alt text to improve their visibility in search engines.
Image optimization – the step by step process
1. Choose the correct image format
First things first, you should save your images in a correct format as this will directly affect their size and quality. So how do you decide which one to pick? Here is a quick explanation of the popular formats and when to use them.
JPG/JPEG is the most common image format used on the web. This format uses lossy compression, so there is always a certain degree of quality loss associated with it. JPG images are small in size and typically used for photos where you need a wide range of colors. However, they are not the best choice for logos or icons as compression makes them look pixelated.
PNG format uses lossless compression. A benefit of using PNG images is that, unlike JPG, they support transparency. For this reason, they are commonly preferred over JPG. Another great way to use PNGs is for screenshots when you usually only need a small range of colors. However, this image format is not recommended for photos as it will create a much larger file size compared to JPG.
WebP is a relatively new image format that provides a superior lossless and lossy compression. It creates much smaller file sizes than PNG or JPG, but it is not compatible with all browsers. If you choose to use this format, you should use some kind of fallback images for browsers that do not support WebP format, mainly Safari and Internet Explorer.
SVG is a vector image format. The main advantage of using vector images is that they always stay sharp no matter how much you resize them. They are also much smaller compared to raster images. We commonly use SVG for logos and icons.
2. Resize images
The second step in optimizing images is to scale them correctly.
Let’s think about the following example for a moment. The largest width of the image displayed on the website is 500 pixels. It would be really wasteful to use an image with the resolution of 2000px by 1000px as it will be unnecessarily large. Therefore, in this case, you should only use an image that is 500px wide, or up to twice as much if retina screens are important to you.
To resize images to the optimal resolution, you can use any image editing tools like Photoshop, online image resizers, etc.
3. Compress images
The next step is image compression. There is no “one size fits all” approach when it comes to image compression. It really depends on your specific case. To determine what is the right compression, you should ask yourself the following questions.
Is it just a background image that makes the website look prettier, or does it help explain the content?
How important is the image sharpness for understanding?
If your image contains text that needs to be legible, or certain elements that need to be clearly visible on any screen, you should compress it cautiously so that you don’t sacrifice too much quality. On the other hand, if the image is just a visual accessory to make the website look prettier, you can perhaps compress it a bit more.
4. Give your images a readable name
Every image file you upload to your website should have an appropriate name. When you name your files, don’t just label them “image-1”, “image-2” etc. Instead, give them a descriptive name in plain English that explains their content and ideally includes a keyword. That is an important SEO factor. The clearer your image names are, the easier it will be for search engines to understand them and return them as a search result.
A good example of a name for an image that shows a panoramic view from the Eiffel Tower would be “eiffel-tower-paris-panorama.jpg”.
5. Add a descriptive alt text
Finally, you should equip your image with a good alt text (alternative text) which accurately describes what a visitor sees on the image. The alt text is what will be shown on your website if the image fails to load. It is recommended to include keywords, but do not overstuff it. Search engines can view this as over-optimization and penalize your website for it. Identify one or two images you think are the most representative of your topic and assign them keywords. The rest of the images should only have a fitting description.
If we go back to our previous Eiffel Tower example, a good alt text would be something like this “Spectacular panoramic view of Paris from the Eiffel Tower”.
Image optimization is an ongoing process that is essential to improve your website speed and SEO. Although it seems like a lot of work, it will get faster once you get used to the process. And if done correctly and diligently, it will benefit your website in a significant way.
Is there anything else that you would like to know about image optimization? If so, please leave a comment below, and we’ll be happy to answer you.