Image optimization means serving the smallest file at the right dimensions for each device. Switch from JPEG/PNG to AVIF or WebP to cut file size 30-70%, add responsive srcset so phones download smaller images than desktops, and lazy-load anything below the fold. This directly improves Largest Contentful Paint and your Core Web Vitals ranking signal.
Start with format. AVIF is the smallest, usually 20-50% lighter than WebP at the same quality, and WebP is 25-35% lighter than JPEG. Browser support is now broad: WebP works everywhere, and AVIF covers Chrome, Firefox, Safari 16+, and most 2023-onward devices. Serve AVIF first with WebP and JPEG fallbacks so no visitor gets a broken image.
The clean way to offer multiple formats is the HTML <picture> element with <source type="image/avif"> and <source type="image/webp"> before a plain <img> fallback. The browser picks the first format it supports. If you can't edit markup, a CDN like Cloudflare Images, Cloudinary, or imgix can auto-negotiate format per request using the Accept header, so you upload one file and it serves AVIF or WebP automatically.
Responsive images stop you shipping a 2000px hero to a 375px phone. Use srcset to list the same image at several widths (for example 400w, 800w, 1200w, 1600w) and a sizes attribute telling the browser how wide the image renders at each breakpoint. The browser then downloads the closest match. On a phone that can turn a 500KB image into a 40KB one, no visible quality loss.
Get the actual dimensions right. Never rely on CSS to shrink a huge file; the full weight still downloads. Export images at the maximum size they'll ever display, at 2x for retina, and no larger. A product thumbnail shown at 300px wide needs 600px of source, not 2400px. Oversized source files are the single most common waste we find in Shopify and WordPress image audits.
Lazy-load off-screen images with loading="lazy" on <img> so the browser defers them until the user scrolls near. But never lazy-load your LCP image, usually the hero or first product photo. Add fetchpriority="high" to that one image and leave it eagerly loaded. Lazy-loading the hero is a frequent mistake that makes LCP worse, not better.
Always set width and height attributes (or CSS aspect-ratio) on every image. Without them the page reflows as images load, spiking Cumulative Layout Shift, another Core Web Vitals metric. Reserving the space keeps layout stable. Also compress aggressively: quality 75-80 is visually indistinguishable from 100 for most photos and cuts weight further. Squoosh is a free tool for spot-checking a single image.
Bring it together with a workflow, not one-off edits. On Shopify, the platform serves WebP automatically and you can request sizes via the image_url filter with width parameters. On WordPress, plugins like ShortPixel or Imagify convert to WebP/AVIF and generate responsive sizes on upload. Then verify with Lighthouse or PageSpeed Insights: if it flags "properly size images" or "serve images in next-gen formats," you have measurable weight left to cut.
Measure the payoff in LCP. After converting formats and adding srcset, re-run PageSpeed Insights and watch the LCP figure and total image bytes drop. Aim for LCP under 2.5 seconds on mobile. That's the number Google actually uses for ranking, so it's the number to optimize toward, not a generic file-size target.
Frequently asked
Should I use AVIF or WebP?
Serve AVIF first for the smallest files, with WebP as a fallback via the <picture> element. WebP has universal browser support while AVIF saves an extra 20-50%, so offering both covers every visitor.
Does image optimization actually affect SEO rankings?
Yes. Image weight drives Largest Contentful Paint and Cumulative Layout Shift, two Core Web Vitals Google uses as ranking signals. Faster-loading images improve both scores and user experience.
What is srcset and why do I need it?
srcset lets you list one image at multiple widths so the browser downloads the size that fits the visitor's screen. A phone gets a small file instead of your full-resolution desktop image, cutting load time significantly.
Why shouldn't I lazy-load my hero image?
Lazy-loading defers an image until the user scrolls near it, which delays your Largest Contentful Paint element. Keep the hero eagerly loaded with fetchpriority="high" and only lazy-load images below the fold.
Free, concrete, yours to keep
Want this done for you — properly?
Tell us about your website and the problem you want to solve. We reply within 24 hours to discuss fit and next steps.