What is the best image format for Shopify?

Upload high-quality JPEG or PNG at a sensible size and let Shopify's CDN serve modern formats to supporting browsers. Choose the file type based on the content of the image.

Should I lazy-load all images on Shopify?

No. Lazy-load images below the fold, but load the main above-the-fold image immediately and give it high priority.

How large should Shopify product images be?

Large enough to look sharp at the biggest size they are displayed, and no larger. Using responsive image URLs means smaller devices download smaller files.

Shopify Image Optimization: Sizes, Formats, Lazy Loading and Alt Text

1. Upload sensibly

Do not upload raw camera files. Export at a resolution that covers your largest display size.
Keep consistent aspect ratios so the layout is predictable.
Name files descriptively before uploading, for example blue-cast-iron-skillet.jpg.

2. Let Shopify serve the right size

Shopify hosts images on its CDN and can resize them on request and serve modern formats to browsers that support them. In Liquid, the image URL and image tag filters let you request a specific width and output a responsive srcset, so phones download small versions and large screens get larger ones.

Check that your theme uses these filters and does not output one large image everywhere.

3. Dimensions and lazy loading

Set width and height so the browser reserves space and avoids layout shift.
Lazy-load images below the fold.
Never lazy-load the main image at the top of the page. Give it high fetch priority instead.

4. Alt text that helps

Describe what the image shows, briefly and specifically.
Include the product name and a distinguishing detail such as colour or angle where relevant.
Use empty alt for purely decorative images.
Do not stuff keywords.

5. Check the results

Run PageSpeed Insights before and after, and note the LCP element.
Check the largest images on collection pages, which can carry dozens at once.
Review after adding new sections, sliders or apps that load their own images.

This fits into the wider approach in our guide to speeding up your store without changing themes, and our image optimisation service.

Frequently asked questions

What is the best image format for Shopify?: Upload high-quality JPEG or PNG at a sensible size and let Shopify's CDN serve modern formats to supporting browsers. Choose the file type based on the content of the image.
Should I lazy-load all images on Shopify?: No. Lazy-load images below the fold, but load the main above-the-fold image immediately and give it high priority.
How large should Shopify product images be?: Large enough to look sharp at the biggest size they are displayed, and no larger. Using responsive image URLs means smaller devices download smaller files.