Optimizing images with the HTML tag
1–10 of 52 posts
Re: Optimizing images with the HTML <picture> tag
#2FTFY: HTML tag
Re: Optimizing images with the HTML <picture> tag
#3The title lost the essential "picture" tag part of it, probably to html sanitization
Re: Optimizing images with the HTML <picture> tag
#4> I’d still recommend including JPEG XL versions of your images, because chances are that browser support will come eventually.
Likely not. Chrome is actually deprecating JPEG XL, the news broke yesterday.
Re: Optimizing images with the HTML <picture> tag
#5 > I don’t think there’s a perfect answer. You simply cannot predict with 100% certainty what the browser would choose. But you can get a good approximation by parsing the User-Agent header
Isn't it the purpose of the "Accept" HTTP header? For example the last version of Firefox sends "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,/;q=0.8" when fetching a page.
Re: Optimizing images with the HTML <picture> tag
#6MDN says that img tag purpose is not just to serve as a fallback, but also to specify size “and other attributes”. Does it also include alt attribute? This is important. Can someone confirm that?
Re: Optimizing images with the HTML <picture> tag
#7> I don’t think there’s a perfect answer. You simply cannot predict with 100% certainty what the browser would choose. But you can get a good approximation by parsing the User-Agent header Isn't it the purpose of the "Accept" HTTP header? For example the last version of Firefox sends "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp, / ;q=0.8" when fetching a page.
Yup, exactly. Seems like a strange omission. Using the tag should make that obsolete though, as the browser can chose which image to fetch without involving the backend, maybe that's why?
Re: Optimizing images with the HTML <picture> tag
#8MDN says that img tag purpose is not just to serve as a fallback, but also to specify size “and other attributes”. Does it also include alt attribute? This is important. Can someone confirm that?
Yes, all attributes from applies to the selected image, not just width or height.
Re: Optimizing images with the HTML <picture> tag
#9The title lost the essential "picture" tag part of it, probably to html sanitization
yeah I should've thought of that. fixed it now
Re: Optimizing images with the HTML <picture> tag
#10MDN says that img tag purpose is not just to serve as a fallback, but also to specify size “and other attributes”. Does it also include alt attribute? This is important. Can someone confirm that?
The article says
The final tag also specifies common attributes like width, height and alt text. Those attributes will apply regardless of which source the browser chooses!
The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors. It represents its children.