Every GreenTracer check loads your page twice, once as a phone and once as a desktop browser, and reports both. It's common for the two to differ by a whole grade or more. When they do, the cause is rarely the code: it is usually that the page sends bigger images to bigger screens, and one image in particular is much bigger than it needs to be. This article explains why that happens and how to fix it without changing how the page looks.
How each device is tested
GreenTracer uses Google PageSpeed Insights, which runs Lighthouse with two fixed set-ups. The mobile run emulates a mid-range phone with a screen about 412 CSS pixels wide and a device pixel ratio of 1.75, so it has roughly 720 physical pixels across. The desktop run uses a window about 1,350 pixels wide at a pixel ratio of 1.
Both runs measure the initial load of a first-time visit, without scrolling. GreenTracer reports the heavier of the two as its headline figure. That is our own cautious policy rather than part of the Sustainable Web Design Model, and it is why a large desktop image can set your grade.
How the browser picks an image
A well-built responsive image offers several files and lets the browser choose. The srcset and sizes attributes do this: srcset lists the files and their widths, and sizes tells the browser how wide the image will be displayed. The browser multiplies the display width by the pixel ratio and picks the smallest file that is wide enough.
<img
src="hero-1024.jpg"
srcset="hero-768.jpg 768w, hero-1024.jpg 1024w, hero-1536.jpg 1536w, hero-2400.jpg 2400w"
sizes="100vw"
alt="…">With sizes="100vw" the image is declared as full screen width. The phone needs about 720 pixels and gets the 768-pixel file. The desktop needs 1,350 and gets the 1,536-pixel file. If those two files are, say, 330 kB and 1.2 MB, that single image adds almost 900 kB to the desktop result.
Often the image isn't really full width on desktop. It sits in a column or behind a max-width container, but sizes still says 100vw, so the browser downloads a file sized for the whole screen.
Find the image that makes the difference
- In your report, open How we estimated this. It lists the bytes for each device. A gap of hundreds of kilobytes points to images.
- Open the page in Chrome, open DevTools (F12), choose the Network panel, filter by Img and reload. Sort by size. Then switch the device toolbar to a phone and reload again.
- Compare the two lists. The file that changes most between them, usually the hero or a full-width banner, is the one to work on. Check its
sizesvalue and the widths on offer insrcset.
Fixes that keep the design
- Make
sizesmatch the layout. If the image is never wider than 1,100 pixels, say so:sizes="(min-width: 1200px) 1100px, 100vw". The browser then stops choosing files meant for wider screens. - Offer intermediate widths. A gap from 1,024 to 2,400 pixels forces large jumps. Adding 1,280 and 1,536 gives the browser a closer match.
- Compress for the web. Modern formats such as AVIF and WebP usually produce much smaller files at the same visible quality than JPEG or PNG. Check the result by eye, especially on photographs with gradients.
- Use a different crop on small screens if it suits the design. The
<picture>element can serve a tighter crop to phones, which often looks better and weighs less. - Lazy-load only what is below the fold.
loading="lazy"is right for images further down the page, but not for the main image at the top, which should load straight away.
What a fix is worth in the estimate
The estimate is proportional to bytes. Under SWDM v4, each megabyte saved removes about 0.148 g CO₂e per page view (1 MB × 0.300 kWh/GB × 494 g/kWh), or about 0.121 g if your host is listed as green. Cutting 900 kB from the desktop load removes about 0.13 g, which is often enough to move a page up a grade.
One caution about lazy loading: images that load only when a visitor scrolls aren't counted in a first-load test, but they are still downloaded by visitors who scroll. Lazy loading lowers the test figure honestly for visitors who don't scroll. Making each image smaller helps everyone.
After a change, check the page again and compare the bytes for each device in the new report.
