Hacker News Reader

Comment by thomasfoster96 | Hacker News Reader

> I'd like to support it in my own websites, but I literally can't since a huge chunk of visitors use Safari.

Wouldn’t using the <picture> element[0] allow this this? It’s pretty widely supported (every browser that supports WebP and Safari)[1] and allows a fallback to a JPEG in an <img> tag.

[0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pi...

[1] https://caniuse.com/#feat=picture

View on HN

Would this be susceptible to tracking issues? E.g. place a hidden picture that loads WebP or PNG otherwise, to track which users support it and which don't

I would assume that’s entirely possible, but something like this could be done using the HTML5 <video> or <audio> elements for video or audio codecs (there’s even a DOM API to do it! [0]), and some browsers advertised WebP support via the HTTP Accept header [1]. For tracking, I’d assume it’s not very useful these days apart from determining who’s using Safari?

Edit: Not to mention that the onerror event handler on the <img> tag has always been able to find out if an image didn’t display [2].

[0] https://html.spec.whatwg.org/multipage/media.html#dom-naviga...

[1] https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_ne...

[2] https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageEl...

Browsers tend to advertise what formats they accept outside of a very basic set to the server on requests via the HTTP Accept header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Ac...

For example, Firefox on macOS sent this Accept header for this request: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8

Chrome sent text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9

Reply on news.ycombinator.com