In picturefill.js, how to write other than the above specified?
In the following, what to write and how do the conditions specified that other than the above (less than the screen width 480px)?
※I want to specify the thumb.jpg
Some to the difference between writing pattern A and the pattern B?
Which is correct?
Pattern A
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="main.jpg" media="(min-width: 480px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="thumb.jpg" alt="">
</picture>
Pattern B
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="main.jpg" media="(min-width: 480px)">
<source srcset="thumb.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="thumb.jpg" alt="">
</picture>
Technically they are both correct*, and functionally equivalent, but A is preferable because the
source
element is completely unnecessary, since it repeats the same information already specified inimg
.*) with the exception that
src
is a required attribute onimg
, but that is an intended violation when using picturefill in order to avoid double download in legacy browsers.