Optimising Shopify Images for Better Search Results and UX

Optimising images on Shopify is one of the fastest ways to improve page speed, boost search visibility, and increase conversion rates. Because images typically make up the largest portion of page weight on ecommerce websites, even small improvements can produce noticeable performance gains.

In this guide, you’ll learn how to optimise Shopify images for both SEO and user experience, how Shopify’s older Online Store 1.0 themes differ from newer Online Store 2.0 themes, and what practical steps you can take to improve loading speed and visual quality across your store.

Why Image Optimisation Matters for Shopify Stores

Image optimisation affects three critical areas of ecommerce success: search performance, site speed, and customer experience.

From an SEO perspective, Google indexes Shopify images and evaluates signals such as file names, alt text, and page performance. Well-optimised images improve visibility in Google Image Search and contribute to stronger overall rankings.

Performance is just as important. Large or poorly compressed images slow down page loading and negatively impact Core Web Vitals, particularly Largest Contentful Paint (LCP). Because LCP is often triggered by a hero image or featured product image, optimising these assets directly improves how fast users perceive your site to be.

User experience ties everything together. Shoppers expect fast-loading pages with stable layouts and crisp visuals. When images load slowly or cause layout shifts, frustration increases and conversions suffer. Optimised images help create smoother browsing and more confident purchasing decisions.

How Shopify Handles Images by Default

Shopify automatically delivers images through a global CDN, helping reduce latency and serve files closer to your visitors. It also dynamically generates multiple image sizes and serves modern formats such as WebP where supported.

While this built-in infrastructure provides a strong foundation, it does not replace the need for manual optimisation. Uploading oversized files, ignoring alt text, or relying on poorly configured themes can still result in slow performance and missed SEO opportunities.

Choosing the Right Image Format

Selecting the correct image format is the first step toward efficient delivery.

WebP has become the preferred modern format because it offers significantly smaller file sizes while maintaining high visual quality. Shopify automatically serves WebP when browsers support it, which improves loading performance without requiring additional configuration.

JPEG remains a reliable option for detailed product photography and lifestyle imagery. PNG should be reserved for cases where transparency is required or when working with graphic elements, as PNG files tend to be larger and slower to load.

Resizing and Compressing Images Before Upload

One of the most common performance issues on Shopify stores comes from uploading images that are far larger than necessary. High-resolution camera files can exceed several megabytes in size, even when displayed at much smaller dimensions on the site.

Before uploading images, resize them to match their intended display size. Shopify supports images up to 2048 pixels wide, but many product grids, thumbnails, and content images do not require that resolution.

Compression is equally important. Using tools such as TinyPNG or Squoosh allows you to reduce file size without noticeable quality loss. Smaller images download faster, improve mobile performance, and reduce bandwidth usage.

Optimising File Names and Alt Text for SEO

Search engines rely on textual context to understand image content. File names such as “black-leather-wallet.jpg” provide far more value than generic camera file names.

Alt text plays a dual role. It improves accessibility for users relying on screen readers and helps search engines interpret the image. Effective alt text should describe the image naturally while incorporating relevant keywords where appropriate.

When applied consistently across product images and content pages, descriptive file names and alt text strengthen on-page SEO and increase image search visibility.

Lazy Loading and Image Loading Priority

Lazy loading delays the loading of off-screen images until users scroll down the page. This reduces initial page weight and improves perceived performance, especially on mobile devices.

However, not all images should be lazy loaded. Above-the-fold visuals such as hero banners and featured product images should load immediately. These images often determine your LCP score, so prioritising their delivery is crucial.

Understanding Shopify Online Store 1.0 vs Online Store 2.0

The version of Shopify theme your store uses can significantly influence how effectively images are delivered.

Older Online Store 1.0 themes often rely on less efficient methods for serving images. They may load larger image files than necessary, provide limited control over responsive image sizing, and sometimes lack native support for modern performance features. While these themes can still be optimised, they frequently require custom development to achieve the same level of performance as newer themes.

