Join Morten Rand-Hendriksen for an in-depth discussion in this video Images can be performance hogs, part of Developing for Performance: HTTP/2.
- View Offline
- [Voiceover] Images make a website look great. However, that visual appeal comes at a significant cost. Image files can easily become huge, and huge files take a lot of bandwidth and a long time to download. As I mentioned earlier in the course, the average webpage is now 2.4 megabytes and images take up 1.5 of those megabytes. That is 62.5% of the total page size. That means, the page size can be more than halved by simply eliminating the images.
It also means, if we're smart about how we create, deploy and use our images we can drastically improve the performance of our site. So why are images such performance hogs? The answer has to do with the evolution of technologies. To put it bluntly, if you have one of those fancy smartphones with a high resolution display, you are to blame. I am too. You see, these high resolution displays require high resolution images. And to ensure our images are crystal clear, we have to add images with 2x or even 4x resolution.
And that means much bigger files with much more data. The good news is, we can counteract this bloat with various tools. First off, we can choose the right image format for the right circumstance. Not every image needs or should be a high resolution JPEG. Second, images can be optimized during creation, saving and when they are added to a project. In some cases, this requires technical skill. In others, it can be done automatically.
Third, thanks to responsive images we can now serve up appropriate image sizes and resolutions based on the device screen size being used to access the site. This can drastically reduce the total data download, but, it can also increase it under certain circumstances. So it's a bit of a mixed blessing. Finally, we can get the browser to generate images for us by providing them as code and markup rather than bitmaps, this is what SVGs are for. But before we do any of this, let me be absolutely clear about one thing.
The reason sites are so huge these days is because they tend to have a ton of unnecessary images, typically hiding inside sliders like the one I have on the example site. Whenever you design or build a site and you feel like adding an image, ask yourself if doing so will benefit or help the visitor. If an image or a slider is there just to make things look fancy, or for show, take a moment to consider what's more important. Having the image there, or having the page load faster.
In almost every case, it's the latter. In my book, speed trumps more images every time.
- What is website optimization?
- Understanding how browsers render content
- Measuring performance
- Optimizing images
- Optimizing code
- Compressing data with GZIP
- Optimizing file caching
- Leveraging CDNs