Join Morten Rand-Hendriksen for an in-depth discussion in this video How images on the web work, part of Responsive Images.
- When we talk about images on the web,…it's important to remember where they came from originally…and how they work.…Way back in the beginning of the Web,…the Image Element was created to, quote,…"incorporate in-line graphics,…typically icons and small graphics, into an HTML document."…Now, obviously, we've moved way beyond…this narrow definition,…and images are now a vital part of the Web…that are typically displayed in large, block-level elements.…And this actually goes counter…to the original intent of an image.…As you can see here from the definition,…they are in-line elements,…meaning they appear alongside the text…they are displayed next to.…
And to display images the way we normally do now…in web design,…we have to change them into block-level elements,…either by changing the display property…of the image itself,…or by wrapping the image in a container.…If we look at images on the web,…here's how they work in a nutshell.…In the HTML, we insert an image tag…that contains a source attribute,…telling the browser where the image file is located,…
- 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).