Image optimization For Web performance & SEO

Nowadays, website performance is the most important part of this digital world. Visitors are expecting desired results in a single click without any interruptions. To increase the interactions with users, online businesses and bloggers are using interactive images and videos.

High-resolution images are affecting the website performance which can cost product selling, site visitors. To improve the performance of the website there are many ways and Image Optimization is an essential part of it. Here, I am providing some basic guidelines and solutions to use the optimized images on the websites.

Image size:

Website loading time highly depends on the image size. More size means slow loading Magento 2 website.

There are various tools and online sites available to optimize your images. For eCommerce stores, using images around 70kb/images for each product is referred to as best practice.

Image dimensions:

 Need to use the valid size of the image for your container. If your container size is 500 X 500 and you are using images of 1000 X 1000 which is not a good practice.

Image Formats:

 Image size is also dependent on the image formats. Currently, jpeg and png images are mostly used on all kinds of websites. 

There is another webp image format that is also available which was founded by Google and it uses less size than other formats. But unfortunately, currently, it’s not supported by all browsers. PNG images have more resolution than the jpeg format but it’s bigger in size. 

There are so many online tools, software and services that are available to optimize the images. Image optimization can help to reduce that size by ~70% without losing quality.

Image name:

Always need to use a valid product name with the images. This will help you to improve the website SEO score. 

E.g. Suppose you have an online shoe store then you should follow the below instructions.

• Adidas shoes with brown color: adidas-brown-shoe.jpeg
• Please do not use DSC20200302.jpeg for an image.

Image alt attribute:

Always need to use the valid product name in the alt attribute. This will help crawlers to identify the image and help the browser to display the text if the image doesn’t load. 

Include the images in your sitemap, this will help crawlers (googlebot, bingbot, etc) to easily find your images and index it. This will indirectly help your site to improve the website SEO score.

Image title attribute:

An image title tag is not that much used, but it helps users to understand the image more accurately. Similar to the alt tag, you should add proper words in the image title tag.

Bonus tip: Try to add your targeted keywords in the image names, alt attribute, and title attribute.

Thumbnails:

Use optimized thumbnail images of products where ever required in the site. You can use the thumbnails on the home page, cross-sell and up-sell to boost the selling of products on your site.

I hope you got a good understanding of the Importance of image optimization. Let me know your thoughts in the comment section. And if you have any query with this blog I will be happy to solve that. Thanks and cheers … 🙂