Why Switching to WebP and AVIF Improves Website Speed and LCP

Image Payloads and Core Web Vitals

According to the HTTP Archive's Web Almanac, image bytes make up nearly half of the median web page's transfer size. Serving unoptimized legacy JPG and PNG files increases network transfer time on mobile connections and often pushes Largest Contentful Paint (LCP) past the 2.5-second threshold documented in Google Search Central's Core Web Vitals guide.

Adopting modern codecs—specifically WebP and AVIF—allows engineering teams to preserve visual sharpness while reducing image transfer weight by 25% to 50%.

Technical Limitations of Legacy JPG and PNG Formats

JPEG (1992): Fixed 8×8 DCT Blocks and No Transparency

Standard JPEG divides images into fixed 8×8 pixel blocks and applies a Discrete Cosine Transform (DCT). At higher compression ratios, this fixed grid creates visible ringing and block artifacts around sharp typography or edges. Additionally, JPEG is limited to 8-bit per channel RGB/YCbCr and has no alpha channel for transparency.

PNG (1996): Lossless Fidelity at High Byte Cost

PNG provides lossless DEFLATE compression and full 8-bit alpha transparency, making it reliable for UI graphics and source logos. However, saving a detailed photograph or multi-color hero graphic as a PNG frequently produces files 3× to 6× larger than an equivalent JPEG or WebP, slowing down mobile LCP rendering.

Format Comparison: JPG vs. PNG vs. WebP vs. AVIF

Both WebP and AVIF derive their intra-frame compression techniques from modern video codecs (VP8 and AV1, respectively). Notice how both formats compare against a baseline JPEG file:

WebP: Universal Modern Delivery

According to Google's published WebP compression study, lossy WebP images are 25% to 34% smaller than comparable JPEG images at equivalent SSIM quality indices, while lossless WebP images are 26% smaller than PNGs. You can convert your existing images locally in your browser using our client-side JPG to WebP Converter and PNG to WebP Converter.

AVIF: Higher Compression Efficiency via AV1

Developed by the Alliance for Open Media, AVIF (AV1 Image File Format) achieves roughly 50% smaller file sizes compared to baseline JPEG (which translates to roughly 20% to 30% smaller files than equivalent-quality WebP). AVIF accomplishes this using variable block sizes up to 128×128 pixels, directional intra-prediction, and 10-bit/12-bit color depth support. When you need to convert downloaded AVIF assets back into standard formats for legacy desktop editors, use our AVIF to JPG or AVIF to PNG tools.

Serving Next-Gen Formats Safely with the HTML <picture> Element

While CanIUse data for AVIF shows support across Chrome, Firefox, Edge, and Safari 16+, older browsers still require a fallback. Using the native HTML <picture> element lets the browser pick the first supported format from top to bottom:

<picture>
  <!-- 1. Serve AVIF to browsers that support it (~50% smaller than JPG) -->
  <source srcset="/images/hero.avif" type="image/avif">
  
  <!-- 2. Fall back to WebP (~25-35% smaller than JPG) -->
  <source srcset="/images/hero.webp" type="image/webp">
  
  <!-- 3. Universal JPG fallback with explicit width/height to prevent CLS -->
  <img src="/images/hero.jpg" alt="Product dashboard overview" width="1200" height="675" loading="eager" fetchpriority="high">
</picture>
  

Always include explicit width and height attributes on the inner <img> tag so the browser reserves the correct aspect ratio box before the image downloads, preventing Cumulative Layout Shift (CLS). For CMS platforms that only accept a single image upload, convert your graphic with our PNG to WebP Converter or optimize it via Compress Image.

Frequently Asked Questions (FAQs)