Support
Support

Optimise images for ecommerce: a guide for WordPress agencies

TL;DR:

  • Optimizing product images by resizing before compression and converting to WebP significantly reduces LCP and file sizes.
  • Implementing explicit image dimensions and priority attributes improves page stability and load performance, boosting conversions.

The fastest fix for most slow product pages is a single repeatable pipeline: capture one high-resolution master per SKU, resize to display width, convert to WebP (keep JPEG exports for marketplace feeds), generate responsive variants with correct srcset and sizes, set explicit width and height attributes, mark the hero image with fetchpriority="high" and loading="eager", then lazy-load every gallery image below the fold. That sequence alone removes the main causes of image-related LCP and conversion loss on WordPress stores.

Five tickets to raise this week:

If you want to see how much revenue this kind of optimisation work could unlock across your client base, the Wpcto WordPress Profit Calculator gives you a figure in under 90 seconds.

Table of Contents

Why slow product images cost your clients money

Images typically make up the majority of total e-commerce page weight, making them the single highest-leverage performance problem on any product page. The hero image is almost always the Largest Contentful Paint element, so its file size directly determines the LCP score Google uses as a ranking signal.

The before/after numbers make the case plainly. Resizing a hero image to display width and converting it to WebP reduced mobile LCP from 3.8 seconds to 1.5 seconds and dropped total page weight from 6.1 MB to 740 KB on a measured store, with the hero JPEG shrinking from 2.4 MB to a 140 KB WebP.

For agency clients, the consequences run in two directions. Slow LCP suppresses Google rankings and raises bounce rates. Layout shift from images without declared dimensions (CLS) damages the mobile experience and erodes trust. Both are fixable at the image pipeline level, before any other performance work is needed.

What shot types and asset strategy actually move conversion

The gap between stores that convert and those that leak revenue is rarely the number of images. It is quality for zoom and mobile behaviour: whether the hero is sharp at display width, whether a zoom source exists, whether lifestyle and scale shots are present.

Step-by-step infographic on ecommerce image optimisation

Specify five to eight images per product to cover the essential roles. Store one high-resolution master per SKU off the public site, then export a fixed set of variants from it.

Role Target width Target file size Notes
Catalogue thumbnail 400–600 px under 50 KB WebP; short srcset
Product card 600–800 px — WebP
Hero / main product 1,200–1,600 px hero under 200 KB WebP; fetchpriority high
Zoom / detail source 2,000–2,600 px — Load on zoom intent only

Shot types that materially affect conversion: plain hero on white, in-scale shot (product next to a familiar object), feature close-up, and at least one lifestyle image. For marketplaces, keep JPEG exports alongside WebP variants — Amazon and Google Merchant Centre still expect JPEG in many feed contexts.

File naming follows a simple template: product-title-view-colour.webp (e.g. merino-crew-front-navy.webp). Alt text mirrors it: “Navy merino crew-neck jumper, front view.” Both can be generated programmatically from a product data sheet, which matters when you are managing hundreds of SKUs.

Pro Tip: Always resize before compressing. A 4,000 px image exported at quality 60 is still a large file. Resize to the target display width first, then compress — never the other way around.

Which formats to use and how to compress them

WebP is the practical default for storefronts, typically delivering notably smaller files than JPEG at equivalent quality with broad browser support. AVIF can provide further size reductions compared to WebP while requiring more encode time. — but encodes 5–10x slower, which matters in high-volume batch pipelines.

Format decisions by channel:

Compression quality targets typically span ranges to balance quality and file size, aiming to keep hero and zoom images under certain file size thresholds.

Pro Tip: Skip AVIF in high-volume automated pipelines where encode time is a bottleneck. WebP at quality 82 captures most of the gain with a fraction of the processing overhead. Add AVIF as a second pass for your top-traffic pages only.

Flat lay of image compression tools and files

How to deliver responsive images correctly on WordPress

The five implementation steps that prevent the most common WordPress image failures:

Older WooCommerce themes are the most common source of failures here. Many serve the full uploaded image regardless of display context, and strip intrinsic dimensions from the markup. Check the theme’s woocommerce_get_image_size settings and confirm the media library is generating the correct intermediate sizes. For WooCommerce-specific fixes, regenerating thumbnails after correcting size settings is usually the first remediation step.

Plugin vs CDN: ShortPixel handles on-upload WebP and AVIF generation with a WordPress plugin and is a practical choice for agencies managing smaller catalogs. For higher-traffic stores or multi-region delivery, edge image CDNs — Cloudflare Images, Cloudinary, and ImageKit — handle format negotiation via the browser’s Accept header server-side, removing the need to manage <picture> elements manually and offloading encoding from your CMS host.

Pro Tip: Use a CDN or edge image service for format negotiation where you can. It reduces build complexity and means you serve AVIF to Chrome and WebP to Safari without touching a template.

Building an agency-ready image automation pipeline

A repeatable pipeline means new SKUs never regress to unoptimised defaults. The sequence:

  1. Receive high-resolution master from photographer or supplier (store in object storage, never the public web root)
  2. Automated resizing to each variant width (thumbnail, card, hero, zoom) with light sharpening applied post-resize
  3. Convert to WebP (and AVIF for hero and zoom variants on high-traffic pages)
  4. Generate filenames and alt text from product data
  5. Upload variants to object storage or CDN origin
  6. Reference variants in WordPress via srcset or through the CDN URL pattern

