Join Morten Rand-Hendriksen for an in-depth discussion in this video Manual image optimization, part of HTTP/2: Developing for Performance.
- [Instructor] Optimizing images for the web…can be done manually or you can automate the process…using Command Line and other tools.…However, for best optimization results,…it's a good idea to combine manual and automated processes.…For manual image optimization of JPEGs, in particular,…you can go through a four step process.…First, blur unnecessary areas by introducing high bokeh…or shallow depth of field and make sure that unnecessary…components are removed from the image…to make it as uncomplex as possible.…
Next, size the image to match the largest possible area…it will be displayed in on the final site.…Here, you also have to take into account…high resolution displays.…So, you have to size it for two x,…three x, and maybe even four x displays.…Third, export the image with as low quality as possible…as long as you are not losing visual acuity or quality.…This can be done using Photoshop's export manager…where you can set and toggle the quality output…and see what happens when you reduce the quality.…
Just keep in mind, if you reduce the quality enough…
- What is website optimization?
- Understanding how browsers render content
- Measuring performance
- Optimizing images
- Optimizing code
- Compressing data with GZIP
- Optimizing file caching
- Leveraging CDNs
Skill Level Advanced
Designing Websites for Performancewith Brian Wood43m 32s Appropriate for all
1. Web Performance: An Introduction
Plan of attack1m 52s
2. Web Performance Visualized
3. Optimizing Images
4. Markup and Content
5. Optimizing Delivery
6. The End
Thank you2m 31s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.