A website carbon estimate is driven by how much data a visitor downloads. On many small business pages the biggest single share of that data is photography: a hero image exported straight from a camera or stock site, gallery pictures several times wider than the screen, logos saved as large PNGs. The good news is that images are also the easiest thing to make lighter without changing how the page looks.
Find the heavy images
Before changing anything, find out which images matter:
- Open the page in Chrome, open DevTools (F12) and the Network panel, tick “Disable cache”, choose the “Img” filter and reload.
- Sort by size. The top few files usually account for most of the image weight.
- Run Lighthouse from the same DevTools window. Its “Properly size images” check lists images that are larger than they are displayed, with the saving for each.
A GreenTracer check gives you the page total to compare against before and after, and reading the report explains what that total includes.
Serve the size the screen needs
A photo displayed 800 pixels wide doesn't need to be downloaded at 4,000 pixels. Export images at the largest size they are actually shown (allowing for high-density screens), and let the browser choose between a few sizes with srcset and sizes. Most content management systems do this for you if you upload through their media library and insert a sized image rather than the full-size original.
Logos, icons and simple illustrations are often better as SVG: a few kilobytes, sharp at every size.
Choose a modern format
For photographs, WebP and AVIF usually produce smaller files than JPEG at the same visible quality. You can offer a modern format with a fallback using the <picture> element. Compare the result by eye at the size it is displayed: the right quality setting is the lowest one where you can't see a difference.
Load later images later
Images further down the page can wait until the visitor scrolls near them. Adding loading="lazy" does this in all major browsers. Don't use it on images that are visible when the page opens, especially the main hero image: Google's guidance is to lazy-load only images outside the initial viewport.
Lazy loading also changes what a carbon test sees. GreenTracer measures an initial load of the page with Google PageSpeed Insights, without scrolling, so lazy images further down aren't counted. That reflects visitors who don't scroll; the ones who do still download them, which is why resizing and modern formats matter as well.
Keep it that way
- Agree a maximum width and file size for new uploads, and check large uploads before publishing.
- Use your platform's image settings or an automated build step so resizing and conversion happen every time.
- Re-check the page after redesigns, when new hero images and sliders tend to arrive.
Under the Sustainable Web Design Model v4, which GreenTracer uses, every megabyte removed from a page lowers the estimate by about 0.148 g CO₂e per page view (about 0.121 g on a host listed as green), for every visit that would have downloaded it. The same change usually makes the page load faster too.
Check your page before and after, and keep the report link as a record.
