How To Optimize Product Images For Your Website

 It is nothing new that images are a fundamental pillar in our website: it is what will help us to capture the attention of our visitors and may even be the trigger element of a purchase if we do it well. Upload a photo of poor quality, or have a lousy organization of them, can cause the opposite effect of course.

Let's go to the mess. Why is it important to optimize your images when making your website and what do you have to take into account when uploading them to your website?

Why Is It Important To Optimize The Images?

The reasons are many but we are left with the two most important ones:

SEO: one of the factors that contributes to positioning is the speed of loading the page or in other words, a page that load in the browser is slow, will have less chance of positioning correctly. Heavy images (many KB or MB) make the loading speed of a page slow down.

Conversion: A page whose structure and the combination of images and texts is organized, will have more possibilities to attract, retain and "convert" clients into visits.

Quality Of The Images

Can you see the difference between these two images below? At first glance, there is no difference, but one is optimized for the web and the other is not. Read on to understand it clearly

Read Also: The 3 C's to Your Success Online
                  Top 5 Benefits of E-commerce product Photography

NOT OPTIMIZED IMAGE

 

Size: 6000 x 4000 px

Resolution: 300 dpi

Size (KB): 10.3 MB

OPTIMIZED IMAGE

 

Size: 350 x 233 px 

Resolution: 72 ppp

Size (KB): 33Kb

We Will Explain Why One Is Optimized And The Other Is Not:

Effectively, the optimized image will be less heavy (33KB) than the image not optimized for web (10, 3 MB) and that influences the loading speed of the page. There are different ways to save images for web or even online platforms such as pixlr where you can optimize them. As we said, the important thing is the way to save the file for web: we can even make a 2000px image, optimized for web and not too heavy.

In summary, we will have to look for the balance between the size and the quality that we want from the image in order to upload it correctly to our website.

What Format? .Jpg, .Png Or .Gif?

We will present below the three most common image formats of a web page and what each one is used for.

 

Format .png: it ‘s used above all for images that are made with geometric shapes and have flat colors. The great advantage of this format is that it conserves transparencies and that it does not lose much quality in the compression of the image, that's why it is used for logos .

Format .jpg: it is the universal format that is used mainly for the images , because although a little quality is lost when compressing the images, colors or tonalities are not lost. 

Format .gif: this format is used for animations above all. Since several images or video are used to make the gif, the size in kb can be very large; therefore, sometimes the image is compressed and loses quality.

Finally, for a design to be effective and for product images to capture the attention of visitors, it’s essential that they are well combined . For the images to help organize the content and function as an element of attraction, we must make them have the same size (width x length) .

Read Also: Super Easy Way to Learn Clipping Path Service