Image SEO for Shopify: a practical guide

Image SEO is one of the most underrated channels for Shopify traffic. Done well, it brings in customers searching Google Images, improves your overall page rankings via Core Web Vitals, and helps screen readers and accessibility tools serve your products to a broader audience.

Done badly, it actively hurts your store: slow pages drop in rankings, missing alt text leaves search engines guessing what your images contain, and oversized files burn customer mobile data.

This guide covers everything that actually matters, in order of impact. We’ll focus on what’s specific to Shopify rather than rehashing generic SEO advice you’ve read elsewhere.

The five things that matter most

If you only read one section of this article, read this one. These five are responsible for ~80% of the image SEO impact on a typical Shopify store.

Descriptive alt text on every image
Sensible filenames (before upload)
Appropriate image dimensions and compression
Lazy loading for below-the-fold images
Width and height attributes to prevent layout shift

We’ll cover each in detail. The other sections cover things that matter at the margin or in specific situations.

1. Alt text: what to write and what to avoid

Alt text (the alt="" attribute on <img> tags) is the single most important on-page signal for image SEO. Google uses it to understand what an image contains. Screen readers use it to describe images to visually impaired users. When images fail to load, browsers display the alt text.

What good alt text looks like

Alt text should describe the image specifically and naturally. Imagine you’re describing the image to someone over the phone.

Bad: alt="image", alt="photo", alt="product", alt="DSC_0234.jpg"

Lazy: alt="leather wallet" — true but generic

Better: alt="Brown leather bifold wallet with embossed logo"

Best: alt="Brown leather bifold wallet with embossed logo, open showing card slots"

The “best” version is descriptive enough that someone who can’t see the image still understands what it shows and how it differs from other images of the same product.

How long should alt text be?

Roughly 80-125 characters is a good range. Long enough to be descriptive, short enough that it doesn’t read as an essay. Most screen readers will read the full text, so don’t pad it with keywords — that’s both bad UX and ignored by Google.

What to avoid

Don’t keyword-stuff. alt="brown leather wallet bifold wallet mens wallet best wallet 2026" was an SEO tactic in 2015. Now it’s actively flagged as spam. Write for humans first.

Don’t write the same alt text on every image. If you have 12 photos of the same wallet from different angles, each should describe what’s different about that specific angle.

Don’t repeat the visible caption. If your image has a visible caption that says “Brown leather wallet, $89,” the alt text shouldn’t say the same thing. Alt text is for situations where the visible content can’t be seen.

Don’t use alt text for decorative images. Pure decoration (a background pattern, a divider line, an icon next to text that already labels itself) should have alt="" (empty). This signals to screen readers that the image carries no information and can be skipped.

Alt text for product images specifically

For product photography, a useful formula:

[Color/style] [product type] [distinguishing feature] [context if relevant]

Examples:

alt="Black ceramic teapot with bamboo handle"
alt="Pink linen midi dress with side pockets, front view on model"
alt="Walnut wood cutting board with juice groove, shown with sliced lemon"

This formula generates alt text that’s useful for both Google and screen readers without sounding forced.

Alt text in Shopify specifically

In Shopify, you set alt text in two places:

For product images: From the product admin page, click an image → click the alt text icon (looks like a small notepad) → enter alt text → save. This sets alt text everywhere the product image appears.

For theme images and gallery images: This varies by theme and gallery app. Native theme sections usually have an alt text field next to each image picker. Gallery apps should also expose alt text per image — if a gallery app doesn’t let you set alt text, that’s a serious limitation and you should look at alternatives.

Auto-generated alt text: be careful

Several apps offer “AI-generated alt text.” These use image recognition to guess what’s in the image and write alt text automatically.

The output quality varies wildly. For simple product photography on white backgrounds, it can be acceptable (“a brown leather wallet”). For lifestyle imagery, complex scenes, or anything with context, the output is often comically wrong.

If you’re a small store with hundreds of products and can’t write alt text manually, AI-generated alt text is better than nothing — but only if you review the output. Treat it as a draft, not a final answer.

2. Filenames: name files before you upload them

Filenames are a smaller signal than alt text, but they’re free and easy to get right.

Google uses filenames as one signal for understanding what an image contains. So does Shopify’s own image search, and so do internal links to images.

What good filenames look like

Bad: IMG_0234.jpg, Screenshot 2024-03-12 at 4.17 PM.png, final-final-v3-actually-final.jpg

