Product Photos for Online Shops: Size, Format and Speed

Why product photos need care

In an online shop, pictures replace the experience of holding the product. Customers judge quality, color and detail from the photos, so sharp images matter. At the same time, a category page can show dozens of products, each with a picture, and a shop with heavy images is slow, especially on phones where most visitors browse. A slow shop loses visitors before they reach the checkout.

The solution is not to use poor images, but to prepare each picture at the right size and quality for the place where it is shown.

The sizes you need

A typical shop uses several image sizes for each product. Small thumbnails, around 300 to 500 pixels, appear in lists and carts. A main product image, around 800 to 1200 pixels, appears on the product page. A large image, around 1600 to 2000 pixels, is shown when the visitor zooms in. The exact numbers depend on your design and your products, and the shop software may create some of these sizes automatically.

Check the layout of your own shop: find the largest size at which an image is displayed, double it for high-density screens if you offer zoom, and use that as the upper limit. There is no benefit in uploading a 6000-pixel original if the largest display is 1600 pixels.

Format and quality

For photos of products, JPEG at a quality of 80 to 85 is a safe default, and WebP at the same setting gives a smaller file for browsers that support it. Products with fine detail, such as jewelry, fabric and electronics, deserve a higher quality than a plain product on a white background, because artifacts show up in fine textures and around sharp edges.

Products with transparent backgrounds, used for example in collages or on colored pages, need PNG or WebP. Photos that look similar on a white background can use JPEG and the page background, which keeps the files small.

Consistency

A shop looks professional when its pictures are consistent: the same aspect ratio, similar framing, the same background and the same compression level. Prepare all pictures of a collection in one batch with the same settings. The compressor processes up to 100 images at a time with a single quality and maximum size, and you can download the results together as a ZIP.

A consistent aspect ratio also avoids layout shifts and awkward cropping in grids. Crop pictures to the shape that your theme uses before you compress them.

Speed and the product page

The main image on a product page is usually the largest element that visitors see, so it has a large effect on the Largest Contentful Paint, a measure of loading speed. Keep it light, serve it in the right size with srcset, and do not lazy-load it. Images further down the page, such as the gallery and related products, can load lazily.

As a guide, a main product image of 100 to 250 KB is achievable for most photos at 1200 pixels. Check the pages with a speed test tool and look at the heaviest images.

Accuracy of color

Customers return products that do not look like the picture. Compression can change colors slightly, especially if a color profile is removed or if the quality is very low. Check the compressed images against the product, particularly for saturated colors and for products where color is the main attribute. Keep the originals in case you need to compress again with different settings.

Take photos in consistent light, and avoid heavy filters. Compression only works well when the source is good.

Alt text and file names

Each product picture needs a useful alt text that describes what the picture shows, for example the product name and a visible detail, not a string of keywords. This helps customers who use screen readers and helps search engines understand the image. File names should also describe the product, such as blue-ceramic-mug-front.jpg instead of IMG_4821.jpg.

Rename files before you upload, because the compressor keeps the base name of your file and adds -compressed to changed files.

A workflow for a new collection

Take or collect the photos, then crop them to the same aspect ratio. Add them all to the compressor, set the maximum size to the largest display size, choose JPEG or WebP and a quality of 80 to 85, and compare the sizes. Download the ZIP, rename the files, upload them to your shop and check the result on a phone.

Keep the originals in a separate folder, so that a redesign or a new size does not require a new photo shoot.

Lighting, background and consistency across the shop

Good compression cannot rescue a poor photo. Use even, soft light, a clean background and a tripod where possible, and photograph all products of a collection under the same conditions. Consistent lighting means that a single compression setting works for the whole batch, and customers see products that can be compared to one another.

If you photograph with a phone, wipe the lens, turn off heavy beauty filters, and use the highest quality of the camera app for the original. You can always reduce later, but you cannot add detail that was never captured.