Properly Size Images for the Web

Even weather.com is doing this wrong - are you?

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 unnecesarily 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:

clouds inspected

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.

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.

I write about ML, Web Dev, and more. Subscribe to get new posts by email!


This blog is open-source on Github.

At least this isn't a full screen popup

That would be more annoying. Anyways, consider subscribing to my newsletter to get new posts by email! I write about ML, Web Dev, and more.