Better: brown-leather-bifold-wallet.jpg

Best: brown-leather-bifold-wallet-open.jpg, brown-leather-bifold-wallet-card-slot-detail.jpg

Filename conventions

A few rules that have stayed consistent across the SEO world for years:

Use hyphens, not underscores. Google reads leather-wallet as two words, leather_wallet as one weird word.
Use lowercase. Some servers and CDNs are case-sensitive; lowercase avoids the inconsistency.
Be descriptive but not absurd. brown-wallet.jpg is fine. the-best-handcrafted-genuine-leather-bifold-wallet-for-men-in-2026.jpg is keyword stuffing.
Don’t use spaces. They get URL-encoded as %20 and look terrible in source code.

Rename before upload, not after

Once an image is in Shopify, renaming it is awkward and breaks any links pointing to the old filename. Rename images on your computer before uploading them.

If you have an existing store full of IMG_0234.jpg filenames, the cost-benefit of renaming them now is debatable. For new content, fix it going forward. For existing content, prioritise the product pages and category pages that drive your top traffic — those get the most SEO benefit from cleanup.

3. Image dimensions and compression

The right image dimensions matter for two reasons: file weight (affecting page speed) and visual quality (affecting conversion).

How big should product images be?

For Shopify product images, 2048 pixels wide on the longest side is a good upload size. This is large enough for Shopify’s zoom functionality to look sharp on high-density displays (Retina, 4K monitors), but not so large that it bloats your storage or causes upload problems.

For gallery images, lifestyle photography, and editorial content, 1500-2000 pixels wide is usually enough.

For hero images, banners, and full-width feature placements, 2400-3000 pixels wide can be justified.

Going bigger than 3000px is rarely useful. Shopify resizes images on its CDN automatically — your original is the master file, but visitors receive smaller versions appropriate to their screen.

Compression: balancing quality and weight

Even at the right dimensions, an image can still be huge if it’s poorly compressed.

JPEG quality 80% is usually the sweet spot for product photography. Indistinguishable from quality 100% to the human eye, roughly 60% smaller file size.

Tools for compression before upload:

TinyPNG — free for individual images, paid for bulk
Squoosh — Google’s free in-browser tool, very controllable
ImageOptim (Mac) or FileOptimizer (Windows) — desktop apps for batch compression
Photoshop’s “Save for Web” — still excellent if you have Photoshop

Format selection

Three main formats matter for ecommerce:

JPEG: Best for photography. Wide compatibility. Lossy compression. Use for product photos, lifestyle imagery, anything photographic.

PNG: Best for graphics with transparency, logos, illustrations with sharp edges. Lossless but large file sizes. Use sparingly for ecommerce — only when you actually need transparency or pixel-perfect edges.

WebP: Better compression than JPEG, supports transparency like PNG. All modern browsers support it. Shopify’s CDN automatically serves WebP to compatible browsers when you upload JPEGs or PNGs.

AVIF: Even better compression than WebP. Newer; support is growing but not universal. Shopify is starting to support it; check status before relying on it.

For Shopify specifically: upload JPEGs (or PNGs if you need transparency). Shopify’s CDN handles the WebP conversion. You don’t need to upload WebP manually.

Don’t oversize

The most common image SEO mistake we see on Shopify stores is uploading enormous images and relying on CSS to scale them down.

A 5MB image scaled to 500px wide in CSS is still a 5MB download. The visitor’s browser downloads the whole file before scaling it. Your page speed suffers, your customer’s data plan suffers, your Core Web Vitals scores drop.

Resize images to roughly the maximum dimensions they’ll display at, with some buffer for Retina displays. A 500px-wide image on the page should be uploaded at 1000-1500px wide (for Retina), not 5000px wide.

4. Lazy loading

Images below the fold (the parts of the page a visitor has to scroll to see) shouldn’t load until they’re about to enter the viewport. This dramatically improves initial page load time.

How to enable lazy loading

The native browser approach, supported in all modern browsers:

<img src="image.jpg" loading="lazy" alt="...">

That’s it. The loading="lazy" attribute tells the browser to defer loading until the image is near the viewport.

When to use lazy loading

Lazy load:

All images below the fold
Gallery images (most of them won’t be in the initial viewport)
Related product images
Footer content images

Don’t lazy load:

