How to Optimize Web Images

Updated on December 27, 2024

Compress.
- SVGOMG
- Squoosh
  - I'm not sure how necessary this is given the image components and plugins below.
Serve different formats and sizes using <srcset>.
- The Astro <Image/> component automatically generates image variants.
- The Eleventy Image Transform plugin does the same thing.
- Jampack has a similar feature.
- Fix sizing with RespImageLint.
- Check your work with PageSpeed Insights.
Use the fetchPriority="high" and loading="eager" attributes for critical images.
Preload critical images.
- I'm not sure how to achieve this when using any of the image-variant components/plugins above, because they generate many variants with different hashes.
Lazy-load non-critical images.
Fade them in for better perceived performance.