Optimising Product Images for SEO & Speed

The smallest product image is not necessarily the best one. A heavily compressed photograph may load quickly but hide the stitching, finish or texture a shopper needs to judge quality. An enormous photograph may preserve every detail while making the first useful view arrive too late. Product image optimisation is the work of resolving that tension, not simply reducing every file to an arbitrary size.

A useful approach starts with three questions: what does this image help the buyer understand, how large does it need to appear, and when does it need to load? The answers differ for a collection thumbnail, the main product photograph and a close-up opened through zoom. Treating those uses identically wastes either bandwidth or information.

Give every image a buying purpose

Before adjusting formats or compression, examine what the gallery actually explains. A main photograph establishes what the product is. A detail shot can reveal a material or fastening. A scale image helps someone understand dimensions, while a contextual photograph shows how the item looks in use. Six nearly identical angles may add less value than three images that resolve distinct questions.

For example, a handbag gallery might need a clear overall view, an interior view showing compartments and a photograph that makes its scale understandable. Removing the interior photograph to improve a speed score could make the page less useful. Removing a redundant angle may reduce loading work without sacrificing information.

Image quality should also mean accuracy. Lighting, cropping and editing should help customers assess the item rather than disguise its appearance. A sharp image that misrepresents colour is not a successful product asset, however efficiently it is delivered.

Separate the uploaded source from the delivered image

The file stored in the media library and the file downloaded by a customer's browser are not always the same. Shopify automatically selects an appropriate delivery format and can serve WebP or AVIF to browsers that support them. Images served through the theme may also undergo compression. That makes the blanket instruction to convert every source file to WebP an incomplete strategy.

For photographic sources, JPEG is generally a practical choice. PNG is useful when transparency or crisp graphics require it. More importantly, retain enough source detail for the intended gallery and zoom experience. Repeatedly applying lossy compression before upload can discard information that later delivery processing cannot restore.

Inspect what the live page requests before assuming the uploaded file's size explains the performance problem. A well-sized delivered image can come from a larger source. Conversely, a theme implementation can request an unnecessarily large rendition for a small display area. Delivery behaviour matters as much as the original export.

Match dimensions to the display and zoom experience

A collection thumbnail does not need the same delivered resolution as an enlarged product photograph. Responsive image delivery allows the browser to choose among suitable sizes according to the display conditions. The aim is to provide enough detail for the rendered image without transferring pixels the customer cannot use.

There is no universal width that works for every product page. A full-width desktop gallery, a compact mobile image and a zoom overlay have different requirements. Higher-density screens also need consideration. Decide on source dimensions using the largest meaningful use, then check that smaller placements request appropriate versions.

Do not crop away useful detail merely to achieve a consistent grid. A shared aspect ratio can make collections easier to scan, but tall bottles, wide furniture and small accessories may need different framing. Consistency should make comparison easier, not conceal the differences customers need to see.

Load the first useful image promptly

Lazy loading is helpful for images that are not needed immediately, such as photographs further down a page or later collection rows. Applying it indiscriminately to the main image visible on arrival can delay the very content the shopper came to inspect.

Review the initial view separately from the rest of the gallery. Check when the main image starts downloading, whether a carousel hides it until scripts run, and whether off-screen gallery assets compete for early loading resources. The right fix may be changing loading behaviour rather than compressing the photograph again.

Reserve space for images so surrounding content does not jump as they appear. A page that loads quickly but shifts the price or purchase button during interaction is still frustrating. Evaluate visual stability alongside how soon the first photograph becomes usable.

Write alt text for the image, not the keyword plan

Alt text provides a text alternative to meaningful images. For product photography, describe the relevant visible information naturally. “Tan leather handbag with two short handles, front view” is more useful than a string of repeated shopping keywords.

Different photographs can need different descriptions. An interior view and a front view do not convey the same information, even when they show the same item. Do not copy the entire product title into every field without considering what each photograph contributes. Equally, do not claim a feature that is not visible simply because it appears in the product specifications.

Descriptive filenames are sensible media-library hygiene and can provide context, but renaming an entire established library is rarely the best first response to a slow page. Prioritise missing alternatives, unclear product photography and inefficient delivery before cosmetic naming work. Purely decorative imagery needs different accessibility treatment from photographs that explain the product.

Test quality and speed on representative pages

Choose examples that expose different demands: a simple product with one photograph, an item with a large gallery and a collection displaying many thumbnails. Test on mobile as well as desktop. Look for image requests that are too large for their rendered area, delayed main photographs, excessive initial downloads and visible layout shifts.

Then inspect the images as a buyer would. Can someone read a relevant label, distinguish the surface finish or assess a detail when using zoom? A performance improvement that destroys those details is a trade-off to revisit, not an automatic win.

Compare equivalent tests and avoid attributing the entire page's performance to images. Apps, scripts and other content can also delay the experience. Our Shopify SEO audit guide explains how to diagnose findings in context rather than treating a single score as the whole problem.

Build a repeatable image standard for the catalogue

At scale, prevent defects at the point of production. Define what photographs each product family needs, how they should be framed and what source quality is required. Keep original assets available so future crops or exports do not rely on already degraded files.

Use a small representative batch to test a new export or delivery approach. Review close-up detail, mobile rendering and gallery behaviour before expanding it across the range. Changes to a shared gallery template can affect many products, so include unusual shapes and larger galleries in that review.

Our guide to product SEO for large ecommerce catalogues covers how to combine these shared standards with selective investment. A repeatable system should reduce defects without flattening every product into the same presentation.

Frequently asked questions

What is the best image format for Shopify product photos?

JPEG is generally suitable for photographic source images, while PNG can be useful for transparency and graphics. Shopify can deliver modern formats such as WebP and AVIF where supported, so you do not need to assume every source must be manually converted. Judge the result by the image actually served, its visual quality and whether the theme requests an appropriate size for the display.

Should I compress every product image below a fixed file size?

No single limit suits every photograph or placement. A small thumbnail and a detailed zoom image serve different purposes. Reduce unnecessary data, but inspect the result at its intended display size and in zoom where relevant. If detail becomes unclear, reconsider compression or dimensions. Also check responsive delivery and loading order, since an efficiently exported source can still be used poorly by the page.

Optimise for a faster, clearer buying decision

The goal is not merely lighter files. It is a product page that presents useful visual evidence promptly, preserves important detail and remains stable while customers browse. Choose purposeful photography, inspect real delivery behaviour and test the complete experience before rolling out changes.

For support with product-page quality, technical reviews and ongoing optimisation, explore Savlo's website SEO plans.