Open Assignment Available
There's a hands-on Open Assignment associated with this course. Practice everything you've learned in the course, ask questions, and post your designs in the comments section.
We all want our images to display at the best possible quality, with optimal file size, on different devices, but achieving that is easier said than done. There are many different techniques for making images responsive, but some of them have serious downsides, such as limited browser support. In this course you’ll learn everything you need to know to get started with responsive images. We’ll cover what they are and how they relate to responsive web design, and we’ll also discuss best practices.
1.Hello!2 lessons, 03:03
2 lessons, 03:03
1.1Welcome01:20
1.1
Welcome
01:20
1.2Introduction to Responsive Web Design01:43
1.2
Introduction to Responsive Web Design
01:43
2.Working With Responsive Images5 lessons, 26:19
5 lessons, 26:19
2.1Images in Web Design04:36
2.1
Images in Web Design
04:36
2.2The Classic Approach06:33
2.2
The Classic Approach
06:33
2.3Art Direction01:48
2.3
Art Direction
01:48
2.4Using CSS to Selectively Show Images10:49
2.4
Using CSS to Selectively Show Images
10:49
2.5The Ideal Solution02:33
2.5
The Ideal Solution
02:33
3.Existing Solutions7 lessons, 44:50
7 lessons, 44:50
3.1Introducing the `srcset` and `sizes` Attributes14:25
3.1
Introducing the `srcset` and `sizes` Attributes
14:25
3.2Using the Picture Element04:38
3.2
Using the Picture Element
04:38
3.3Using Multiple Image Formats05:19
3.3
Using Multiple Image Formats
05:19
3.4The Downside: Browser Support02:20
3.4
The Downside: Browser Support
02:20
3.5The Solution: a Polyfill05:36
3.5
The Solution: a Polyfill
05:36
3.6Other Solutions07:27
3.6
Other Solutions
07:27
3.7Performance Considerations05:05
3.7
Performance Considerations
05:05
4.Conclusion1 lesson, 02:34
1 lesson, 02:34
4.1Final Words02:34
4.1
Final Words
02:34
Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value.
Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals.
When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets.
You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com.