The <picture> tag is coming

I found this article on HackerNews:

How a new HTML element will make the Web faster

For more context on the <picture> tag, here’s the website dedicated to responsive images:

ResponsiveImages.org

And here’s an HTML snippet:

<picture>
    <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
    <source srcset="small.jpg 1x, small-hd.jpg 2x">
    <img src="fallback.jpg" alt="">
</picture>

 

It looks like one of my biggest issues with responsive design is being addressed.

However, my other issue with it is that it’s not applicable for most of the interesting web apps and websites out there. It’s mostly for content display, which means it’s useful for sites like blogs and newspapers. However, for more complicated sites, where content display is just one component of many, responsive design doesn’t give you that much of an advantage. Your design will still need to address different screen properties (size, aspect ratio, touch capability) in ways different enough that it falls outside the scope of responsive.

Nevertheless, I’m excited to see this tag in the wild. Maybe I won’t burn through the data limit on my phone plan as quickly anymore.

Advertisements