Performance
Image optimisation without losing quality
Images are usually the heaviest part of a page. A few habits cut that weight dramatically.
Abdus Samad · · 4 min read
On most sites, images account for the largest share of the page weight, so small habits here make a visible difference.
- Resize to the size actually displayed, including for high-density screens.
- Use modern formats such as WebP or AVIF with a fallback.
- Lazy-load images below the fold, but not the hero.
- Always set width and height to avoid layout shift.
- Compress before upload, and use a framework image component where you can.
- Use video or CSS instead of large animated GIFs.
Compare before and after at normal viewing size. If you cannot see the difference, the smaller file wins.