Join Morten Rand-Hendriksen for an in-depth discussion in this video Responsive images, part of HTTP/2: Developing for Performance.
- [Instructor] All right.…Time to dive in to some code.…In the exercise files for this movie, 03_04,…you'll find the unoptimized version of the example site.…I have it open in Atom,…and I'm using the Atom-live-server package…to preview it in my browser.…What you notice right away is this page…has a lot of images displayed at different sizes.…And since it's responsive,…the way these images are displayed…changes depending on the width of the viewport.…Part of our image optimization process…is to provide the browser…with the most appropriate image sizes…based on the viewport of the current browser.…
This is what RICG responsive images are for.…If this is the first time…you've heard of RICG responsive images,…I recommend you watch my course on responsive images…right here in the library.…The gist of it is this,…when the page loads in the browser,…the browser knows how wide its viewport is,…and it looks for a responsive images markup…in the form of an image element with the source set…and sizes attributes for guidance on what image file…
- 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.