Your images are probably costing you visitors: here’s how to optimize them

When Vodafone’s Italian team ran an A/B test on one of their landing pages, they changed almost nothing visible. Same design, same copy, same product. The only difference was that version A loaded its hero image faster. The result: 8% more sales, 15% more leads, and 11% more users reaching the shopping cart.

They’re not an outlier. 

Renault analysed 10 million visits across 33 countries and found that a 1-second improvement in image loading correlated with a 14 percentage-point drop in bounce rate and 13% more conversions. Swappie cut image load time by 55% and saw mobile revenue jump 42%. 

The pattern is clear: image speed has a direct, measurable impact on revenue. Yet most sites still get it wrong. The 2025 Web Almanac found images account for over 1,058 KB of the median desktop page, and the performance chapter confirms they’re the Largest Contentful Paint (LCP) element on 85% of desktop pages. When your biggest image is slow, your Core Web Vitals suffer, your rankings dip, and visitors leave.

Modern formats, smarter loading, and a few lines of HTML can cut image weight by 50–70% without visible quality loss. Here’s how.

Modern image formats: what to use in 2026

The single biggest win for most sites is switching from JPEG and PNG to modern formats. The landscape has shifted significantly, and the hierarchy is now clear:

AVIF is the standout. Developed from the AV1 video codec, it’s now supported by Chrome, Firefox, Safari 16+, and Edge, covering 85%+ of global usage. For a typical 400 KB hero image, switching to AVIF cuts it to around 200 KB with no visible quality loss. WebP remains essential as a fallback with near-universal support, still delivering ~30% savings over JPEG. The practical approach: serve AVIF first, WebP as a fallback, and JPEG as a final safety net.

Serving the right format and size automatically

You don’t have to pick a single format. The HTML <picture> element lets the browser choose the best one it supports:

<picture>

  <source srcset="hero.avif" type="image/avif">

  <source srcset="hero.webp" type="image/webp">

  <img src="hero.jpg" alt="Description" width="1200" height="630"

       loading="eager" fetchpriority="high">

</picture>

Chrome users get the AVIF. Older browsers get WebP. Legacy devices get JPEG. Everyone sees the same image; modern browsers just get it faster.

Format is only half the story, though. Serving a 1600px-wide hero to a 375px phone screen wastes bandwidth just as badly as serving the wrong format. The srcset and sizes attributes solve this:

<img src="hero-1200.jpg"

     srcset="hero-480.jpg 480w, hero-768.jpg 768w,

             hero-1200.jpg 1200w, hero-1600.jpg 1600w"

     sizes="(max-width: 600px) 95vw, (max-width: 1200px) 90vw, 1200px"

     width="1200" height="630" alt="Description">

The browser picks the closest match based on display width and pixel ratio. A phone on a 2x screen showing the image at 375px downloads the 768w variant instead of the full 1600w file. You can combine both techniques—<picture> for format negotiation and srcset for responsive sizing—in a single element. Four or five width variants (480, 768, 1200, 1600px) covers most devices comfortably.

Loading strategy: prioritise what matters, defer what doesn’t

Not every image on your page deserves equal treatment. Your hero image needs to load as fast as possible. Gallery images below the fold can wait. Getting this distinction right is one of the easiest ways to improve your LCP score.

For the LCP image, add fetchpriority="high". In Google’s own testing, this single attribute improved LCP from 2.6s to 1.9s. WordPress 6.3+ tries to apply it automatically, but often gets it wrong depending on your theme. Check your actual HTML output.

Just as importantly, never lazy-load your hero image. It’s one of the most common mistakes we see. If your above-the-fold image has loading="lazy", the browser deliberately delays it—the exact opposite of what you want.

For everything below the fold, flip it around: loading="lazy" and decoding="async" defer downloads until the user scrolls near the image, freeing bandwidth for what matters during the initial load. No JavaScript needed—it’s built into the browser.

One more thing that’s easy to miss: set width and height on every image. Without explicit dimensions, content shifts around as images pop in, hurting your CLS score. The 2025 Web Almanac found the median page still has two unsized images, rising to 25 at the 90th percentile. Quick fix, big impact.

