Shopify Broken Images: Causes, Fixes, and Prevention

Broken images on a Shopify store can quietly kill conversions. Shoppers who see a missing image icon or colours that don't match your product photos lose trust and leave. This guide covers every root cause of Shopify broken images in Shopify, from incorrect colour profiles exported from Photoshop to missing alt text that leaves both customers and Google in the dark.

Why Shopify Images Break: The Full Picture

Image problems on Shopify aren't always what they appear to be at first glance. A "broken image" can mean the file never loaded, shows the wrong colour, or displays a generic icon with no description. Each symptom has a different cause, and confusing them wastes hours of troubleshooting.

Here's the landscape of Shopify image issues broken into three categories:

• Images that don't display at all: The classic broken image icon (a torn page or grey box) 
• Images with shifted or washed-out colours: Typically caused by colour profile mismatches during export 
• Images with missing alt text: Visually fine for sighted shoppers, but broken for screen readers, slow connections, and Google's crawlers. Each category has specific causes and specific fixes.

Category 1: Images that don't load (Broken Image Icon)

What You're Seeing

A broken image icon appears when the browser requests an image file but receives a 404 error, an empty response, or a file it cannot render. On Shopify, this most commonly appears as a grey placeholder or a small icon in the corner where the image should be.

Root Causes

Unsupported or corrupted file formats

Shopify supports JPEG, PNG, GIF, and WebP image formats. Uploading unsupported file types, such as TIFF, BMP, or HEIC, often causes upload failures. Incorrect file extensions and progressive JPEGs can also trigger display errors in some Shopify themes. 

Fix: Always export product images as baseline JPEG or PNG. In Photoshop, use File > Export > Save for Web (Legacy) and confirm the format is set to JPEG, not Progressive.

Over-compressed or corrupted files

Third-party image compression tools can strip internal metadata or corrupt the file structure if compression is applied multiple times or too aggressively. Shopify also applies its own compression during upload so that an already-compressed image can be degraded further.

Fix: Compress images once before uploading, targeting under 500KB per file. Use Squoosh, ShortPixel, or TinyPNG, then upload the compressed version directly, without running it through additional tools.

Your store still references deleted files.

If you delete a product image from your Files section or rename it after linking it to a product or collection, Shopify loses the path to it. The product listing still "expects" the image, but the file no longer exists at that URL. This is especially common after store migrations or bulk CSV imports where image URLs are hardcoded.

Fix: Open the product editor and re-upload images for any listing showing broken icons. For large stores, run a crawl with Screaming Frog or a similar SEO tool to find all 404 image URLs, then address each one.

The theme code is pointing to the wrong path.

After a theme update or a manual code edit, Liquid templates can reference asset paths that no longer exist. An asset_url filter pointing to a deleted file, or an img_url filter with an invalid parameter, will render a broken image icon with no obvious indication of what went wrong.

Fix: Open your browser's developer tools (F12), go to the Network tab, filter by "Img," and reload the page. Any image returning a 404 will be flagged. Compare those file paths against your current theme assets to find the mismatch.

App conflicts are breaking image loading

Apps that add image zoom, lazy loading, product galleries, or swatch selectors interact directly with how Shopify loads images. If two apps both try to control image behaviour on the same page, they can interfere with each other. Apps that haven't been updated to work with Shopify's Online Store 2.0 architecture are especially prone to this.

A particularly common pattern: an app is uninstalled, but its JavaScript event listeners or injected code remain in the theme. That leftover code continues to intercept image load events and block the default behaviour.

Fix: Temporarily disable all image-related apps from your Shopify admin, then re-enable them one at a time, testing the product page after each. If images reappear after turning off a specific app, that's your conflict.

Browser cache serving stale or broken versions

After you fix a broken image on your end, visitors (and you, during testing) may still see the broken icon because their browser or Shopify's CDN is serving a cached version of the old response.

Fix: Test in an incognito window immediately after making a fix. For CDN-level caching, wait a few minutes — Shopify's CDN typically propagates changes globally within 5–15 minutes, though it can occasionally take longer. You can also hard-refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).

Lazy loading conflicts

Most modern Shopify themes use lazy loading to delay off-screen images until users scroll near them, improving page speed. However, theme customisations or app conflicts can break this functionality, causing images to remain invisible even when the files themselves are loading correctly.

Fix: If images appear broken only below the fold, check your theme's lazy loading implementation. Look for multiple conflicting loading="lazy" attributes or competing JavaScript libraries managing deferred image loading.

Category 2: Wrong Colours After Export from Photoshop

What you're seeing

Your product photos look perfect on your calibrated monitor. You upload them to Shopify, and the colours look dull, over-saturated, slightly purple, or noticeably darker. This is one of the most frustrating Shopify image problems because the image file exists and renders, but it just looks wrong.

Why this happens

Shopify displays images in the sRGB colour space and removes embedded colour profiles during upload. If an image was created in Adobe RGB, ProPhoto RGB, or CMYK, colours may shift because browsers will interpret it as sRGB.

Adobe RGB images often appear duller, with altered reds and blues and reduced contrast after conversion. CMYK images are even more problematic, as Shopify cannot reliably render this print-based colour model, often resulting in dark or distorted images.

Fix: Export in sRGB before uploading to Shopify

