Images are often the heaviest assets on portfolio sites. Improving speed without losing quality is not about applying one compression level everywhere; it is about choosing the right format and dimensions for each use case.
Serve images close to their displayed size
Sending a 3000-pixel source for a card displayed at 400 pixels wastes bandwidth. Use responsive image sources that account for different screen densities so the browser can choose an appropriate asset.
- Prefer modern formats for photographic content.
- Do not lazy-load the primary above-the-fold image unnecessarily.
- Provide width and height values to reduce layout shifts.
The best image optimization is invisible visually but clearly felt in speed.