Above-the-fold hero images
The main product image on a product page
The Largest Contentful Paint (LCP) element on any page

If you lazy load the first hero image on your page, you actively hurt your Core Web Vitals — the LCP element should load as eagerly as possible.

Lazy loading in Shopify

Most modern Shopify themes (Dawn, Sense, Refresh, etc.) lazy load images by default. Check your theme’s image rendering by viewing the page source — if you see loading="lazy" on most images but not the hero, you’re set up correctly.

Some older themes don’t lazy load. If yours doesn’t, you can add it via a small theme edit:

Find your theme’s image rendering snippet (often snippets/image-element.liquid or similar)
Add loading="lazy" to the <img> tag
Test that it doesn’t break responsive image rendering

For non-developers, switching to a more modern theme is often easier than editing code.

5. Width and height attributes

The smallest tip with the biggest impact: always include width and height attributes on <img> tags.

Why this matters

When the browser loads a page, it doesn’t know how much space each image will take until the image finishes downloading. If you don’t tell it the dimensions in advance, the browser:

Renders the page with placeholder space
Downloads each image
Resizes the placeholder to match the actual image dimensions
Pushes everything below it down (or up)

This is called Cumulative Layout Shift (CLS), and it’s one of Google’s Core Web Vitals. High CLS hurts your search rankings.

The fix

Include width and height:

<img src="..." width="800" height="600" alt="...">

The browser uses the ratio to reserve the right amount of space before the image loads. Even when you scale the image with CSS, the browser still uses the ratio to prevent layout shift.

How Shopify handles this

Modern Shopify themes typically include width and height attributes automatically when you use the proper Liquid image tags:

{{ product.featured_image | image_url: width: 800 | image_tag }}

The image_tag filter outputs a proper <img> tag with all the right attributes.

If you write custom theme code with hand-written <img> tags, remember to include the dimensions explicitly.

Beyond the basics: structured data

If you want to go further on image SEO, structured data is the next step.

Structured data is JSON-LD code that tells search engines specific information about your page in a machine-readable format. For images, the relevant types are:

Product schema with image references
ImageObject schema for standalone images
Recipe, Article, etc. for content that includes images

Shopify and structured data

Modern Shopify themes include Product structured data by default. View the source of one of your product pages and search for application/ld+json — you should see a block of JSON describing the product, including image URLs.

If your theme doesn’t include this, you have two options:

Use a structured data app like Smart SEO or JSON-LD for SEO. These automatically generate the right schema for your products.

Add it via theme code if you’re comfortable. Shopify has documentation on adding structured data.

Image-specific structured data

For images specifically, you can include additional metadata like:

License information (if you license your images)
Photographer credit
Geographic location (if relevant for the image)

For most ecommerce stores, the basic product image references in Product schema are enough. Don’t over-engineer this.

Core Web Vitals and what they mean for image SEO

Google’s Core Web Vitals are three metrics that affect search rankings. Two of the three are directly affected by images.

Largest Contentful Paint (LCP)

How long it takes for the largest visible element on the page to render. On most Shopify pages, the largest element is an image (hero banner, main product photo, etc.).

Target: Under 2.5 seconds. Above 4 seconds is “poor.”

To improve:

Don’t lazy load your hero/LCP image
Use Shopify’s CDN URL parameters to serve appropriately-sized versions
Use WebP format (Shopify does this automatically)
Preload the LCP image: <link rel="preload" as="image" href="...">

Cumulative Layout Shift (CLS)

How much content jumps around as the page loads. Mostly caused by images without dimensions specified.

Target: Under 0.1. Above 0.25 is “poor.”

To improve:

Always include width and height on <img> tags
Reserve space for embedded content (iframes, videos)
Avoid inserting content above existing content after page load

Interaction to Next Paint (INP)

How responsive the page feels when users interact with it. Not directly affected by images, but indirectly affected by large image gallery JavaScript that blocks the main thread.

To improve image-related INP:

Use lightweight gallery apps that ship minimal JavaScript
Defer non-critical JavaScript until after the page is interactive
Avoid gallery apps that load on every page if you only use them on a few pages

Testing Core Web Vitals

Tools to check:

PageSpeed Insights (pagespeed.web.dev) — free, gives you both lab and field data
Google Search Console — under “Core Web Vitals” report, shows your store’s field data over time
Chrome DevTools → Lighthouse — local testing while you make changes

Run a Core Web Vitals check before and after any major image-related change.

