Join Morten Rand-Hendriksen for an in-depth discussion in this video Preparing images for responsive display, part of Responsive Images.
- Before writing responsive images markup,…we have to prepare the images themselves…for responsive display.…Because remember, we're no longer working…with individual image files, but rather,…an array of different-sized versions of the same images…that are then served up to the browser,…and it's the browser that will decide which of these…image files are gonna be used.…This means we have to make some decisions…about how we're gonna split up these images,…and what sizes we are going to serve up.…Consider this example.…We have a standard, responsive web design…where the widest the image can possibly be on the screen…is 1200 pixels.…
If you go down to smaller screens, like say, a tablet,…you might have an 800 pixel wide display.…And on a cell phone, the display may be as small…as 480 pixels.…Now we have to decide how many image files…we're gonna serve up,…and also where we're gonna make those splits,…so how big are each of those images gonna be.…But there's an additional challenge here.…For all of these screens, we may have different resolutions.…
- 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).