Online Store 2.0 introduced a much more flexible architecture. Modern themes are better equipped to generate responsive images using Shopify’s image URL filters, allowing browsers to download the most appropriate image size for each device. Many OS 2.0 themes also include improved lazy loading, more efficient section rendering, and greater compatibility with modern performance techniques.

If your store still uses an older theme, upgrading to an Online Store 2.0-compatible theme can provide substantial speed improvements alongside better customisation options and easier ongoing maintenance.

Responsive Images for Different Devices

Today’s shoppers browse on everything from large desktop monitors to smartphones. Serving the same large image to every visitor wastes bandwidth and slows mobile users.

Responsive images allow browsers to select the most appropriate image size for each screen resolution. Modern Shopify themes achieve this using responsive image attributes that automatically request different image sizes from Shopify’s CDN.

This approach reduces unnecessary downloads while maintaining image quality, improving both loading speed and Core Web Vitals.

Avoiding Layout Shift

One of the most frustrating experiences for users is when page content suddenly jumps while images are loading.

This contributes to Google’s Cumulative Layout Shift (CLS) metric and can negatively affect both user experience and search performance.

Modern Shopify themes minimise this by reserving the correct amount of space for images before they load. Ensuring that images include their dimensions or aspect ratio prevents unexpected movement and creates a more stable browsing experience.

Optimising Product Images

Product images deserve particular attention because they directly influence purchasing decisions.

Aim for consistent dimensions across your catalogue so that collection pages display neatly without irregular layouts. Multiple product angles, close-up detail shots and lifestyle images help customers understand products more fully while maintaining visual consistency.

Avoid excessive zoom levels or unnecessarily large source files. High-quality images are important, but they should always be balanced against page performance.

Don’t Forget Collection and Blog Images

Image optimisation shouldn’t stop at product pages.

Collection banners, homepage hero images, promotional graphics and blog illustrations often contain some of the largest assets on a Shopify website. These pages frequently attract visitors through organic search, making their loading speed especially important.

Applying the same optimisation principles throughout your store ensures that every landing page benefits from faster loading and stronger SEO performance.

Measuring Image Performance

Optimisation should always be supported by measurement.

Useful tools include:

• Google PageSpeed Insights to identify large images, render-blocking resources and Core Web Vitals opportunities.
• Google Lighthouse for detailed performance and accessibility recommendations.
• Google Search Console to monitor Core Web Vitals and image indexing.
• Browser developer tools to inspect downloaded image sizes and loading behaviour.

Regular testing allows you to identify new opportunities as products, themes and content evolve.

Common Shopify Image Optimisation Mistakes

Many Shopify stores suffer from avoidable image-related issues, including:

• Uploading original camera images several megabytes in size.
• Using PNG files where JPEG or WebP would be more appropriate.
• Leaving generic filenames such as IMG_4582.jpg.
• Omitting alt text or using identical alt text across multiple products.
• Lazy loading hero images that should be prioritised.
• Displaying large desktop images on mobile devices.
• Failing to review image performance after installing a new theme or app.

Avoiding these mistakes can often deliver immediate improvements without requiring significant redevelopment.

Advanced Shopify Image Optimisation Techniques

Once you’ve implemented the fundamentals, there are several advanced techniques that can further improve Shopify performance and strengthen your Core Web Vitals. While these require a little more technical knowledge, they can make a significant difference on larger ecommerce stores or highly competitive websites.

Prioritise Your Largest Contentful Paint (LCP) Image

For most Shopify stores, the Largest Contentful Paint (LCP) element is either the homepage hero banner or the featured image on a product page. Because Google uses LCP as one of its Core Web Vitals metrics, ensuring this image loads as quickly as possible should be a priority.

Rather than lazy loading your primary image, it should load immediately and be given a high loading priority. Modern Shopify themes can use browser priority hints (such as fetchpriority="high") to tell the browser that this image is critical. This often produces measurable improvements in LCP scores and helps pages feel significantly faster to users.

