Menu
So the new Picture element looks like this:
<picture>
<source ... />
<img browsers will fall back to this width="10" height="10" />
</picture>
In our CSS, we want to set say a background color.
picture {background-color: red};
img {background-color: yellow};
Will a Picture enabled browser just show a red background, while non enabled browsers show a yellow background? Or a combination of the two. Likewise, will an Picture enabled browser see the height/width attributes on the img element, or is the img element ignored completly?
935
Img Tag. It is widely known that using the image tag is better SEO practice than using background images because of the screen reader implications.
The <img> element is used to provide backward compatibility for browsers that do not support the element, or if none of the source tags matched. The <picture> tag is similar to <video> and <audio>. We add different sources, and the first source that fits the preferences is the one that will be used.
If you want to change the image completely, you'll need the picture element. In the same way that srcset builds upon the src attribute, the picture element builds upon the img element. The picture element wraps around an img element. <img src="image.
The way to know when to use the <picture> element is based on the use case you're trying to solve. If you're solving for the art direction use case, use the <picture> element. Anything else, you should stick to srcset and sizes .
The idea of the picture element is that that it simply provides source information for its enclosed img element, and that it is always the img element that is rendered, not the picture element.
However, I can't see anything normative in the spec that suggests that the picture element will be treated by default as anything other than an inline element, so I expect that you will be able to style it with a different display setting, give it padding etc., in the same way as you can do with span elements, in which case, the background-color will behave in the same way as a span element around an img element does today.
So targeting both might be appropriate. The backgrounds will simply layer as normal. But the img will be rendered, so in your scenario, the background behind the image will be yellow, assuming of course that the img has at least some degree of transparency.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
