Optimizing your product images

Last updated

You have photographed your products and have high resolution quality images. This is great, but these images might be too large for the internet. For those of your customers have slow internet connection or browse your site from a mobile, these images might slow down the site loading significantly.

The visitors might become impatient and leave your site without buying. To prevent this, you might want to optimize your images by reducing their size.

In this article:

Size

Any image has two sizes: the space it occupies on the screen and the memory space it takes up.

The space the image occupies on the screen is measured in pixels (px) – the points that make up the screen. In your Ecwid store you can upload images of any size. They are always optimized to fit the screen. However, it’s best to reduce your product images to about 1000 x 1000 px. That size is large enough to display the product and small enough to load quickly.

The memory space the image takes up is measured in kilobytes (KB), megabytes (MB), gigabytes (GB) and so on. The larger the image physical size is, the more storage space it takes up and the longer it takes to load. You can solve this problem by compressing the image.

The best size for product images is 1000 x 1000 at 200 KB.
You can select one of the three preset sizes for thumbnails on the catalog page. The options are large, medium and small. See the details in our article about preset appearance options.

However, after strong compression images might lose in "quality": there is noise or an abrupt color transition. To avoid this, it is enough to save images in the correct format and use special compression services.

There are services that offer file compression without quality loss, for example TinyJPG and JPEGmini.

Proportions

There is a “standard” set of proportions that people perceive as pleasant. They always have a nice result and they are: 1:1, 4:3, 3:2, and 16:9.

Images proportions

The proportions are important, as they define the look of your site. Give all your images the same proportions, as this will give your shop window a structured and professional look.

You can select the proportions for thumbnails in your catalog page, see instructions.

Sharpness

If you have already reduced the size of an image, you have probably noticed that it has lost its sharpness. How to retain the sharpness?

Most modern photo editors allow you to select a new image size when “saving for Web”, with a reduction algorithm that directly affects the sharpness. In Photoshop, we recommend that you use the image size below 1000 px and quality = Bicubic Sharper.

Select sharpness

If you are an experienced user of photo editors, you might select a more advanced way of editing the images. See the instruction in our blog article.

Format 

You should select the appropriate format for saving your images to have the highest quality with the smallest size.

These are the most popular formats:

GIF (Graphics Interchange Format — “format for sharing images”) is capable of storing compressed data without loss of quality. The format supports animations.

PNG (Portable Network Graphics) uses lossless compression and stores an unlimited number of colors.

JPEG (Joint Photographic Experts Group, the name of the developer) is the most common format for storing photos and other images.

So what to choose?

  • If you have a picture, choose JPEG or PNG.
  • If you have an animated picture, Choose GIF.
Back to top
Was this article helpful? 0 out of 0 found this helpful