- 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.