- Overview
- Transcript
4.1 Final Words
Welcome to the concluding lesson of this course. Here’s a rundown of what you’ve learned, and also a small assignment.
Related Links
1.Hello!2 lessons, 03:03
1.1Welcome01:20
1.2Introduction to Responsive Web Design01:43
2.Working With Responsive Images5 lessons, 26:19
2.1Images in Web Design04:36
2.2The Classic Approach06:33
2.3Art Direction01:48
2.4Using CSS to Selectively Show Images10:49
2.5The Ideal Solution02:33
3.Existing Solutions7 lessons, 44:50
3.1Introducing the `srcset` and `sizes` Attributes14:25
3.2Using the Picture Element04:38
3.3Using Multiple Image Formats05:19
3.4The Downside: Browser Support02:20
3.5The Solution: a Polyfill05:36
3.6Other Solutions07:27
3.7Performance Considerations05:05
4.Conclusion1 lesson, 02:34
4.1Final Words02:34
4.1 Final Words
Hey, welcome to the conclusion lesson of this course. Thank you so much for watching it and I really hope you find it useful. Now, what I'm gonna do is a basic rundown of what you've learned. When it comes to your responsive images, you can take the classic route and make your images fluid. That will be very easy, but it also means you will be serving potentially huge images to mobile devices. And that's a waste of bandwidth. Plus there are cases when you'll want to show a crop of an image on a small screen instead of the large scaled one. You could use images as backgrounds in CSS and that will allow you to load different images on different screen sizes. And it will also allow you to crop images. But in the end, this is not the most elegant or semantic solution. Now, the best solution we've got so far is by using the picture element. And this will allow you to load different images based on the device you were using. And even depending on the DPI count of the screen so, if you have a retina screen, you can load different images for that. The only problem is, its browser support is pretty limited, but you can bypass that by using a polyfill. Apart from this you can use a third party resource like Resource It that will take a URL to your image. And then send you an image that's adequate for your device. In the end, it's all about performance. So before you even start looking for a solution for responsive images, you should start by optimizing your images. And you'll be surprised at what a big of a difference it can make. And that's basically it, so this technology is still in its infancy. So as we move on, more and more browsers will adopt it and will create a much nicer environment for us to work with. But until then you can actually start implementing it today. Using the stuff you've learned in this course. Now there's also an open assignment relevant to this course so check out the lesson notes for a link to that. Until next time, I'm Marty [INAUDIBLE] and from all of us at Tuts Plus, have a great day.