Images in websites help break up long, boring passages of text and make websites look nice. But, they’re also the heaviest resources you can include in your site. Let’s take the home page of techcrunch.com as an example. With the Google Chrome inspector open to the Network tab and the Images label selected, we load the page and scroll all the way to the bottom (because images are load dynamically as they appear in the viewport). The result in 6.5 MB out of a total of 7.3 MB of data to load the home page came from images alone. That’s a whopping 89% of the page load. Because the images are loaded dynamically as needed, techcrunch.com doesn’t load too slowly. However, there are still many websites that are image heavy and don’t do a good job at optimization or caching at all.
