To optimize Shopify images, upload them at the size they will actually display (2048 x 2048 px is the usual sweet spot for square product photos), compress them, and let your theme serve resized WebP versions from Shopify's CDN. Then lazy-load only the images below the fold, never the main hero or product image, and give every image a descriptive file name and alt text.
That is the short answer. The checklist below walks through each step with the specs that apply in 2026, what Shopify already does for you, and where stores still lose speed and search visibility.
The Shopify image optimization checklist
- Use descriptive file names (for example, "red-running-shoes-nike.jpg") before you upload.
- Upload the right format: JPEG for photos, PNG for graphics with transparency or sharp edges. Shopify serves WebP to browsers that support it, so you do not need to convert files yourself.
- Upload at the right size: 2048 x 2048 px for square product images. Shopify accepts up to 5000 x 5000 px (25 megapixels) and 20 MB per image.
- Compress images before upload or with an app such as Tiny SEO (formerly TinyIMG), Crush or Nabu Image Optimizer.
- Keep one aspect ratio per product grid so cards line up and the layout does not jump.
- Use responsive images: the theme should output images with Shopify's
image_tagfilter, which addssrcset, width and height. - Lazy-load below the fold only. Load the hero or first product image right away and give it
fetchpriority="high". - Write useful alt text for every product image. Shopify allows up to 512 characters; 125 or fewer is the recommendation.
- Keep product structured data and the sitemap intact so search engines can connect images to products.
- Audit images regularly, especially after a theme update, a new app or a seasonal launch.
What does Shopify already do for your images?
A lot of image work happens on Shopify's side. Knowing the split saves you from paying for apps that repeat what the platform already does.
| Task | Shopify handles it | You still need to |
|---|---|---|
| Global delivery | Yes. Images load from Shopify's CDN, run by Cloudflare, at no extra cost. | Nothing. Do not add your own CDN or proxy. |
| Browser caching | Yes. Cacheable files are cached for one year. | Nothing. |
| Modern formats | Yes. The CDN picks a format the browser supports, usually WebP. | Upload clean JPEG or PNG originals. |
| Resized versions | Yes, when the theme requests images through image_url or image_tag. | Check custom sections and app widgets that hardcode full-size URLs. |
| JPEG compression | Yes, automatically. | Compress PNGs and very large originals. |
| Lazy loading | Partly. image_tag lazy-loads images in sections further down the page. | Make sure the hero and first product image are not lazy-loaded. |
| Alt text | Partly. The media editor may suggest alt text for images that have none. | Write or review alt text for every image. |
| File names | No. | Rename files before upload. |
In our own checks in October 2026, Shopify's CDN returned WebP to browsers that accept it and the original JPEG or PNG to browsers that do not. Shopify's documentation also lists AVIF as a format the CDN can choose, but in practice WebP is what most visitors receive.
1. How should you prepare images before uploading?
Two decisions before upload prevent most problems later: the file name and the format.
a. Name files with keywords
Google recommends file names that are short but descriptive, because generic names like "IMG1234.jpg" tell it nothing about the image. On Shopify the file name also becomes part of the image URL on the CDN. Here's how to name your files:
- Start with the main product keyword.
- Add brand, model or color if relevant.
- Use hyphens to separate words.
- Keep it short but descriptive.
For example, instead of "IMG1234.jpeg", use "red-running-shoes-nike.jpeg". Rename files before you upload them, because renaming later usually means replacing the image.
b. Picking the best file format
The upload format matters less than it used to, because Shopify converts images for delivery. It still affects quality, so choose by image type:
- JPEG: the safe choice for product and lifestyle photos. Small files, good color, no transparency.
- PNG: for transparency, text or sharp edges. Shopify's help center lists PNG as the best file type for most product images, followed by JPEG. Compress large PNGs first.
- WebP: accepted by Shopify, but you do not need to convert to it. Shopify already serves WebP to browsers that support it.
- AVIF: Google Search supports it, but it is not on Shopify's list of accepted product image formats. Upload JPEG or PNG instead.
- SVG: best for logos and icons in your theme.
- GIF: avoid it for product demos. A short compressed video is lighter and looks better.
2. How do you reduce image file sizes on Shopify?
Images are often the heaviest part of a Shopify page, and the largest one on screen is usually what Google measures for Largest Contentful Paint (LCP). Smaller files mean a faster LCP, especially on mobile.
a. Tools for compressing images
You can compress images before upload with any desktop or web tool, or let a Shopify app compress the whole catalog and every new upload. Tiny SEO (formerly TinyIMG), Crush and Nabu Image Optimizer are all active on the Shopify App Store in October 2026; we compare them in section 6.
Test any app on a few key images first, such as your homepage hero and a best-selling product, and keep a backup of the originals before you run a bulk job.
b. Resizing images to fit Shopify
Shopify's current image guidelines are:
- Square product images: 2048 x 2048 px usually displays best.
- Maximum size: 5000 x 5000 px or 25 megapixels.
- Maximum file size: under 20 MB.
- Aspect ratio: pick one ratio (1:1 or 4:5 are common) and use it across the catalog.
Bigger is not safer. The CDN will never resize an image above its original dimensions, and it can resize down to whatever the theme requests (up to 5760 px wide). A 5000 px upload does not make your store sharper, but it makes uploads slower and gives the CDN more work for no visible gain. Here's a simple workflow:
- Start with a high-quality original.
- Crop to your catalog's aspect ratio.
- Export at 2048 px on the long side.
- Compress, then upload.
3. Advanced techniques: lazy loading, responsive images and the LCP image
Once file size is under control, the way images load decides how fast the page feels.
a. Using lazy loading the right way
Lazy loading delays images until the visitor scrolls near them. Every major browser supports it natively with loading="lazy", so most stores do not need an app for it. Shopify's image_tag filter already sets loading="lazy" on images in sections further down the page.
- Lazy-load: collection grids below the first row, product recommendations, blog images, footer badges.
- Do not lazy-load: the homepage hero, the first product image, or anything else visible when the page opens. Google's web.dev guidance is clear that lazy-loading the LCP image makes it load later.
b. Prioritizing the LCP image
Your largest above-the-fold image should load first. Add fetchpriority="high" to it, which all major browsers now support. In Liquid, image_tag also accepts preload: true, which sends a preload hint as an HTTP header. Shopify advises using it sparingly, for one or two images at most. Our guide to preloading images on Shopify shows both methods step by step.
c. Making images responsive
Responsive images send a small file to phones and a larger one to desktop screens. When a theme uses image_tag, Shopify generates a srcset with a sensible set of widths and adds width and height attributes automatically.
To get the most out of it:
- Set an accurate
sizesattribute, so phones do not download a desktop-width image. - Keep width and height on every image. Without them, images push content around as they load, which hurts Cumulative Layout Shift (CLS).
- Check custom sections and app widgets. They sometimes hardcode a full-size image URL and skip all of this.
- Test on real devices, not only in a desktop browser.
4. How do you optimize Shopify product images for SEO?
Image SEO helps your products appear in Google Images and gives search engines and AI assistants a clearer picture of what you sell. SEO alone is no longer enough, so accurate product data, including images and their descriptions, also matters for how AI shopping tools read your store.
a. Writing alt text with keywords
Alt text describes an image for screen reader users and gives search engines context. In the Shopify admin, open a product, click a media item and choose Add alt text. Shopify allows up to 512 characters and recommends 125 or fewer.
How to write effective alt text:
- Describe what the image actually shows.
- Include the product name and a key detail such as color, material or model.
- Use keywords naturally. Google warns against stuffing alt attributes with keywords.
- Skip phrases like "image of" or "buy now".
For example, instead of "Buy NIKE shoes", write "Person running in Nike Star Runner 2 shoes". Instead of "sweater", write "Blue wool sweater with cable knit pattern". If the media editor suggests alt text, review it before you accept it, because a suggestion may miss the detail that sets your product apart.
b. Adding structured data for images
Structured data tells search engines which image belongs to which product, along with price and availability. Google requires the image property for a product to be eligible for rich results and badges in Google Images.
- Shopify's own themes, including Dawn and Horizon, output product structured data with the
structured_dataLiquid filter. Products with variants are output as aProductGroup. Custom themes should do the same. - Check your product pages in Google's Rich Results Test to confirm the image, price and availability are there.
- Shopify's automatic product sitemap already lists product images, so you do not need a separate image sitemap app.
For a deeper look at file names, alt text and Google Images, see our guide to Shopify image SEO.
5. How do you keep images optimized over time?
New products, new apps and theme updates all add weight back, so image optimization is not a one-time job.
Regular image maintenance and updates
Schedule regular image audits: For larger stores, review images monthly. Smaller stores can check quarterly. Always check after a theme update or a new app, because those are the most common reasons a fast store slows down.
What to check during audits:
- LCP and CLS: Shopify's web performance report (Analytics > Reports) shows real visitor data for the last 30 days.
- Image weight on key pages: run your homepage, a collection and a product page through PageSpeed Insights or our Shopify speed test.
- Mobile display: make sure images crop and scale correctly on phones.
- Alt text coverage: look for new products uploaded without alt text.
- File size: compress any new uploads that slipped through.
Updating product images: when you add products or refresh collections, keep quality high and the look consistent.
- Use an app or a bulk workflow for large changes.
- Keep the same dimensions and aspect ratio within each product category.
- Check file name, size and alt text before you publish new images.
Seasonal update plan:
| Timing | Tasks |
|---|---|
| Pre-season | Upload and optimize new images. |
| Mid-season | Update promotional visuals and check LCP on campaign pages. |
| End of season | Archive images no longer in use. |
6. Tools and services to simplify image optimization
Comparing image optimization apps
| Feature | Tiny SEO Speed Image Optimizer (formerly TinyIMG) | Crush: Speed & Image Optimizer | Nabu Image Optimizer & SEO |
|---|---|---|---|
| Compression | Yes, within monthly limits | Choice of algorithms | Three levels (low, medium, high) |
| Other image features | File name and alt text optimization, lazy loading and JSON-LD on paid plans | File and alt tag renaming, 30-day backup | WebP conversion, auto sync of products, collections and blogs, accepts nine image formats including HEIC and AVIF |
| Free plan | 50 image optimizations per month | 25 MB one-time | Listed as free |
We checked these plans on the Shopify App Store in October 2026. They change often, so confirm before you install. Uninstalling an app does not always remove the code it added to your theme.
Expert help
Some stores need more than an app: a custom theme that loads images badly, app widgets that bypass the CDN, or a large catalog with years of inconsistent uploads. We fix these as part of our Shopify SEO work, from theme code to alt text at scale.
Conclusion: steps to improve Shopify images in 2026
Optimized images give you faster pages, better visibility in search and a smoother path to checkout.
Work through the checklist at the top of this guide once, then recheck after every theme or app change. Track these three numbers:
| Metric | Target | Why it matters for images |
|---|---|---|
| Largest Contentful Paint (LCP) | 2.5 seconds or less | The hero or main product image is usually the LCP element. |
| Cumulative Layout Shift (CLS) | 0.1 or less | Images without width and height move content as they load. |
| Interaction to Next Paint (INP) | 200 ms or less | Heavy image sliders and zoom scripts can slow down taps. |
These are Google's Core Web Vitals thresholds, measured at the 75th percentile of visits. Shopify's web performance report uses the same targets.
FAQ
What is the best image size for Shopify product images?
For square product images, Shopify recommends 2048 x 2048 px. Images can be up to 5000 x 5000 px (25 megapixels) and must be under 20 MB, but going above 2048 px rarely improves what shoppers see.
Does Shopify optimize images automatically?
Partly. Shopify serves images from its CDN, caches them for a year, compresses JPEGs and delivers WebP to browsers that support it. It does not rename files, write alt text, fix oversized uploads or stop a theme from lazy-loading the hero image. Those are still your job.
Should I upload WebP or AVIF images to Shopify?
You do not need to. Upload good JPEG or PNG originals and Shopify will convert them to WebP for browsers that support it. WebP uploads are accepted, but AVIF is not on Shopify's list of accepted product image formats.
Should I lazy load every image on my Shopify store?
No. Lazy-load images below the fold, but load the hero and the first product image immediately and mark the largest one with fetchpriority="high". Lazy-loading those images delays LCP and makes the page feel slower.
Do I need an image optimization app?
Not always. If your theme uses Shopify's image filters and you compress images before upload, the platform covers most of the work. An app helps when you have a large catalog, many existing unoptimized images, or no time to prepare each file by hand.
Need help shipping this on Shopify?
We've built 500+ Shopify and Shopify Plus stores. Talk to our team about your build.
Shopify insights, straight to your inbox
Practical notes on growing a Shopify store: conversion, speed, migrations, and what we learn from client builds.
Want more of our posts in your Google results? Add Codersy as a preferred source.
Add Codersy on Google(opens in a new tab)