Generate Truly Responsive Images

Although Shopify can automatically generate multiple image sizes, not every theme makes full use of this capability.

Older or poorly developed themes may still deliver desktop-sized images to mobile devices, forcing visitors to download files that are much larger than necessary. Modern Online Store 2.0 themes should use responsive image techniques that allow browsers to request the most appropriate image size for each screen resolution.

For stores with thousands of products, ensuring every template uses responsive images can substantially reduce overall bandwidth and improve mobile performance.

Consider AVIF Where Appropriate

Most Shopify stores now benefit from automatic WebP delivery, which offers excellent compression compared to traditional JPEGs.

However, the newer AVIF image format can often reduce file sizes even further while maintaining exceptional image quality. Although Shopify’s native image pipeline continues to evolve, developers should monitor support for AVIF delivery as browser compatibility improves. For image-heavy stores, future support for AVIF has the potential to provide additional performance gains.

Preload Critical Images

If your homepage contains a large hero image or promotional banner that forms part of the initial page view, preloading that image can reduce loading delays.

Rather than waiting until the browser discovers the image during page rendering, preloading tells the browser to begin downloading it immediately. Used carefully, this can improve Largest Contentful Paint and provide a noticeably faster first impression.

Preloading should be reserved for genuinely critical images, as overusing it can have the opposite effect by competing for network resources.

Audit Third-Party Apps

One of the most overlooked causes of poor Shopify performance isn’t the theme itself—it’s installed apps.

Many Shopify apps inject additional JavaScript, CSS and images into every page, even when their functionality is only required on specific templates. Product badges, review widgets, trust icons, pop-ups and promotional banners frequently introduce extra image requests that increase page weight.

Regularly reviewing installed apps and removing those that are no longer required can improve performance just as much as optimising product images.

Optimise Collection Pages at Scale

Large Shopify stores often contain hundreds or thousands of collection pages.

These pages typically display dozens of product thumbnails simultaneously, making image optimisation especially important. Consistent thumbnail sizing, responsive images and efficient lazy loading all help collection pages load quickly while maintaining visual quality.

For stores with extensive catalogues, even small reductions in thumbnail file sizes can save gigabytes of bandwidth over time.

Use Content Delivery and Browser Caching Effectively

Shopify already serves images through its global Content Delivery Network (CDN), but theme developers should avoid techniques that bypass these optimisations.

Images should always be served through Shopify’s image URLs rather than uploaded to third-party locations wherever possible. This allows Shopify to handle caching, responsive sizing and modern image formats automatically, ensuring visitors receive the fastest version available.

Measure Improvements Using Core Web Vitals

Image optimisation should never rely on guesswork.

Before making changes, establish a baseline using Google PageSpeed Insights and Lighthouse. After optimisation, compare improvements in key performance metrics including:

• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• First Contentful Paint (FCP)
• Total Blocking Time (TBT)
• Overall Performance Score

Monitoring these metrics allows you to quantify improvements and identify any regressions following theme updates, app installations or design changes.

Remember: Image Optimisation Is an Ongoing Process

Many businesses optimise images when they first launch their Shopify store but gradually undo that work as new products are added.

Creating a documented image optimisation process for everyone who uploads products helps maintain performance over time. Simple steps such as resizing images before upload, following consistent naming conventions and checking compression can prevent performance from slowly deteriorating as the catalogue grows.

Like technical SEO, image optimisation should be viewed as an ongoing maintenance task rather than a one-off project.

How Shopify’s Image URL System Actually Works

One of Shopify’s biggest performance advantages is its intelligent image delivery system, but many stores never take full advantage of it.

When an image is uploaded, Shopify stores the original file and can dynamically generate multiple versions at different dimensions. Rather than creating dozens of separate image files manually, developers can request exactly the size they need using Shopify’s image_url filter.

