From the course: Developing for Web Performance

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Manual image optimization

Manual image optimization

- [Instructor] Whichever image format you choose, the performance of every single image can and should be improved with some manual image optimization. First, decide on the maximum visible size the image will have in the layout. Even so-called full-bleed images that span across the entire width of the viewport should have a maximum width because some people have extremely wide monitors, and it makes no sense to display a full-width image on them because it'll take up the entire viewport. A good rule of thumb here is no image should ever be displayed wider than a full HD monitor, so 1,920 pixels. This is already a huge image, and in almost every case it is, at the most, going to fill in the entire monitor. But if you're going full-bleed, this will give you what you want, and you don't need to go any higher. To avoid anyone complaining about the image stretching beyond 1,920 pixels if they have one of those giant…

Contents