Google Images SEO specifically

Google Images is its own traffic channel separate from regular search. Some ecommerce categories (fashion, furniture, home goods, art) get significant traffic from Google Images that converts well.

To optimise for Google Images:

Use descriptive filenames (covered above)

Use descriptive alt text (covered above)

Surround images with relevant text content. Google uses the text near an image to understand its context. A product image inside a product page with descriptive product copy ranks better than the same image isolated.

Make sure images are crawlable. Don’t block images via robots.txt or use JavaScript-heavy gallery apps that hide images from search engines. (Most don’t have this problem, but worth checking.)

Add proper image sitemaps. Shopify generates an image sitemap automatically at /sitemap.xml. You can submit this to Google Search Console.

Use the Product schema so your images appear in Google’s product carousels and shopping results.

Common image SEO mistakes on Shopify stores

A pattern-matching list from auditing many Shopify stores:

Mistake 1: All images named IMG_xxxx.jpg. Rename before upload going forward.

Mistake 2: Missing alt text on theme/banner images. Product images often have alt text; theme images often don’t. Check every section.

Mistake 3: Hero images that aren’t preloaded. The LCP image should be eager-loaded and ideally preloaded. Many themes get this wrong.

Mistake 4: Identical alt text on every product variant image. “Red shirt” repeated 8 times for 8 angles of the red shirt. Each angle should have specific alt text.

Mistake 5: Uploading 5000px images everywhere. Resize before upload. Shopify will resize on serve, but the original is what counts for storage and bandwidth.

Mistake 6: PNGs everywhere. PNG is for graphics with transparency. JPEG for photography. Using PNG for product photography bloats file sizes for no benefit.

Mistake 7: Skipping width/height attributes. Every <img> tag should have them.

Mistake 8: Lazy loading the hero image. Above-the-fold images should load eagerly.

Mistake 9: Galleries that ship megabytes of JavaScript. A gallery app that ships 50KB of JavaScript on every page (including pages without galleries) is dragging down your whole store. Test what your gallery app actually loads.

Mistake 10: Forgetting Google Images traffic exists. If you sell visually-driven products, regularly check what brings traffic from Google Images in Search Console. Optimise the highest-traffic image pages first.

A short list of tools that earn the recommendation:

PageSpeed Insights (free) — first stop for any image performance investigation

Shopify’s built-in image transforms — use ?width= and ?height= URL parameters on Shopify CDN URLs

Squoosh (free) — Google’s compression tool, granular control

TinyPNG (free tier available) — fast batch compression

Google Search Console (free) — Core Web Vitals reports, image search performance

Screaming Frog SEO Spider (free for up to 500 URLs) — finds missing alt text and oversized images across your whole site

We don’t recommend the paid “SEO score” apps that rate your store out of 100. These tend to focus on metrics that look like SEO without actually being SEO. The free tools above tell you what you need to know.

A specific gallery note

The reason we got into image SEO seriously is because we built A1 Image Gallery, and we wanted gallery apps to be a contributor to SEO rather than a detractor.

A1 ships small storefront JavaScript (~15KB), uses Shopify’s CDN for all image serving, includes lazy loading by default, and exposes alt text fields prominently. This is partly because we wanted to compete on speed metrics, and partly because we believe gallery apps should serve image SEO, not work against it.

You don’t have to use A1 to get good image SEO — but if you’re shopping for a gallery app and SEO matters to your store, ask any gallery app you’re evaluating to demonstrate their JavaScript weight and lazy loading behaviour. Run their demo store through PageSpeed Insights. Make sure they’re not undermining the work you’re doing elsewhere.

Final priority list

If you do nothing else, do these five things in order:

This week: Add proper alt text to every product image’s primary photo. Don’t worry about variant images yet.
This week: Run your top 5 traffic pages through PageSpeed Insights. Identify the LCP image on each page and confirm it’s not lazy-loaded.
This month: Rename new image uploads with descriptive filenames before upload.
This month: Audit your theme for <img> tags without width and height attributes. Add them.
Next month: Set up Core Web Vitals tracking in Search Console and check it monthly.

Everything else in this article is refinement on top of those five. Get them right first.

Questions about image SEO for your specific store? Email [email protected]. We’re happy to look at specific issues even if you’re not using our app.

A1 Image Gallery is built by A1 Local, an independent Shopify development studio based in Perth, Australia.