When I review a slow site, the cause is most often a single image of several megabytes uploaded straight from the camera. It is the easiest performance problem and the quickest to fix.

Serve the right size

Do not upload a 4000-pixel-wide image to show it in an 800-pixel space. Resize it before uploading to roughly the largest size it will be displayed at.

Pick the right format

  • JPEG for photographs.
  • PNG when you need transparency or sharp edges.
  • WebP, a modern format that gives smaller files at similar quality and is supported by current browsers.
  • SVG for icons and logos; it is vector and light.

Compress wisely

JPEG quality between 70 and 80 usually shows no visible difference while saving a lot. Try and compare with your own eyes.

Lazy loading

Add loading="lazy" to images below the fold so they only load when the user nears them:

<img src="photo.jpg" width="800" height="450" alt="Image description" loading="lazy">

Set dimensions

Write width and height so the page reserves space before loading and content does not jump (this improves layout stability).

The lightest file is the one never loaded; the next lightest is the one sized to its need.