What to do with an image before you upload it

The media manager will happily accept a 6 MB photo and put it on your homepage. The browser will resize it to 600 pixels wide and the visitor will still download all 6 MB. On a phone, on mobile data, that is the whole experience.

Resize first

Work out how wide the image will actually be displayed and export it at roughly twice that, so it stays sharp on a high-density screen. A photo in a three-column grid is rarely shown wider than 400 pixels, so 800 is plenty. Nothing on a normal page needs to be 4.000 pixels wide.

Then compress

JPEG at around 80 percent quality is almost always indistinguishable from the original and a fraction of the size. Squeezing further starts to show on skin tones and flat skies before it shows anywhere else.

Pick the right format

• JPEG for photographs.
• PNG for anything needing transparency, and for flat graphics with few colours.
• SVG for logos, icons and diagrams. It scales to any size and is usually smaller than the PNG it replaces.
• WebP when you want the smallest photo files and do not need to support anything ancient.

Let the browser skip what it cannot see

Add loading="lazy" to images below the fold and the browser will not fetch them until they are needed. Do not put it on the image at the top of the page; that one you want loaded immediately.

Give every image a width and height attribute too. Without them the page jumps around as images arrive, which is both irritating and something search engines measure.

The rule that actually holds

Fix images before they enter the site. Once a hundred oversized photos are in the media manager and referenced from fifty articles, cleaning up is a project. Ten seconds per image on the way in costs nothing.