Home » Make It Fast » Shopify Image Optimization

Shopify Image Optimization: The Fast, Repeatable Way to Improve Speed

Last Updated On February 18, 2026 @ 9:52 am

If your Shopify store feels slow, images are usually the first thing I check.

Not because images are “bad,” but because they are typically the biggest files your store ships on every key template. Home, collection, product.

That matters because images control what shoppers see first. When your hero or product media loads late, the page feels late, even if the rest of the store is fine.

My test setup (so you know what this is based on)

Store: Soccer Life (development store)
Theme: Flora
Plan: Basic Shopify
Apps: 0
Templates tested: home page, collections page, product page
Tools used: Google Lighthouse (mobile) + PageSpeed Insights as a second check

I use Lighthouse because it gives repeatable lab data and points to the exact problems, like oversized images and render blocking resources.

Baseline results (Soccer Life)

These are the three templates I test because they represent how shoppers actually move through a store.

Home page baseline

Performance: 72
Accessibility: 87
Best Practices: 77
SEO: 77

Core metrics:

• FCP: 2.3s
• LCP: 6.6s
• TBT: 150ms
• CLS: 0
• Speed Index: 2.8s

What Lighthouse flagged:

• Improve image delivery (hero and homepage images)
• Render blocking resources

This is a common Shopify pattern. Your hero image becomes the LCP element, so if it is heavier than it needs to be, your whole homepage “feels” slow.

Collection Baseline

Performance: 76
Accessibility: 96
Best Practices: 77
SEO: 92

Core metrics:

• FCP: 2.6s
• LCP: 4.7s
• TBT: 110ms
• CLS: 0
• Speed Index: 4.5s

What Lighthouse flagged:

• Render blocking resources
• LCP image sizing and discovery
• Collection images served larger than needed for grid display

Collection pages are where image sizing problems show up fast, because you load multiple images at once.

Product page baseline (Elite Match Soccer Socks)

URL tested: https://soccerlifenow.myshopify.com/products/elite-match-soccer-socks

Performance: 86
Accessibility: 87
Best Practices: 77
SEO: 100

Core metrics:

• FCP: 2.4s
• LCP: 3.1s
• TBT: 220ms
• CLS: 0.015
• Speed Index: 3.8s

What Lighthouse flagged:

• Improve image delivery on the main product image
• Product image served larger than needed for its displayed size
• Render blocking resources
• Small CLS shift tied to layout movement near the buy area

This product template is already solid, but Lighthouse still shows small “leaks” you can tighten without changing the design.

What these results are really telling me

My homepage is the slowest template because the hero image is acting like the main load event (LCP), and it is taking too long to appear.

My collection page is decent, but it leaks speed through grid image sizing plus render blocking CSS.

My product page is the strongest template, but still has:

• image weight waste
• a small layout shift that can be stabilized

So the “why” is clear.

Image optimization is not just about score chasing. It is about speeding up the moment the page becomes visually trustworthy.

My Shopify image optimization workflow (the one I actually follow)

Step 1: Identify your “LCP image” on each template

Most of the time it is:

• homepage hero image
• first visible collection tile image
• main product image

If those are optimized, the store usually feels faster right away.

Step 2: Resize before you upload

Shopify serves responsive versions, but starting with a sensible original file helps you avoid bloat from the beginning.

My practical targets:

• Homepage hero: 1600 to 2000px wide, compressed
• Collection thumbnails: 600 to 1000px square
• Product images: 1200 to 1600px square for clean zoom without heavy weight

Step 3: Compress every image first

If Lighthouse says “Improve image delivery,” file weight is usually the issue.

Compression is the fastest win because it improves speed without changing layout.

Testing note: Don't over obsess about this its good to have a clean set up as you build your images or make them.  For this test I didn't use an app but you can also use a Shopify app such as Crush to do it for you.

Step 4: Keep aspect ratios consistent

Consistency prevents:

• layout shifting
• weird cropping
• uneven grids

If your collection is square, keep products square too unless your brand requires otherwise.

Step 5: Confirm grid images are not served too large

Your collection audit showed images served larger than their displayed size.

That can happen when:

• the theme is pulling a larger variant than necessary
• the section settings are set too large
• the image block is not outputting ideal sizes

Step 6: Retest the same 3 templates

Retesting matters because a homepage fix might not improve collections, and collection fixes might not touch product pages.

What I would prioritize on Soccer Life (based on Lighthouse flags)

Homepage first (because LCP is 6.6s)

Start with the hero image:

• compress it
• make sure it is not oversized
• avoid stacking heavy image sections above the fold

Collection page next (because grids multiply image weight)

• reupload collection images closer to displayed dimensions
• keep thumbnails consistent
• reduce unnecessary above-fold images if the grid is dense

Product page last (because it is already strong)

• compress the main product image
• stabilize any small CLS shift by keeping key containers predictable
• retest to confirm CLS stays low

Image SEO quick wins that pair with speed

Even when speed is the main goal, image SEO is a bonus:

• use descriptive alt text for real images
• avoid vague link text like “Learn more” when possible
• name files clearly before uploading

This helps semantic clarity for search engines and improves accessibility.

My rule so this does not turn into perfection chasing

If product pages are already in the 80s, do not overthink them.

Fix the template that controls first impressions.

For Soccer Life, that is the homepage hero image and the collection grid images.

Then rerun Lighthouse and PageSpeed Insights with the same settings.

If you want, I can also write a short “Testing Note” box you can drop right under the baseline section, using this exact store and these exact numbers.

FAQ 

How do I know which image is hurting my Shopify speed the most?

Run Lighthouse on mobile and look for the Largest Contentful Paint element. On most Shopify stores it is either the homepage hero image, the first collection grid image, or the main product image.

What image size should I use for Shopify product images?

A practical range is 1200 to 1600px wide for product images. That keeps them sharp on modern screens while avoiding oversized uploads that create unnecessary weight.

Should I upload WebP to Shopify?

If you can, yes. WebP is usually smaller than JPG or PNG at similar quality. If you do not upload WebP, Shopify can still serve optimized formats in many cases, but starting with a lighter file gives you more control.

Why does Lighthouse say my images are “larger than needed”?

That usually means the theme is requesting a bigger image variant than the layout displays, especially on collection grids. It is common when images are uploaded very large and the section renders them in a small tile.

Do alt tags help with Shopify image optimization?

Alt text does not directly speed up your store, but it supports image SEO and accessibility. The win is better semantic clarity for search engines and a better experience for screen readers.

Should I optimize images before uploading or rely on Shopify to handle it?

Optimize before uploading. Shopify helps, but it cannot undo a massively oversized source file. Smaller, properly sized uploads usually produce better results across home, collection, and product templates.

What should I optimize first, homepage, collections, or product pages?

Start with the template that controls the first impression. For most stores it is the homepage hero and collection grid images. Product pages often score better but still benefit from compression and consistent sizing.

Can I trust Lighthouse numbers if my store is password protected?

They are still useful for baseline comparisons, as long as you keep your setup consistent. Use the same device profile, same throttling, same templates, and run multiple passes if you want tighter averages.