The solution is to convert your image to the sRGB colour space before uploading, not after, and not by stripping the profile without converting.

In Photoshop (recommended workflow):

1. Go to Edit > Convert to Profile
2. Under "Destination Space," select sRGB IEC61966-2.1
3. Click OK, this maps the colour values from your working space into sRGB
4. Export via File > Export > Save for Web (Legacy)
5. In the Save for Web dialogue, confirm that Convert to sRGB is checked
6. Choose JPEG or PNG, set quality (80–90% is a good range), and save

Why "Convert to Profile" matters more than "Assign Profile":

"Assign Profile" changes how Photoshop interprets the file's existing numbers without actually adjusting the colour values. "Convert to Profile" recalculates the colour values so they produce the same visual appearance in the new colour space. For web export, Convert to Profile is the correct choice.

Alternative: Remove the colour profile (faster, with trade-offs)

Shopify recommends saving images without an embedded colour profile, so sRGB is assumed by default. This works well if the image was already edited in sRGB. However, images created in Adobe RGB must be converted to sRGB before the profile is removed, or colour shifts may occur after upload. 

In Photoshop: Edit > Assign Profile > Don't Colour Manage This Document — then export. Use this only if you're already in sRGB.

Testing your export before uploading:

After saving your file, open it directly in Chrome by dragging it into the browser window. Chrome is not fully colour-managed and displays images as Shopify does. If the colours look correct in Chrome, they'll look correct on your storefront.

Category 3: Images display correctly, but SEO tools report missing alt text?

This is a surprisingly common Shopify issue. Everything may look fine until an image fails to load or is accessed through a screen reader. In those situations, users either see a broken image icon or receive no information about what the image is supposed to show.

Why alt text matters more than most store owners think

Alt text does much more than support SEO. It directly affects the shopping experience in several ways:

• Accessibility: Screen readers use alt text to describe images for visually impaired users.
• Fallback content: If an image doesn't load, alt text provides context instead of a blank placeholder.
• Image SEO: Google relies on alt text to understand image content and index it in Google Images.

In other words, an image without alt text misses both SEO opportunities and accessibility benefits.

The two most common causes

• Alt text hasn't been added in Shopify Admin: The image has been uploaded, but the alt text field is still empty.
• Alt text exists, but the theme isn't rendering it: This issue is more common than many merchants realise. The alt text is stored in Shopify, but the Liquid template uses alt="", preventing search engines and accessibility tools from reading it.

How to add alt text in Shopify

• Product images: Products → Select a product → Click the image → Add alt text.
• Collection images: Products → Collections → Select a collection → Add alt text to the image.
• Blog or page images: Click the image inside the editor and fill in the alt text field.
• Banners and hero images: Online Store → Themes → Customise → Look for an Alt Text or Image Description field.

How to fix themes that don't output alt text

If you've already added alt text but SEO tools still report alt="", the issue is likely in your theme's Liquid code.

Replace:

With:

{%- assign banner_alt = collection.image.alt | default: collection.title -%}

This ensures Shopify uses the saved alt text when available. If none exists, the collection title is used as a fallback instead of leaving the attribute empty.

How to write effective alt text

Alt text should accurately describe the image in a concise, natural way that still makes sense when read independently.

Do:

• Describe what the image actually shows.
• Include relevant keywords naturally when appropriate.
• Keep it concise, ideally under 125 characters.
• Be specific rather than generic.

Example: Women's merino wool sweater in dusty rose, front view.

Don't:

• Start with phrases like "Image of" or "Photo of."
• Stuff keywords into the description.
• Reuse the same alt text across multiple images.
• Leave important images without alt text.

For purely decorative elements such as background patterns, dividers, or visual flourishes, using alt="" is actually the correct approach. It tells screen readers to skip those elements, creating a cleaner and less distracting experience for users who rely on assistive technology.

Preventing Shopify image problems before they start

Most Shopify image issues are preventable with a consistent workflow. Here's what to standardise across your store:

Image preparation checklist before uploading:

• Format: JPEG (baseline, not progressive) for photos; PNG for images needing transparency.
• Colour profile: sRGB, convert in Photoshop before exporting, don't just strip the profile.
• File size: Under 500KB per image after compression.
• Dimensions: 2048 × 2048 px recommended for product images (square format works best across themes).
• File names: Lowercase, hyphens instead of spaces, no special characters (e.g., blue-merino-sweater-front.jpg).

Alt text workflow:

• Write alt text for every product image before publishing the listing.
• Add a note to your product upload process so it doesn't get skipped.
• After any theme update, run a quick SEO audit to check that alt text is still rendering correctly.

Theme and app maintenance:

• Before updating your theme, duplicate it first and test it on the copy.
• After installing or removing any image-related app, test product pages on both desktop and mobile.
• Keep a short list of installed apps and avoid stacking multiple tools that control the same functionality (image zoom, lazy loading, gallery).

Regular checks:

• Once a month, view key product pages in an incognito window to catch display issues that your own browser cache might be hiding.
• After any platform update, check the Shopify Status page to rule out CDN issues if images suddenly look broken across the store.

Does fixing alt text actually improve rankings? It can. Alt text helps Google understand image content and improves the likelihood of appearing in Google Image Search. More importantly, it prevents your pages from being flagged for accessibility issues and gives you one more on-page keyword signal without any additional content.