Images account for roughly 50% of the average webpage’s total weight. On most business websites we audit, that number is higher — 60–70% of the page payload is images that could be half the size with no visible quality loss. Fixing that is not complicated, but it requires knowing which problem you are actually solving.
The Four Levers of Image Optimization
Image performance comes down to four decisions: format, compression, dimensions, and delivery. Get all four right and images stop being a problem. Get one wrong and the others do not fully compensate.
Format determines how image data is encoded. JPEG handles photographs well. PNG handles graphics with transparency. WebP handles both — typically 25–35% smaller than JPEG at equivalent quality, and 26% smaller than PNG. AVIF is the next generation after WebP — 50% smaller than JPEG in many cases — but browser support is still patchy enough that WebP is the safe modern default.
Compression determines how aggressively the encoder removes data. Lossy compression (JPEG, WebP) discards some image data permanently. Lossless compression (PNG, WebP lossless) preserves all data but achieves less size reduction. For most web photography, a quality setting of 75–85 in WebP is visually indistinguishable from the original at 30–40% of the file size.
Dimensions means the actual pixel width and height. Uploading a 4000px wide photograph and displaying it at 800px wide means the browser downloads 25x more pixels than it renders. Resize images to the largest size they will actually display on screen before uploading. On mobile — where most of your visitors are — that is often 375–428px wide.
Delivery means how and from where the image is served. A CDN serves images from edge locations close to the visitor. Next-gen delivery formats are negotiated automatically. Lazy loading defers images until they are needed. These three delivery mechanisms each reduce the performance impact of images independently.
WebP: The Format You Should Be Using
WebP was developed by Google and released in 2010. By 2022, all modern browsers support it — Chrome, Firefox, Safari, Edge. There is no reason to serve JPEG or PNG to modern browsers when WebP is available.
The practical implementation uses the HTML <picture> element to serve WebP with JPEG fallback:
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description">
</picture>Modern browsers read the <source> element first and load the WebP version. Older browsers that do not understand WebP fall through to the <img> element and load the JPEG. Zero compatibility risk.
WordPress 5.8 added native WebP support. You can upload WebP files directly, and the media library handles them as first-class images. Some hosting environments still have restrictions — Imagick or GD Library needs to support WebP for conversion to work. On well-configured servers, this is automatic.
Responsive Images: Serving the Right Size to Every Device
The srcset attribute lets you provide multiple image sizes and let the browser choose the most appropriate one based on the display size and resolution.
A full responsive image declaration looks like this:
<img
src="product-800.jpg"
srcset="product-400.jpg 400w, product-800.jpg 800w, product-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Product description"
loading="lazy"
width="800"
height="600"
>The srcset lists available sizes. The sizes attribute tells the browser how wide the image will actually be displayed at different viewport widths. The browser picks the most appropriate source — a mobile visitor on a 375px screen gets the 400px image, not the 1200px one.
WordPress generates multiple image sizes automatically when you upload — thumbnail, medium, large, full. If your theme uses the_post_thumbnail() with proper size arguments, WordPress handles responsive images correctly. The problem is when themes hardcode image sizes or use <img> tags that bypass the responsive image system.
The Hidden Cost of Not Optimizing
A homepage hero image saved as a full-resolution PNG from Photoshop might weigh 4–8MB. The same image optimized to WebP at 80% quality, resized to 1440px wide, weighs 150–300KB. The visitor sees the same image. Their browser downloads 95% less data.
On a slow 4G connection (7 Mbps, which is average in many areas), downloading 4MB takes over 4 seconds. Downloading 200KB takes 0.2 seconds. That 3.8-second difference is often the difference between a visitor who sees your page and one who abandons before it loads.
Google’s Core Web Vitals penalize this directly. Largest Contentful Paint (LCP) is typically the hero image. A 4MB hero image on a slow connection routinely causes LCP scores above 6–8 seconds. Google’s threshold for “Good” LCP is 2.5 seconds. Optimizing that one image can move your LCP from “Poor” to “Good” in a single change.
WordPress Image Optimization: Built-in vs. Plugins
WordPress does some image optimization by default: it generates multiple sizes and compresses JPEG uploads to 82% quality. That default compression is conservative — most images can go lower without visible quality loss, and WordPress does not convert to WebP automatically unless your theme or a plugin adds that step.
Plugins like Imagify, ShortPixel, and Smush add WebP conversion, additional compression, and bulk processing of existing images. They work, but they add overhead to the media upload process and create dependency on a third-party service.
On a hand-coded WordPress site, image optimization is built into the theme — WebP conversion happens at upload, responsive srcset is generated correctly, and dimensions are controlled precisely. There is no plugin making decisions on your behalf.
Lazy Loading and Image Delivery Together
Image optimization and lazy loading are two parts of the same problem. Optimization reduces what each image weighs. Lazy loading controls when each image is fetched. Together, they reduce both the total page payload and the upfront payload on initial load.
A page with 20 optimized images still benefits from lazy loading. A page with lazy loading but 4MB images is still slow. You need both — and they need to be implemented correctly relative to each other. The hero image is always the exception: optimize it aggressively, and never lazy load it.
LCP Images: The One That Matters Most
The Largest Contentful Paint image — usually the hero image or the first large image in the content — gets special treatment. For this image specifically:
- Do not lazy load it
- Preload it with
<link rel="preload" as="image"> - Serve it in WebP with JPEG fallback
- Include explicit
widthandheightattributes to prevent layout shift
Preloading the LCP image can knock 300–800ms off your LCP score on its own. This is the single highest-value image optimization for Core Web Vitals specifically.
How to Audit Your Current Images
Start with Google PageSpeed Insights. The diagnostics section shows:
- “Serve images in next-gen formats” — lists non-WebP images and estimated savings
- “Properly size images” — identifies oversized images and potential byte savings
- “Defer offscreen images” — flags images that should be lazy loaded
honest.designodin.com runs this audit and shows you the specific images causing the most damage, ranked by impact.
GTmetrix’s Waterfall view shows every image request, its file size, and how long it took to load — useful for identifying which images are the worst offenders.
FAQ
Should I convert all my existing images to WebP? Yes, if you can do it efficiently. Bulk conversion tools — or WordPress plugins like Imagify — can process your entire media library. For a site with hundreds of images, this is often the single-action improvement with the largest performance impact.
Does image compression affect print quality? Web-compressed images are optimized for screen display. If you also use images for print — marketing materials, brochures — keep the originals separate. Never use a web-compressed image for print.
How do I handle SVGs? Do they need optimization? SVGs are vector files and typically much smaller than raster images. But they still benefit from optimization: removing editor metadata, comments, and redundant path data. Tools like SVGO reduce SVG file sizes by 20–60% with no visual difference.
Does image optimization help mobile performance specifically?
Yes, and dramatically so. Mobile devices on 4G or LTE connections feel the difference most. Responsive images (srcset) also ensure mobile devices are not downloading desktop-sized images — a 1440px wide image served to a 375px phone is waste you can eliminate entirely.
Will optimizing images help my Google ranking? Image optimization improves Core Web Vitals scores — specifically LCP and CLS. Both are direct ranking signals in Google’s Page Experience algorithm. Better scores mean better rankings, though the magnitude depends on your competitive landscape.
What is the right quality setting for WebP? 75–85% quality for photographs and complex images. 90%+ for graphics, logos, and images with text where compression artifacts are more visible. At 80% WebP quality, most visitors cannot distinguish the compressed version from the original.
If your site’s images are not optimized, honest.designodin.com will show you exactly how much weight you are carrying unnecessarily. If you are planning a new build, our custom WordPress development delivers a PageSpeed score of 90+ from day one — image optimization is part of the standard build, not an afterthought. See our fixed-price packages to get started.