- Compress.
- 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.
- The Astro
- Use the
fetchPriority="high"
andloading="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.