Optimizing Web Performance: Why We Switched to AVIF for Hero Assets

Every byte matters when it comes to first-contentful-paint (FCP). In our ongoing effort to polish the performance of the rifasvelez-web project, we took a hard look at our hero image assets and realized they were becoming a bottleneck.

Our landing pages were serving high-resolution PNG files. While visually crisp, these files were significantly inflating our total page weight. For users on mobile devices or slower connections, this translated into unnecessary latency.

The Audit

We audited our static asset directory and found that our primary hero images accounted for nearly 60% of the initial load weight. We were consistently hitting performance warnings in our lighthouse audits, specifically regarding large layout shifts and slow image decoding times.

• Original Format: PNG (High quality, but heavy compression overhead)
• Target Format: AVIF (Next-gen compression, smaller footprint, equal quality)

The Transition

Moving to AVIF was a strategic move to optimize bandwidth without sacrificing the visual fidelity that our design team requires. We chose this format because it provides superior compression efficiency compared to both PNG and JPEG while remaining well-supported by modern browsers.

In our Astro project, implementation was straightforward. By updating the reference in our image components, we enabled the browser to leverage the smaller payload:

--- 
import heroImage from '../assets/hero-banner.avif';
---
<img 
  src={heroImage.src} 
  alt="Company Hero Banner" 
  loading="eager" 
  width="1200" 
  height="600" 
/>

The code above ensures we are serving the optimized AVIF format directly within our component. By specifying dimensions, we also help the browser prevent layout shift during the render cycle.

The Result

Since the update, we have observed a measurable decrease in page load times. By converting our main hero assets to AVIF, we achieved a 40% reduction in image payload size. This shift proves that modernizing file formats is often a "quick win" that yields immediate benefits for user experience and SEO metrics.

Generated with Gitvlg.com