I usually check the weather on my phone, but last week I visited weather.com on my laptop. Here’s what I saw:

This was taken with Network throttling set to "Fast 3G" in Chrome to simulate the slow connection I had.

Why is the image in the top right so much slower to load than the others around it? I opened up Chrome Devtools to check it out:

“intrinsic: 1280 x 720 pixels”. That means the source image was 1280 x 720 despite the actual displayed <img> element being much smaller! The largest that <img> element grows to on weather.com is 232 x 130, but your browser still has to download the entire 1280 x 720 image to display it. This unnecessarily slows down the site and wastes bandwidth.

Here’s a side-by-side comparison of the original image and a smaller version of it:

Original (1280 x 720) Resized (464 x 260)

Both images above are being displayed at a resolution of 232 x 130.

Can you tell the difference between them without zooming in? I can’t. The original image is 213 kB, but the resized one is only 66 kB. That’s a savings of 147 kB, or 69%! The resized image is over 3x smaller. This is especially impactful given the image’s prominent location on the weather.com homepage - it should load fast.

Note: I resize to 464 x 260 instead of 232 x 130 to support Retina displays.

Here’s another instance of the same issue on weather.com:

The original image is 2600 x 1733, but it’s used as the background-image: for a <div> that’s much smaller:

Only 595 x 350 (or 1190 x 700 on Retina displays) of the original image is visible, so the rest can just be cropped out. Even on a Retina display, 82% of the original image goes unused.

Example Weather Channel Popup Please turn off your ad blocker so our site can load even slower than it already does. Thank you for suffering through our poor page performance. Original (2600 x 1733) Example Weather Channel Popup Please turn off your ad blocker so our site can load even slower than it already does. Thank you for suffering through our poor page performance. Cropped (1190 x 700)

The original image is 779 kB, but the cropped one is only 173 kB. That’s a savings of 606 kB, or 78%! The cropped image is 4.5x smaller.

@weatherchannel make sure to properly size images on https://t.co/lhrWBk1DCZ so the site loads faster! https://t.co/VFqgPwEZYp — Victor Zhou (@victorczhou) February 22, 2019

People that don't size images properly on production sites:



1) Beginners

2) Massive corporate teams with super high traffic sites

3) Literally everybody omghttps://t.co/9v0SOK0rI7 pic.twitter.com/EUYHMmVaZ3 — CSS-Tricks (@css) February 28, 2019

The lesson: serve images at the size they’re actually rendered at. Images that are too large look the same but slow down page loads and waste bandwidth.

Want to learn more? Read Google’s recommendations on properly sizing images.