For most product-photo workflows, WebP offers a smaller file than JPEG at equivalent visual quality, while Shopify can handle format delivery for supported browsers. But which file should you prepare when a customer’s page load depends on more than one image? The answer starts with the difference between the image you upload and the version a customer receives.
For Shopify stores, the best image format for products on Shopify (WebP vs JPEG) is one part of image preparation, not a shortcut to better page speed. Lossy compression is a way of reducing an image file’s size by removing some image data, which can reduce visible detail when pushed too far. A sharp product image should not come at the cost of needlessly heavy files.
You’ll learn how to choose a practical format, protect product details, and check how images look in your theme. The goal is simple: clear photos that load without excess weight.
Key Takeaways
- WebP is an efficient choice for most prepared product photos.
- Keep a clean source image before making compressed copies.
- Match image dimensions and crop to your Shopify theme.
- Shopify’s image CDN selects a delivered format for supported browsers.
- Check sharpness, mobile display, and alt text before publishing.
Start with a clean, high-quality source image and let the image CDN handle browser-specific delivery.
Why Do Image Files Affect Shopify Page Load?
A page full of large product photos can feel slow even when each individual image looks crisp. Every photo adds weight, and visitors must load that data before seeing images across the page.
On the median home page in the 2025 Web Almanac, images accounted for 1,058 kilobytes on desktop and 911 kilobytes on mobile. Several product photos can quickly add substantial image data to a page load. A home page with product tiles, banners, and featured items may request many files at once.
That weight matters most when images sit near the top of a page. Large files can delay when visitors see the main content, especially if their connection is slow or shared with other apps. A crisp image still has value, but its file size should fit its role on the page.
Mobile connections make image optimization easier to notice. A customer browsing on a busy street or a weak signal may wait longer for a gallery than someone using a fast home connection. Smaller, well-prepared images can support a smoother shopping experience, but they cannot promise a sale or a higher search rank.
Think about the whole page, not one file in isolation. A product page with several gallery images can carry more image data than a page with one main photo. The location of each image also matters because visitors do not see every image at the same time.
Prioritize the first image a customer sees, because it carries more immediate page-load weight than a photo farther down the page.
Best Image Format for Products on Shopify (WebP vs JPEG): Which Should You Use?
For a typical product photograph, choose WebP when your editing workflow supports it and you want a smaller file at comparable visual quality. WebP is the efficient pick for many product images, while JPEG still fits common editing and asset workflows.
WebP files average 25-34% smaller than JPEG at equivalent visual quality. WebP was developed by Google in 2010. That range describes an average, not a promise that every photo will shrink by the same amount.
Why WebP is the efficient choice for most product photos
WebP can keep useful detail while using less file space than a comparable JPEG. That makes the WebP format a strong choice when you export product photos yourself and want a lighter file without an obvious drop in visual quality.
Compare exports at the size customers will see, not only at full zoom. A smaller file is not a win if fabric weave, labels, or color edges look worse.
When JPEG is the better fit for your workflow
JPEG remains practical when your camera, editor, or existing asset library already uses it. You may also prefer JPEG if your team has a well-tested export process and does not want to add a conversion step.
The right image format depends on the asset and the work needed to produce it. PNG also has a place when you need transparency or sharp graphic edges.
| Format | Best fit | Compression or file-size behavior | Transparency |
|---|---|---|---|
| WebP | Product photos and web graphics | Lossy or lossless compression; often smaller than JPEG | Yes |
| JPEG | Photographs in common workflows | Lossy compression; file size depends on export | No |
| PNG | Logos and graphics with clear edges | Lossless compression; often larger for photos | Yes |
Keep JPEG as a practical option when your current source files or editing tools make it the simpler choice.
What Image Dimensions and Upload Limits Does Shopify Allow?
Shopify allows product and collection images up to 5000 × 5000 pixels, but most square product photos do not need to approach that ceiling. For a square product image, Shopify says 2048 × 2048 pixels usually displays well.
Images must be smaller than 20 MB to upload. The pixel limit and file-size limit measure different things: dimensions count pixels, while megabytes measure stored data.
Treat the maximum as an upload boundary, not a target for every product image. A very large image can add storage and processing work without improving the view customers get in your theme. Match the dimensions to the image’s intended display and zoom needs.
Aspect ratio matters too. A tall bottle, wide sofa, and square box may look best in different image shapes. If you force every photo into a square crop, you may cut off useful product details or leave too much empty space.
Check how your Shopify theme crops product photos in collection cards and product pages. A theme may show a square thumbnail even when the uploaded image is tall, so preview the crop before applying it across a catalog.
Use 2048 × 2048 pixels as Shopify’s usual square product-image starting point, then check the result in your theme.
Why Start With the Highest-Quality Source Image?
A clean original gives Shopify more visual information to work with when it creates versions for different screens. Start with the best source image you have, because damage already baked into a file can carry into later versions.
Shopify recommends uploading the highest-quality source image available. Its image CDN creates and presents optimized versions for different devices and browsers. “Highest quality” means a sound image, not an unnecessarily oversized file. Dimensions still need to suit the product and storefront.
Use a preserved master as the file you return to whenever you need a new export. Avoid making each new upload from an already compressed copy. Repeated lossy saves can soften detail or create blocks around edges.
- Keep an untouched master separate from web-ready copies.
- Avoid repeatedly saving the same lossy file.
- Check product details and color before exporting.
- Make a separate upload-ready copy for Shopify.
Before export, inspect details that help a customer judge the product. A shoe’s stitching, a shirt’s fabric, or a bottle’s label may need a closer look than the background.
Preserve an untouched master so you can make a fresh export if a compressed upload looks soft or blotchy.
Which Image Format Fits Each Shopify Asset?
Choose the format for the job: a product photograph, a transparent logo, and an animation do not have identical needs. WebP is flexible, but JPEG and PNG remain useful for specific assets and workflows.
Use JPEG for a photo when its workflow suits you, and choose PNG or WebP when you need transparency. JPEG does not support transparent backgrounds, so a cutout saved as JPEG gets a solid background.
Product photographs and banners
WebP suits many product photographs and banners because it can support lossy or lossless compression. JPEG remains a sound choice for photographs when your editing tools or image library already use it. Check a banner’s text and edges after export, since compression can affect small details.
Logos and graphics that need transparency
PNG supports transparency and works well for logos or graphics with clean edges. WebP also supports transparency, and lossless WebP files are 26% smaller than equivalent PNGs. The smaller file can help, but inspect thin lines and letter shapes before choosing an export.
Simple animations and other special cases
Shopify supports animated WebP versions for product images. GIF can also show simple animation, but its 256-color palette can constrain gradients and subtle color shifts. A limited palette may make a smooth product fade look rough or banded.
Consider how the asset appears against the store background. A logo with a transparent edge should not gain a white box, and animation should not distract from product details.
| Asset or need | Suitable format | Relevant behavior | Main consideration |
|---|---|---|---|
| Product photographs and banners | WebP or JPEG | WebP supports lossy and lossless options | Inspect detail and text |
| Transparent logos or graphics | PNG or WebP | Both support transparency | Check edges on store backgrounds |
| Simple animation | Animated WebP or GIF | Shopify supports animated WebP for product images | GIF uses 256 colors |
| Existing JPEG workflow | JPEG | Common photo format without transparency | Keep a clean source file |
Use a transparent format for a cutout or logo, and avoid choosing a photo format that forces a solid background.
How Does Shopify Automatically Optimize and Deliver Images?
You generally do not need to create separate WebP and AVIF files for every browser Shopify customers use. Shopify automatically handles delivery by creating optimized image versions and serving a compatible format based on browser capabilities.
The source image you upload is not always the delivered format a customer receives. Shopify’s image CDN creates resized versions for different devices, then selects a supported format based on the customer’s web client.
A web client is the browser or app that requests the page. Shopify’s image service checks what that client can use, including WebP or AVIF, and displays the best available format. Shopify began automatically serving WebP images in 2019.
This means manual conversion is optional, not a requirement for compatible delivery. You can still prepare WebP files yourself when they suit your workflow, but you do not need to make one copy for each browser.
Keep your source image clean and at useful dimensions. Shopify can create delivery versions, but it cannot restore detail that an earlier edit or export removed.
Treat the format you upload as your source asset, not as a promise about the exact format each visitor receives.
How Should You Compress Images Without Damaging Detail?
A smaller file is useful only if the product still looks clear enough for a customer to judge its details. Compress in small steps, then compare the result with the source image before you upload it.
Lossy compression reduces file size by removing some image data, which can lower visible detail when pushed too far. Lossless compression reduces file size while preserving the image data. Use the least compression that gives you a useful file size without visible damage.
Choose lossy or lossless compression for the image
For photographs, a lossy export often offers a practical balance between file weight and appearance. A product with fine knit texture or small printed text may need gentler compression than a smooth, simple image.
A practical JPEG or WebP export often starts around 80-85% quality. That is a starting point, not a universal setting. Export controls differ, and the right value depends on how the image looks after compression.
Check the export before uploading
Inspect the file at the size customers will see, then zoom in on important details. Look for compression damage: blotchy details, blocks, or softened texture. Color shifts near edges can also change how a product appears.
- Resize the image to the dimensions you need.
- Export a compressed copy, leaving the source unchanged.
- Compare fine details and color with the original.
- Adjust the export if texture becomes blotchy.
A product photo can look fine as a small thumbnail but reveal damage in a larger gallery view. Compare the same crop in both sizes before approving the export.
Zoom in on texture, edges, and color before approving a compressed export.
What File Size and Resolution Should Product Photos Target?
Aim for product photos around 300 KB as a practical guide, while keeping the image above Shopify’s zoom threshold. Check kilobytes and pixels separately, because file weight does not show whether an image has enough resolution.
Shopify’s website image-size guide recommends product photos around 300 KB. Product images must be more than 800 × 800 pixels for zoom functionality. Those figures are working targets, not hard upload limits.
A product photo’s useful balance depends on its detail, crop, and display in your theme. A close-up of woven fabric may need more data than a plain object against a flat background. Avoid forcing every image to the same file weight if important details become hard to see.
File size and image dimensions answer different questions. A photo can weigh 300 KB but have too few pixels for a useful zoom. Another image may have enough pixels but a file size that could be reduced without hurting its appearance.
Check how the photo looks in the product gallery and when enlarged. If zoom reveals softness, the source dimensions may be too small, or the image may have lost detail during export.
Check both the file’s kilobytes and its pixel dimensions, since one does not tell you the other.
How Do You Write Useful Alt Text for Product Photos?
Useful alt text tells someone what an informative image shows, rather than repeating a filename. Describe visible detailsthat help someone understand the product or image.
Google recommends concise, plain-language alt text for informative product images. It recommends an empty alt attribute for images that are purely decorative. Write for people who cannot see the image, not for a search phrase.
- Describe what is visibly important in the image.
- Use the product name or a distinguishing detail when useful.
- Keep the wording plain and concise.
- Use an empty alt attribute for a purely decorative image.
For a product view, “Blue ceramic mug with a curved handle” gives useful visual information. A camera-style filename such as “IMG_4837” does not describe the image. A phrase packed with repeated product terms sounds unnatural and adds little help.
Alt text should match the specific view. If one photo shows the front of a jacket and another shows its inside pocket, describe the detail each image adds instead of using the same line twice.
Write the description for the person who cannot see the image, not for a list of search terms.
How Does Google Find and Index Shopify Images?
For an important product image, place the image in a standard HTML img element with its image URL in src. The markup matters: Google can find images in an img element’s src attribute, but it does not index CSS images.
Use a standard img element for content images you want Google to discover. The file format and HTML element are separate choices: JPEG or WebP names the file type, while img tells the page how to place the image.
Put important image content in an HTML image element
Google Search supports images referenced in an img element’s src attribute in JPEG, WebP, BMP, GIF, PNG, SVG, and AVIF formats. The element gives search systems a clear image URL in the page markup.
| Format | Supported in an img src | Typical image role |
|---|---|---|
| JPEG | Yes | Product photographs |
| WebP | Yes | Product photos and graphics |
| PNG | Yes | Transparent logos and graphics |
| GIF | Yes | Simple animations |
| SVG | Yes | Scalable logos and icons |
Keep image discovery separate from decorative page styling
A CSS background can style a page, but it is not a substitute for an img element when the picture carries product information. A decorative background may add visual texture without adding useful content for image indexing.
Keep meaningful product views in the page’s HTML image markup. Use CSS for visual styling, not as the only place where an important product image exists.
Do not rely on a CSS background image alone for content you want Google to discover.
When Should You Use Picture Markup With a Fallback?
Use picture markup when you need to offer alternate sources in your theme while keeping a standard image fallback. The fallback keeps the image usable when a browser cannot load a preferred source.
Google recommends providing an img element with a src fallback when the picture element offers different image formats. Keep an img element with a meaningful src inside the picture markup.
The picture element lets a theme offer browser-specific image sources, such as a WebP file and a JPEG alternative. The browser can choose a source it supports, while the img element provides the fallback image.
Shopify Liquid’s image_url filter can create image URLs in a theme. A developer may use it to build custom image markup when the theme needs alternate sources or sizes. Check the finished page to confirm the image and fallback both work.
Most merchants do not need custom picture markup just to get Shopify’s automatic format delivery. Shopify’s image CDN already selects a compatible delivered format for a customer’s web client.
If you add alternate sources, keep the fallback image meaningful and usable when a preferred source is unavailable.
What Is a Practical Pre-Upload Optimization Workflow?
A reliable workflow starts with a preserved master and ends with a checked upload, not a rushed export. Keep each working step separate so a mistake does not damage the original image.
Prepare a copy that suits the way your Shopify theme displays the product. Do not repeatedly edit and resave a lossy copy. Each lossy save can remove more detail and leave you with a weaker file.
- Retain a high-quality master outside the upload folder.
- Crop and resize a working copy for the theme.
- Select a format that suits the image and workflow.
- Compress and inspect it in Squoosh or TinyPNG.
- Upload through the Shopify product editor with descriptive alt text.
Squoosh and TinyPNG are image-compression tools that help you compare a compressed copy with its original. Look closely at product edges, color, and fine texture before accepting the export.
In the Shopify product editor, add the finished image to the right product and write alt text that describes its view. Then preview the product page to see how the image fits the theme’s gallery and crop.
Keep the master separate from the compressed upload so a future correction does not start from an already degraded file.
How Do You Diagnose Blurry, Slow, or Poorly Cropped Images?
Start troubleshooting by identifying whether the problem is the downloaded file, the theme display, or the crop. Find the cause first, since changing the source will not fix every display issue.
Use Chrome DevTools to inspect image requests and Google PageSpeed Insights to find page-level opportunities.DevTools can show details such as transfer size and content type for an image request.
Trace slow image requests in browser tools
When the first image loads slowly, check its transfer size in Chrome DevTools. Google PageSpeed Insights can point out image-related opportunities on the page you test. A large transferred file may need a lighter export, while a delay can also involve the page request itself.
| Symptom | What to inspect | Practical check |
|---|---|---|
| Slow first image | Transferred file size and request | Review the request in Chrome DevTools |
| Blurry product detail | Source dimensions and compression | Compare the image with its master |
| Awkward mobile crop | Theme crop and display area | Preview the mobile product page |
Check sharpness and cropping in the theme
A blurry image may come from a source that is too small for its displayed size. It may also result from compression damage. Compare the image with the master to tell whether the source lost detail or the theme is enlarging a small file.
An awkward crop points to the theme’s display settings or the image’s aspect ratio. Preview the same product page at a narrow screen width before changing the source image.
Compare the same product image on desktop and mobile before changing the source file.
What Should You Check Before Publishing Image Updates?
Before publishing, check the image in the storefront context where a customer will actually see it. Preview the finished page on both mobile and desktop, since each view can crop the same image differently.
Shopify’s theme preview lets you inspect storefront presentation before publishing. Squoosh can show a visual comparison as you adjust compression. A preview helps you catch problems, but it cannot promise a particular page-speed score.
- Check product detail and color against the source.
- Review mobile and desktop crops in the theme.
- Confirm the file weight suits its place on the page.
- Write informative alt text for meaningful images.
- Check transparent edges and animated asset playback.
Pay close attention to transparent logos and product cutouts against the theme’s actual background. For an animation, check that movement does not hide a useful product view or make the page feel distracting.
Use Squoosh’s comparison view when compression makes a detail hard to judge. Review the image at its displayed size and in a larger product view, if the theme offers one.
Publish only after the image looks clear at its displayed size and remains useful on a narrow screen.
Conclusion
For most Shopify product photos, WebP is a strong prepared-file choice, while JPEG remains useful when it fits your workflow. Protect the source image so you can make a fresh export if a product detail looks soft.
Shopify’s image CDN selects delivered formats for supported browsers, so your upload does not dictate every customer’s format. Start with one high-traffic page and test the image in the storefront before scaling your process.
Choose one high-traffic product page, optimize a source image, and preview it on both desktop and mobile before applying the approach across your catalog.