For example, a product image displayed in a collection grid may only require a width of 400 pixels, whereas the same image on the product page might be displayed at 1200 pixels. Shopify generates each version automatically and serves it through its global CDN.

The result is that visitors download only the image size appropriate for the page rather than the original high-resolution file.

Unfortunately, many custom themes still request unnecessarily large images, particularly on mobile devices, resulting in slower loading times and wasted bandwidth.

When auditing Shopify stores, we frequently find that image optimisation isn’t limited by the uploaded images themselves—it’s the way the theme requests and displays them.

Responsive Images: Where Many Shopify Themes Fall Short

Responsive images are designed to ensure every visitor downloads an appropriately sized image for their device.

Modern browsers support srcset and sizes attributes, allowing multiple image widths to be provided. The browser then intelligently selects the most suitable version based on screen size and pixel density.

Many older Shopify themes either don’t use these attributes correctly or include only a limited range of image sizes. The consequence is that smartphones may still download desktop-sized images that are two or three times larger than necessary.

This doesn’t just affect loading speed. It also increases mobile data usage, slows rendering and can reduce Core Web Vitals scores.

When reviewing Shopify themes, one of the first things we examine is whether responsive images have been implemented correctly across product pages, collections, blogs and homepage sections.

Why Image Optimisation Affects Structured Data

Most businesses think of images and structured data as two separate SEO tasks.

In reality, they’re closely connected.

Product schema, Article schema and Organisation schema all reference images that Google uses throughout Search, Google Images, AI Overviews and Merchant listings.

Large, high-quality images with appropriate dimensions increase the likelihood that Google can display rich results effectively.

At the same time, poorly optimised images can slow the page that contains the structured data, reducing the overall quality signals associated with that content.

The most effective Shopify SEO strategies optimise both the image itself and the structured data that references it.

Image Optimisation for AI Search

Search is changing rapidly.

Google AI Overviews, ChatGPT, Perplexity and other AI-powered search platforms increasingly rely on well-structured, authoritative web pages when generating answers.

While AI models don’t interpret images in exactly the same way humans do, they do rely on the surrounding context, including filenames, alt text, captions, nearby headings and structured data.

Images that are properly described and integrated into comprehensive product or informational content help reinforce topical relevance and provide additional context for both traditional search engines and AI-powered search experiences.

As AI search evolves, image optimisation is becoming part of a broader content visibility strategy rather than simply a page speed exercise.

Shopify Apps Can Undo Your Optimisation Work

One of the biggest performance issues we encounter isn’t caused by Shopify itself.

It’s caused by apps.

Review widgets, product labels, trust badges, wish lists, live chat systems, pop-ups and marketing tools frequently inject additional JavaScript, CSS and image assets onto every page.

In many cases these assets are loaded regardless of whether the feature is actually being used on that page.

We’ve audited Shopify stores where third-party apps contributed more downloaded resources than the theme itself.

A regular performance audit should therefore examine not only image sizes, but also which apps are introducing additional image requests, external resources and rendering delays.

Removing one unnecessary app can sometimes produce greater performance improvements than compressing hundreds of product images.

Optimising Images for Shopify Markets

Businesses selling internationally face additional considerations.

Shopify Markets allows stores to serve multiple countries and languages from a single platform, but image strategy should also be reviewed.

Promotional banners, seasonal campaigns and lifestyle imagery often vary between regions. Care should be taken to ensure region-specific content doesn’t unnecessarily increase page weight or create duplicate assets.

International stores should also verify that translated alt text, metadata and structured data remain consistent across each language version, helping search engines understand the relationship between regional content.

Monitoring Image Performance Over Time

Image optimisation isn’t something you complete once.

Every new product launch, seasonal campaign, homepage redesign and marketing initiative introduces additional image assets.

Without ongoing monitoring, even well-optimised stores gradually become slower.

We recommend reviewing image performance as part of regular technical SEO maintenance by monitoring:

• Largest Contentful Paint (LCP)
• Total image payload per page
• Core Web Vitals in Google Search Console
• PageSpeed Insights recommendations
• Lighthouse performance reports
• Mobile versus desktop image delivery
• Newly installed Shopify apps

Treating image optimisation as an ongoing process rather than a one-off task helps maintain strong search performance as your Shopify store grows.

Our Shopify Image Optimisation Process

Every Shopify store is different. A fashion retailer with thousands of products has very different optimisation requirements from a niche manufacturer with a few hundred product pages. That’s why we don’t apply generic recommendations or rely solely on automated optimisation apps.

Instead, we take a structured, data-led approach that identifies the improvements most likely to increase both search visibility and sales.

1. Technical Image Audit

We begin by analysing how images are currently being delivered throughout your Shopify store. This includes identifying oversized files, inefficient image formats, inconsistent dimensions, duplicate assets and opportunities to improve loading behaviour.

At the same time, we benchmark your Core Web Vitals and page speed performance so improvements can be measured objectively.

2. Theme Performance Review

Not all Shopify themes are created equally.

We assess whether your theme is making full use of Shopify’s image delivery capabilities, including responsive image sizing, lazy loading, modern image formats and efficient rendering. Where appropriate, we recommend improvements or identify opportunities available through Online Store 2.0.

3. Image Optimisation Strategy

Rather than simply compressing every image, we develop an image strategy based on how each asset is used.

Hero banners, product photography, collection thumbnails, blog images and promotional graphics all have different performance requirements. We optimise each type appropriately to balance visual quality with loading speed.

4. Core Web Vitals Optimisation

Because images frequently determine Largest Contentful Paint, we pay particular attention to above-the-fold content.

Where appropriate, we prioritise critical images, optimise loading behaviour and remove unnecessary bottlenecks that can affect Google’s Core Web Vitals and overall user experience.

5. Technical SEO Improvements

Image optimisation doesn’t exist in isolation.

We also review image filenames, alt text, structured data, internal linking, page templates and other technical SEO factors that contribute to stronger organic visibility. The result is an optimisation strategy that benefits both users and search engines.

6. Performance Monitoring

Launching improvements is only the beginning.

We monitor the impact using tools such as Google Search Console, Google PageSpeed Insights and Lighthouse to verify that changes are delivering measurable improvements in page speed, Core Web Vitals and organic performance.

7. Ongoing Optimisation

As your catalogue grows, new products, collections and marketing campaigns introduce new images every week.

We help clients establish straightforward processes so future uploads follow best practice from day one, preventing performance from gradually declining over time.

What We Look For During a Shopify Performance Audit

No two Shopify stores are identical, so we don’t rely on automated reports or generic checklists. Every technical audit begins by understanding how the website has been built, how customers use it, and which factors are most likely to influence search visibility and conversions.

Below are some of the key areas we investigate when carrying out a Shopify performance audit.

Is the Largest Contentful Paint (LCP) Image Being Prioritised?

The Largest Contentful Paint image is often the first thing visitors notice—and one of the most important signals Google measures through Core Web Vitals.

We identify which element is responsible for the LCP score and check whether it is being loaded efficiently. Common issues include hero banners that are excessively large, images being lazy loaded when they should be prioritised, or critical resources being delayed by unnecessary JavaScript.

Small changes to how the LCP image is delivered can often have a significant impact on both PageSpeed scores and perceived loading speed.

Are Responsive Images Being Generated Correctly?

One of the first technical checks we perform is whether Shopify is serving appropriately sized images to different devices.

It is surprisingly common to find mobile visitors downloading desktop-sized images, sometimes several times larger than required. We review how the theme generates responsive images and whether browsers are receiving the most suitable version for each screen size and resolution.

Reducing unnecessary image downloads often provides immediate improvements in mobile performance.

Are Images Being Requested at the Correct Dimensions?

Uploading a well-optimised image is only part of the process.

We also examine how the theme requests images from Shopify’s CDN. In many stores, templates request much larger image sizes than are actually displayed on screen, increasing download times without improving image quality.

