A collection of code patterns and demonstrations using srcset combined with the HTML <img> and <picture> elements
The basics
This is a rough outline of what will be in this section:
This project is a work in progress. The basics, more examples and resources will be added soon along with Picturefill-ed versions of each example. Browser support also needs updating and testing, including Safari 9.1 / iOS 9.3 now that it supports the full spec.
<img> and resolution changing
- Using
srcset -xto swap resolution - Source image is picked based on screen density. Good for fixed-width images and not much else.
- Using
srcset -wto pick the best size - Source image is picked intelligently based on available widths, screen density and display size.
- Using
srcset -wto pick the best size, and the image changes size across breakpoints - Source image is picked intelligently based on available widths, screen density and display size.
- Testing
srcset -wsyntax, when nosourceattribute is set - A stress test for browsers in how they handle this non-spec situation.
<picture> and art direction
- Using
-xsyntax to set density - Allow different sources with density support.
- Using
-wsyntax to set density - Allow the browser to more intelligently pick the best source based on available widths, screen density and display size at each breakpoint.
- Simple art direction changes
- When images need to either display differently cropped sources, or change aspect across breakpoints, art direction is needed.
- Complex art direction with
-xsyntax - Using
-xsyntax to enforce explicit source selection with complex image elements, changing aspect and scale multiple times. - Complex art direction with
-wsyntax - Using
-wsyntax to allow permissive source selection with complex image elements, changing aspect and scale multiple times.
Other examples
- Using
<picture>to choose the best image format types - Provide different formats based on browser support, with fallbacks provided.