- I always start my courses by asking, "Who Is This Course For?" In this case, the answer is simple. If you're a web designer or developer and you use images in some way, this course is for you. Responsive images is a concept that will quickly become the standard for image implementation on websites, and knowing what they are and how to use them will become a requirement for all of us. For developers, whether that be front or backend or somewhere in between, understanding responsive image markup is essential to produce the best possible implementations that work seamlessly across all screen sizes, resolutions, and devices.
For designers, knowing what responsive images can do for you, both in terms of serving up the best possible image to the visitor and to allow for truly responsive art direction will increase your creative playground and allow you to take advantage of all the power the web has to offer. So in short, this course really is for everyone. Let's dive in.
- How responsive images work
- Adding Picturefill to your site
- Making regular images responsive
- Using the <picture> element
- Identifying breakpoints and layout changes
- Using the <picture> elements for image type fallbacks
Skill Level Intermediate
Q: When I use Firefox's Responsive Design View, the images aren't automatically reloading when I resize the window. What do I do?
A: This is a known bug that only affects Firefox version 38. If you update to Firefox 39 or later, this should be resolved (at the time of writing, Firefox 39 is slated for release June 30, 2015).