This is particularly common on collection pages, homepage sections and featured product carousels.

Is Lazy Loading Configured Correctly?

Lazy loading is an excellent optimisation technique when applied appropriately, but it is frequently implemented too aggressively.

We check that below-the-fold images are deferred while ensuring critical above-the-fold images load immediately. Incorrect lazy loading can delay important visual content and negatively affect Largest Contentful Paint.

Getting this balance right improves both user experience and Core Web Vitals.

Are Third-Party Apps Affecting Performance?

Many Shopify stores gradually accumulate apps over time.

Some inject JavaScript, CSS and image assets across every page, even if their functionality is only needed in specific situations. Others continue loading resources despite no longer being actively used.

As part of our audit, we review the performance impact of installed apps and identify opportunities to reduce unnecessary requests without compromising functionality.

Are Collection Pages Downloading More Images Than Necessary?

Collection pages often contain dozens of product thumbnails, making them one of the most image-intensive parts of an ecommerce website.

We review thumbnail sizes, responsive image behaviour, pagination, lazy loading and the number of images downloaded during the initial page load.

Even relatively small improvements can significantly reduce page weight across large product catalogues.

Are Background Images Preventing Optimisation?

Many Shopify themes use CSS background images for hero banners and promotional sections.

Although visually effective, background images cannot always benefit from the same responsive image techniques available to standard HTML image elements. They may also be more difficult for browsers to prioritise and can sometimes delay rendering.

Where appropriate, we recommend alternative implementation methods that improve both performance and accessibility.

Is Structured Data Using High-Quality Images?

Google’s Product, Organisation and Article structured data frequently reference images.

We verify that these images are large enough to support rich results while remaining efficiently optimised. This helps maximise eligibility for enhanced search features, Google Images and Merchant listings without introducing unnecessary performance overhead.

Are Images Helping Rather Than Hindering SEO?

Image optimisation is about far more than file size.

We review filenames, alt text, captions, contextual relevance and how images support the surrounding content. This improves accessibility, strengthens topical relevance and increases the likelihood of images appearing in Google Image Search.

As AI-powered search becomes more prevalent, these contextual signals are becoming increasingly valuable.

Are New Images Following Best Practice?

Many websites perform well immediately after launch but gradually become slower as new products and content are added.

We look beyond the current state of the website and assess whether there is a repeatable process for creating, resizing, naming and uploading future images. Establishing clear workflows helps ensure that performance improvements are maintained long after the initial optimisation project has been completed.

Bringing It All Together

Effective Shopify image optimisation isn’t simply about making files smaller. It’s about understanding how images interact with your theme, Shopify’s CDN, Core Web Vitals, structured data, mobile performance and the overall customer journey.

Our audits combine technical SEO expertise with practical ecommerce experience to identify the improvements that will have the greatest commercial impact. Rather than producing a long list of recommendations, we prioritise the changes most likely to improve search visibility, page speed and conversions, providing a clear roadmap for ongoing optimisation.

Whether you’re managing a growing Shopify store or planning a complete redesign, taking a strategic approach to image optimisation can deliver measurable improvements in both user experience and business performance.

Why Work With Ditto Digital?

Many agencies treat image optimisation as a simple compression exercise. In reality, it sits at the intersection of technical SEO, website performance, user experience and ecommerce conversion optimisation.

At Ditto Digital, we take a broader view. We combine technical SEO expertise with practical Shopify experience to ensure images contribute positively to page speed, search visibility and ultimately revenue. Every recommendation is based on measurable performance data rather than generic checklists, allowing us to prioritise the improvements that will have the greatest commercial impact.

If your Shopify store isn’t performing as well as it should, we’d be happy to carry out a technical review and identify practical opportunities to improve page speed, Core Web Vitals and organic search performance.

---

Further Reading:

• Technical SEO Services
• Core Web Vitals Optimisation
• Structured Data (Schema Markup) Guide
• AI Content Visibility Framework