P1Issue #60
Page speed : Serve image in next gen format
❓ What does it mean?
❓ What does it mean?
Traditional image formats like JPEG and PNG are heavier compared to modern, next-generation formats such as WebP and AVIF.
Next-gen formats provide better compression and higher visual quality at smaller file sizes, improving page load speed and overall user experience.
🚨 Why is it important for SEO?
🚨 Why is this a problem for SEO?
Slow Page Speed – Large images in outdated formats increase load times.
Core Web Vitals Impact – Slow image loading hurts LCP (Largest Contentful Paint).
Mobile Performance Issues – Heavy images drain data and slow rendering on mobile devices.
Ranking Impact – Since page speed is a ranking factor, slow image delivery can reduce search visibility.
✅ How to Fix It
✅ Best Practices to Fix
Convert images to WebP or AVIF.
Use responsive images with srcset to serve different sizes for different devices.
Provide a fallback in case a browser doesn’t support next-gen formats.
Use a CDN (like Cloudflare, Akamai, or CloudFront) that automatically converts images to next-gen formats.
❌ Bad Example
📌 Example
❌ Bad (Old Format – JPG):
<img src="/images/banner.jpg" alt="Summer Sale Banner">
👉 Large file size (~450 KB) → Slower load time.
✅ Good Example
✅ Good (Next-Gen Format – WebP):
<picture>
<source srcset="/images/banner.webp" type="image/webp">
<img src="/images/banner.jpg" alt="Summer Sale Banner" width="1200" height="400">
</picture>
👉 Browser loads WebP if supported, otherwise falls back to JPG.
✅ Even Better (AVIF Example):
<picture>
<source srcset="/images/banner.avif" type="image/avif">
<source srcset="/images/banner.webp" type="image/webp">
<img src="/images/banner.jpg" alt="Summer Sale Banner" width="1200" height="400">
</picture>
👉 AVIF → Smaller file size than WebP, with WebP and JPG fallbacks.
⚡ Result
⚡ SEO & UX Impact of Fixing
Reduced page load time → Better Core Web Vitals (especially LCP).
Improved mobile experience → Less bandwidth usage.
Higher rankings → Google favors fast-loading, mobile-optimized sites.
Better conversions → Faster sites keep users engaged.