For WordPress media library integration, ShortPixel and ImageKit both support direct library optimisation. For external storage, reference variants via a custom srcset in the product template rather than relying on WordPress’s default attachment handling.

Schedule a weekly automated check on hero images for your top-selling products. The simple audit: run PageSpeed Insights on the product URL from a mobile device, confirm LCP is under 2.5 s, and flag any hero above 200 KB. Reject any image with baked-in promotional badges or text overlays — these cannot be updated without a full re-export and cause SEO problems when the promotion ends.

Pro Tip: Keep a parallel JPEG export pipeline for marketplace feeds. Automate it from the same master so the feed never goes out of sync with the site variants.

How to measure success and set acceptance criteria

Lab tools (Lighthouse, WebPageTest) give you a controlled baseline. Field data from PageSpeed Insights, measured on a real phone after publishing, is what actually counts — CDN behaviour, third-party scripts, and real network conditions all affect field results in ways lab tests cannot replicate.

Metric Pass threshold Fail condition
LCP (mobile, field) Under 2.5 s —
CLS — Any image without width/height
Hero file size Under 200 KB at display width Over 400 KB
Thumbnail file size Under 50 KB hero above 200 KB
srcset present Yes, with correct sizes Missing or sizes set incorrectly on desktop
Alt text Descriptive, product-specific Empty or “image”

Monitoring cadence: run a PageSpeed check on your top five product pages weekly. Monthly, audit the full top-seller catalogue for hero file sizes and format compliance. For broader site speed context, image optimisation sits alongside caching and hosting as the three highest-impact levers.

Ticket template and QA checklist for outsourcing image work

Use this as a paste-ready starting point for your project management tool.

Ticket fields:

  1. SKU list (attach spreadsheet with product name, colour, and variant data)
  2. Required variants: thumbnail (400–600 px), card (600–800 px), hero (1,200–1,600 px), zoom (2,000–2,600 px)
  3. Target formats: WebP for site; JPEG for marketplace exports
  4. Quality settings: hero 82, thumbnails 75
  5. Hero instructions: fetchpriority="high", loading="eager", explicit width and height
  6. Marketplace exports required: yes/no; specify channels (Amazon, Google Shopping)
  7. Rollback plan: retain originals in object storage; previous variants remain live until QA sign-off

QA checklist for the reviewer:

Request evidence from the contractor: a before/after PageSpeed Insights URL (mobile), a screenshot of the Lighthouse LCP element, and confirmation of file sizes for the hero and one thumbnail. Record the before LCP and CLS scores in the ticket before work begins so the improvement is documented.

Wpcto handles the work your agency shouldn’t be doing

Image optimisation is one of those tasks that looks simple, absorbs hours, and rarely gets charged correctly. Wpcto’s agency services cover performance optimisation, plugin and theme management, and ongoing WordPress maintenance — the full stack of technical work your team keeps absorbing without billing for it.

Wpcto

We work as a white-label partner, sitting invisibly behind your agency while you keep the client relationship and the recurring revenue. Performance fixes, security updates, and fractional WordPress CTO support are all available as part of a managed service your clients never need to know is outsourced.

Before you scope the next image optimisation project, run the Wpcto WordPress Profit Calculator to see exactly how much uncaptured revenue is sitting in your existing client base. It takes under 90 seconds and the number is usually larger than agencies expect.

Key takeaways

Resizing hero images to display width and converting to WebP is the single highest-impact image change available to most WordPress e-commerce stores, consistently cutting mobile LCP by more than a second.

Point Details
Resize before compressing Always resize to display width first; compression cannot compensate for oversized source files.
WebP as the default format WebP typically delivers notably smaller files than JPEG at equivalent quality with broad browser support.
Hero image priority Set fetchpriority="high" and loading="eager" on the hero only; lazy-load everything below the fold.
Acceptance criteria matter Pass threshold: mobile LCP under 2.5 s, hero under 200 KB, CLS minimal, alt text on every image.
Wpcto for ongoing delivery Wpcto handles performance optimisation and WordPress maintenance as a white-label partner for agencies.

Images are infrastructure, not decoration

The agencies that handle image work well are not the ones who run a big optimisation sprint once a year. They are the ones who treat images the way they treat plugin updates: scheduled, audited, and never left to drift.

The before/after numbers are real. A 2.4 MB JPEG hero becoming a 140 KB WebP, with LCP dropping from 3.8 seconds to 1.5 seconds and overall page weight falling from 6.1 MB to 740 KB, is not a marginal gain. It is the difference between a product page that ranks and converts and one that quietly bleeds both. What makes that result repeatable is the pipeline, not the one-off fix.

The honest problem for most agencies is that this work sits in a grey zone: too technical for the account team, too operational for the developers, and too easy to absorb without billing. Automation and monitoring solve the drift. A clear ticket template and acceptance criteria solve the hand-off. And a partner like Wpcto solves the question of who actually owns it week to week.

Standards, docs and tools worth bookmarking

Always test on a real device using field data, not just Lighthouse scores. Lab results do not capture CDN behaviour or real network conditions. For a complete picture of what image optimisation is worth across your client portfolio, the Wpcto WordPress Profit Calculator is the fastest way to put a number on it.

Secret Link