Concrete and simple examples for responsive HTML images
In HTML you can implement responsive images. That means that you specify multiple image variations (lower and higher resolution images) and let the browser pick the best fitting image for the given screen size. For a responsive website you want to render large images (higher resolution) on bigger screens like a desktop PC screen, and smaller images (lower resolution) on mobile phones.
Higher resolution images on larger screens will present an image in a good quality. Lower resolution images load faster and in most cases are sufficient when rendered on smaller mobile screens.
The HTML specification solves that problem with the HTML picture tag and the HTML img attribute srcset. The spec is fairly complex and allows a wide range of configurations. The following video presents a few concrete and simple examples to help get you started with responsive images. The video covers following aspects:
- Showing 2 different approaches for responsive images with an <img> tag by itself and then with a <picture> tag and <source> tags
- Specifying multiple image paths and widths in the "srcset" attribute
- Images by breakpoint, where order matters
- The "sizes" attribute of the <img> tag and a simple example of how it works
- Higher resolution images for retina / high pixel density displays: "2x rules"
- Using the lazysizes library for lazy loading images
- Using a placeholder image source before the actual image is loaded
- Automatically determining the available room for the image as the screen size changes
Commentsblog comments powered by Disqus
Hi, we're Mugo Web - Nice to meet you!
We're a group of web experts who solve complex web problems.Learn more about us »
- Business solutions (74)
- Case study (27)
- eZ Publish add-ons (21)
- eZ Publish community (11)
- eZ Publish development tips (66)
- Front-end development (4)
- Productivity tools (17)
- Site performance (12)
- User experience (33)
- Web accessibility (14)
- Web solutions (71)
- Work at Mugo (12)
Yes - we can do that.
Many years of experience with complex websites allows us to offer total solutions.Learn more about what we can do »
We love our clients (and they love us too)
We've solved problems across North America and around the world.Learn more about what we've done »
We tweet too
Follow us on Twitter for the latest Mugo happenings