Your Images Are 60% of Your Page Weight
Across the sites we audit, images are consistently the largest share of page weight — usually around 60%, occasionally north of 80%. Not scripts. Not fonts. Photographs of smiling people in offices.
This is good news, because images are the easiest thing on a website to fix.
The four mistakes, in order of cost
Uploading straight from the camera. A phone photo is 4,000 pixels wide and several megabytes. Displayed in a 600-pixel-wide card, every one of those extra pixels is downloaded and thrown away.
Serving one size to everyone. A phone doesn't need the desktop hero. srcset has been well supported for a decade and remains widely unused.
Old formats. The same photograph at the same visual quality is typically 25–35% smaller in a modern format. That's a free third off the largest thing on the page.
Loading everything immediately. Images below the fold compete for bandwidth with the content someone is actually looking at. loading="lazy" is one attribute.
What good looks like
For a typical content image:
- Resized to roughly the maximum size it will ever display, at 2× for sharpness on dense screens.
- Compressed — quality around 80 is visually indistinguishable from 100 for photographs and dramatically smaller.
- Served in a modern format with a fallback.
widthandheightattributes set, which also fixes layout shift.loading="lazy"unless it's the hero, which should be eager and preloaded.
Do that consistently and page weight typically falls by half without a single visible change.
The hero image deserves its own paragraph
It's your Largest Contentful Paint. It is the single most important file on the site.
It should be the smallest file you can make it while still looking good, preloaded, never lazy-loaded, and ideally not a photograph of a handshake. Test it on a mid-range phone on cellular, which is where most of your visitors actually are.
Where SVG belongs
Logos, icons, illustrations, and diagrams should be SVG: a few kilobytes, sharp at any size, and stylable in CSS. Exporting a logo as a 200 KB PNG is a habit worth breaking.
Photographs should never be SVG, and an SVG exported from a design tool without cleaning frequently carries more junk than the equivalent PNG. Run it through an optimizer.
Doing it to a site that already exists
You don't need to reprocess a decade of uploads. Sort by page traffic, fix the images on your top twenty pages, and you'll have captured most of the available benefit in an afternoon.
Then put a rule in place so it stops recurring: images get processed before upload, or by the platform on the way in. Otherwise you'll be doing this again next year, which is how most sites end up here in the first place.