Here’s one for your bookmarks: if you’ve ever wondered if you’re using the correct responsive images syntax in HTML then our guide was made just for you. In the intro, Chris writes:
This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). The responsive images syntax is about serving one image from multiple options based on rules and circumstances. There are two forms of responsive images, and they’re for two different things:
1) If your only goal is performance, then what you need is…<img srcset="" src="" alt="">
2) If you also need design control, then what you need is… <picture>
Check out the “Only View Code Snippets” button if you’re there just to snag some code quick.
The syntax for getting responsive images right can be tricky sometimes and so I’m extremely glad that now I have a resource I can return to again and again whenever I need it.
Check out the “Only View Code Snippets” button if you’re there just to snag some code quick.
csstransition.net 