Launch in Days, Not Weeks
Professional one-page website. Only a few slots left this month
Your hero image is 1.4 MB. Your competitor’s is 84 KB. They look identical. The difference is format choice and a build pipeline that does the work for you. Modern image formats are the single biggest performance lever most B2B sites still ignore.
Why Image Format Matters More Than Image Count
HTTP Archive data consistently shows that images account for 50 to 70 percent of total page weight on a typical marketing site. A single unoptimised hero image can outweigh an entire page of HTML, CSS, and JavaScript combined.
The common mistake is treating image optimisation as compression: running a JPEG through TinyPNG and calling it done. Compression within a format helps. Switching formats entirely is a different order of magnitude.
An average hero image at JPEG quality 80 might weigh 400KB. The same image in AVIF at equivalent visual quality weighs 60 to 90KB. That is not a small improvement. It is the difference between a 3-second and a 1-second load time on a typical UK mobile connection.
For B2B sites where the primary visitor journey is “find the site, assess it, decide whether to enquire,” this speed difference has a direct impact on whether that decision gets made at all.
AVIF, WebP, and JPEG XL: Real Differences
WebP is the most widely supported modern format. Released by Google in 2010, it is now supported by all major browsers. WebP achieves 25 to 35 percent smaller file sizes than JPEG at equivalent visual quality. It supports transparency (unlike standard JPEG) and animation (unlike JPEG entirely). For most B2B sites, switching from JPEG to WebP is the minimum sensible baseline in 2026.
AVIF is the newer format, based on the AV1 video codec. At equivalent visual quality, AVIF produces files 50 to 60 percent smaller than JPEG and 20 to 35 percent smaller than WebP. The tradeoff is encoding time: AVIF takes significantly longer to encode than WebP, which matters in build pipelines with large image counts. Browser support is now excellent (Chrome, Firefox, Safari, and Edge all support AVIF), but older browser versions and some niche environments still do not.
JPEG XL is a newer format with impressive compression characteristics (comparable to or better than AVIF) and better progressive loading support. However, as of mid-2026, browser support is still limited. Chrome removed experimental support in 2023, though it has been reintroduced. Safari and Firefox support it behind flags. JPEG XL is not yet a safe default choice for production sites without comprehensive fallbacks.
| Format | File size vs JPEG | Browser support (2026) | Encoding speed |
|---|---|---|---|
| JPEG | Baseline | Universal | Fast |
| WebP | 25 to 35% smaller | Universal | Fast |
| AVIF | 50 to 60% smaller | 95%+ of browsers | Slow |
| JPEG XL | 50 to 65% smaller | Partial (not reliable) | Medium |
Browser Support in June 2026 and Fallback Strategy
AVIF is safe to use as your primary format in 2026 with a WebP fallback for older browsers and a JPEG fallback for the remainder. The coverage pattern looks like this:
- AVIF: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+. Covers approximately 95 percent of global browsers.
- WebP: Universal fallback. All browsers that don’t support AVIF support WebP.
- JPEG: True last resort for legacy environments. Rarely served in practice given WebP coverage.
The <picture> element handles this fallback pattern natively, without JavaScript.
The <picture> Element Pattern
The <picture> element lets you offer multiple formats and let the browser pick the best it supports. The order matters: browsers use the first <source> they support.
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" alt="Descriptive text about the image" width="1200" height="630" loading="lazy">
</picture>The <img> element at the end is the universal fallback. Always include width and height attributes to prevent CLS (Cumulative Layout Shift).
For the hero image that appears above the fold, set loading="eager" (or omit loading entirely, as eager is the default). For images below the fold, loading="lazy" defers fetching until the user is about to scroll to them.
Build Pipelines That Automate This
Manual format conversion does not scale. The right approach is automating conversion in your build pipeline.
Astro Image component (@astrojs/image) automatically converts images to WebP or AVIF at build time, generates responsive sizes, and outputs the correct <picture> markup. This is the approach Fernside Studio uses on all Astro builds. Zero ongoing effort from the content team.
Next.js Image component handles format conversion for server-rendered and statically generated pages. It converts to WebP by default, with AVIF available via configuration.
Sharp is the underlying library both Astro and Next.js use. For custom build pipelines, Sharp can be scripted to convert entire image directories during CI.
Cloudflare Images is a paid service (approximately $5 per 100,000 images) that converts, resizes, and optimises images on request at the edge. Useful for large sites with frequently changing image libraries.
Image Dimensions and CLS
A common oversight: modern image formats and responsive images don’t eliminate CLS (layout shift) if you omit width and height attributes.
When the browser parses HTML, it reserves space for elements before they load. If an image has no declared dimensions, the browser doesn’t know how much space to reserve, and the layout shifts when the image arrives.
Always declare width and height on <img> elements, even when using CSS max-width: 100% for responsive scaling. The browser uses the declared aspect ratio to reserve the correct proportional space, preventing layout shift.
<img src="/images/team.jpg" alt="The Fernside Studio team" width="800" height="450" style="width: 100%; height: auto;">Image optimisation is one of the few performance improvements that is almost entirely automatic once your build pipeline is configured correctly. The upfront work is a few hours. The ongoing benefit is every image served to every visitor from that point forward.
Every site built by Fernside Studio includes automatic AVIF and WebP conversion, responsive image generation, and CLS-safe markup as standard. If your current site is serving large JPEGs without a modern format fallback, it is leaving significant performance on the table.
Contact us via our web development service page or get in touch directly if you want a quick audit of your current image pipeline.