Compression: how far you can push it

Lossy compression is fine for the web. You’re not printing these at 300 DPI. AVIF at quality 40–55 and WebP at quality 65–80 both look excellent on screen with significant file savings. Google’s free Squoosh tool lets you compare formats and quality levels side by side—it’s the fastest way to find the sweet spot for your images.

A few rules worth following: strip EXIF metadata (camera data and GPS coordinates add weight with zero benefit to visitors). Avoid GIFs for anything beyond tiny animations—MP4 or WebM delivers smaller files with smoother playback. And if you can see artefacts at normal viewing distance, you’ve over-compressed. Step the quality back up.

WordPress plugins: what the testing shows

If you’re on WordPress, plugins can automate the whole pipeline: compression, format conversion, and responsive image generation. Several independent tests in 2025 compared the major options head-to-head:

Independent testing found ShortPixel consistently delivered the best mobile LCP scores and strongest compression. For most WordPress sites, it’s the best balance of quality, format support, and value.

A nice pairing if you’re on hosting.com’s Managed WordPress: the included WP Rocket handles caching, minification, and lazy loading, while ShortPixel handles compression and format conversion. They tackle the two biggest contributors to page weight without stepping on each other.

Image SEO: the details that actually matter

Speed isn’t the only reason to care about images. They’re a discovery channel in their own right, and a few small practices help search engines understand and surface your visual content.

Descriptive filenames: rename “IMG_4392.jpg” to “managed-wordpress-hosting-dashboard.jpg” before uploading. Search engines treat filenames as context signals.

Specific alt text: describe what the image shows in ~125 characters. “Woman browsing laptop in coffee shop” beats “image1” and “woman laptop computer stock photo website”. It serves both accessibility and SEO.

Structured data: product images, recipes, and how-to content can all benefit from schema markup. Google’s image guidelines detail the supported types. For ecommerce, proper product image schema directly supports rich snippet eligibility.

CDN-based optimisation: the hands-off option

If managing formats and responsive variants manually sounds like a lot, image CDNs (Cloudflare Polish, BunnyCDN, imgix) can automate the whole process. They detect browser support, serve the best format, and resize images per device—you just upload the original.

The tradeoff is cost and complexity. Plugin-based optimisation works well for blogs, brochure sites, and small to medium-sized ecommerce. CDN-based optimisation makes more sense when you’re dealing with thousands of product images or a genuinely global audience. If your site runs on hosting.com’s Managed WordPress, you already get Cloudflare Enterprise CDN included—combining that with a compression plugin gives you most of the benefits without extra cost.

What these changes actually deliver: a real example

Here’s a typical optimisation pass on a product landing page with a hero image and 10 gallery images:

The changes: AVIF with WebP/JPEG fallbacks via <picture>, fetchpriority="high" and explicit dimensions on the hero, responsive variants at 480/768/1200/1600px, and lazy-loading on all gallery images. Nothing changed visually. Over 28 days of field data, the page saw an 8% lift in conversion rate.

Speed starts with your hosting

Everything in this guide makes your images lighter and faster. But none of it can compensate for a slow server. If your hosting adds hundreds of milliseconds to every request, even perfectly optimised images are fighting an uphill battle.

Hosting.com’s Managed WordPress platform is built to make these techniques land properly. AMD EPYC processors and NVMe storage serve files in microseconds. Each WordPress site runs in its own isolated container, so you’re not sharing I/O with thousands of neighbours. Cloudflare Enterprise CDN caches your optimised images at edge locations worldwide. And WP Rocket is included with every plan for caching, lazy loading, and minification.

The result is server response times under 100ms. Pair that with the image techniques above, and you’re giving your content the fastest possible path from server to screen.

There’s a practical guarantee behind it: if your site doesn’t load faster after migrating, you get a year free. The team handles unlimited free migrations from any platform, with a preview URL so you can test before anything goes live.

When more than half the web is still failing Core Web Vitals, the combination of solid hosting and smart image optimisation isn’t just good practice. It’s a competitive advantage.