More often than not, when asked to troubleshoot slow webpages, one of the major contributing factor to load time is images. Beautiful, and often beneficial in illustrating concepts and content, they come at a cost: time and bandwidth. So what can we do to optimize them?
In this talk we will
- explore HTML elements and properties that can help us customize our images for screen sizes and capabilities
- look at techniques to reduce content layout shifts
- consider when and how to lazy load images
- compare images in various file types
Source code: github repo