Logo
Log In

E-commerce product image optimization for better website speed

Blog image

Among numerous laws of successful e-commerce, there are two that seem at first glance to contradict each other. On the one hand, you absolutely need high-quality images that show your product to your customers and inspire buying decisions. On the other hand, images may hamper your website speed and, consequently, push away users and search engines, which is also one of the common e-commerce site problems. No worries — good images and high speed can perfectly combine! You just need e-commerce product image optimization.

How optimize ecommerce images to speed your site up

  • Choose the optimal format

When it comes to product images, JPEG and PNG are the most popular formats. JPEG images are lightweight, and allow for different degrees of compression. During the compression, you can control the level of quality, which can remain very good.

The PNG format a better range of colors, allows for transparent backgrounds, and has a higher quality overall. However, this comes at the expense of website speed, because PNGs are heavier.

  • Use image compression

Compression tools are definitely the best friends of those who care about website speed. They help reduce the image file with minimum quality losses.

A good choice is to install OptiPNG or Jpegoptim on your server and set up automatic compression according to your preferences. These utilities are appreciated by developers and are Google-friendly.

  • Crop out the unncessary backgrounds

In the mission of making your product images more lightweight, every few pixels may count. So it is a good idea to crop out the unimportant backgrounds and focus purely on the product.

Crop out the unncessary backgrounds

  • Apply the optimal dimensions

Image height and width should be large enough for users to see the product well. All product images on your store need standardized aspect ratio and dimensions.

  • Use different images sizes for different purposes

There is no need to always load the full image to the user. Products are also displayed on category pages, as thumbnails, and in other modes.

The best approach is to provide different image sizes for different purposes. A perfect example of how it is done automatically is Drupal image styles when all images get resized for particular displays — together with other effects like crop, scale and more. Other CMSs have their own tools for that.

  • Take care of the zoom image size

E-commerce websites often use the zoom feature that gives users a closer look at the product. So, among all image sizes, the largest one is needed for the zoom. Make sure you are using the image of the right dimensions for it — not a smaller one. Otherwise, your users will see a grainy picture.

  • Rely on CDNs

Content delivery networks, or CDNs, can be very helpful in e-commerce product image optimization for the sake of website speed. Proxy servers will quickly deliver the cached product images to your users depending on their geographical location.

  • Try image lazy loading

Another optimization technique is to show the users only the images that are in their viewport. Others will not be loaded until the user scrolls to reach them. This is the essence of the famous website speed optimization technique called lazy loading.

To recap

In addition to these techniques, there are many others, which should be chosen according to your website peculiarities. For the smooth and careful e-commerce product image optimization, contact our web development company. Let your product images be awesomely lightweight, and your website speed high!