|<source media="(min-width: 800px)" srcset="pic-big.jpg 1x, pic-big-hd.jpg 2x">|
|<source media="(min-width: 400px)" srcset="pic-med.jpg 1x, pic-med-hd.jpg 2x">|
|<img src="small.jpg" alt="…">|
|src-2="(min-width: 400px) pic-med.jpg 1x, pic-med-hd.jpg 2x"|
|src-1="(min-width: 800px) pic-big.jpg 1x, pic-big-hd.jpg 2x"|
Here’s the very short version of the upcoming post:
Similarly understandable syntaxes, real media queries (!), and based on extensive testing: no double download with a polyfill as well as the option of an alternate polyfill that may trigger a double-download in some environments but has
There’s also a new shorthand syntax that will allow us to not reevaluate our sources when the environment changes, for non-art-directed images. If you have the larger version of an image, and resize your window down, you don’t need to make a request for a smaller image with identical content.
We have a lot of new options, and I’m excited to see where it goes.
Forgive me if this is covered elsewhere since I haven't found it, but what is the meaning given by the
n needs to be a number. My understanding is that it would be problematic to sort attributes by source order, hence the numbering. So, src-1, src-2, src-3, etc. The first src-n that matches is what gets used.
As much as I like picture, it seems to me that src-n offers essentially the same features, if not a few more with the viewport-url syntax. The key thing is that src-n allows for media queries that are either min-width or max-width, and it allows for different units such as em. With that, it's pretty straightforward to write media queries that are the same as those used in CSS, so that images can shift at the same breakpoints as the layout does, even when the base font size isn't 16px = 1em.
So if browser developers might actually implement src-n, and thus speed up image downloads through the preloader, thumbs up.
@PizzaBrandon Oh, the
(Just had to fix the
Wouldn't a single known attribute be more "standardy" (instead of guessing when src-n stops)?:
<img alt-src="(min-width: 400px) pic-med.jpg 1x, pic-med-hd.jpg 2x; (min-width: 800px) pic-big.jpg 1x, pic-big-hd.jpg 2x" src="small.jpg" alt="…">
Yeah - I know long attribute value - but easily accessible... which is the same as srcset with mq
Suppose each image file has different content because of art direction — for example, the three images in this CSS Tricks article under the heading "Do I care about art direction?". If the change is drastic enough, you might need different
Have you considering allowing for, er, alternate