Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Optimizing images with the HTML tag

jfhr.me

Post reply on HN
Print view View original

31–40 of 52 posts

Re: Optimizing images with the HTML <picture> tag

#31

Post by Theodores »

geoffeg wrote: post #14
gildas wrote: post #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.

I've been surprised lately by the number of people that don't know about or understand HTTP headers. One discussion I saw was on a project that was trying to decide what language to serve a webpage in. They spent a good amount of time choosing a geo-location provider and library and then deciding what language to default to for locations that often had multiple languages. I asked why they didn't just use the Accept-L…

Exactly. Just have jpg in the code and serve webp based on header. Problem solved.

If you can do avif with better results than webp then do that.

You can also vary on the data save if you are really keen.

Re: Optimizing images with the HTML <picture> tag

#32

Post by nl »

alwillis wrote: post #25
daxterspeed wrote: post #20

A significant downside to the element, and alternative image formats in general, is that when most users wanna download the image they expect an image format they already know how to work with. To most users an .avif or .webp are an annoyance because they reasonable expect most of their tools to be unable to open these. It's disappointing that browser vendors haven't picked up on this and offered a "Save as PNG/JPEG/…

A significant downside to the element, and alternative image formats in general, is that when most users wanna download the image they expect an image format they already know how to work with. To most users an .avif or .webp are an annoyance because they reasonable expect most of their tools to be unable to open these Certainly not the case with WebP, which was announced by Google 12 years ago. On a recent version o…

Webp support on Linux is spotty. The desktop file explorer for Gnome doesn't support it out-of-the-box for example.

Re: Optimizing images with the HTML <picture> tag

#33

Post by postcoroner »

ThatMedicIsASpy wrote: post #29
jjcm wrote: post #18

One caution here, as I'm just recently was working on automated image encoding for user submitted images - be careful of AVIF/JXL's encoding time. I ran some benchmarks with a raw 48mp iPhone 14 dng file (converted to png to start with since jxl had issues going from dng directly) with imagemagick to illustrate. jpg conversion: 1.74s webp conversion: 3.77s avif conversion: 67.96s jxl conversion: 42.74s Of course ther…

try sharp https://sharp.pixelplumbing.com/

I am using sharp to transform jpeg to avif images. The conversion also takes very long, for my images about 45s each.

Re: Optimizing images with the HTML <picture> tag

#34

Post by masswerk »

d_bud wrote: post #6

MDN 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?

It's also the img tag that you style in CSS. So for all layout purpose, it's still the img element that defines the container and the picture element is more a syntactical bracket to associate other source-sets with it. (This isn't very HTML-y, but, well…)

Re: Optimizing images with the HTML <picture> tag

#35

Post by gnull »

alwillis wrote: post #25
daxterspeed wrote: post #20

A significant downside to the element, and alternative image formats in general, is that when most users wanna download the image they expect an image format they already know how to work with. To most users an .avif or .webp are an annoyance because they reasonable expect most of their tools to be unable to open these. It's disappointing that browser vendors haven't picked up on this and offered a "Save as PNG/JPEG/…

A significant downside to the element, and alternative image formats in general, is that when most users wanna download the image they expect an image format they already know how to work with. To most users an .avif or .webp are an annoyance because they reasonable expect most of their tools to be unable to open these Certainly not the case with WebP, which was announced by Google 12 years ago. On a recent version o…

My friend is using an old Mac laptop what can't display webp on webpages. A Mac laptop!

Re: Optimizing images with the HTML <picture> tag

#36

Post by randomguy0 »

lgreiv wrote: post #13

I am using the picture tag on my photography blog [1] to serve optimized images for a range of breakpoints. I also used to serve WEBP versions of the photos but noticed that (in my audience) the browser support was sufficiently low to drop the generation step for them and just serve various size/quality combinations of JPG. If time allows, I’ll also add a super low-res placeholder image in the background to prevent t…

Set width and height to the ratio of the image to prevent those layout shifts.

Re: Optimizing images with the HTML <picture> tag

#37

Post by evgpbfhnr »

Fun fact: the "Your browser support avif" image in that post at https://jfhr.me/your-browser-supports.avif is currently... a png file.

    $ curl -s https://jfhr.me/your-browser-supports.avif | file -
    /dev/stdin: PNG image data, 400 x 100, 8-bit grayscale, non-interlaced
(same for the jxl one, but firefox apparently doesn't try to load it because of the type. The webp and jpeg ones are what they say they are.)

Re: Optimizing images with the HTML <picture> tag

#39

Post by selcuka »

unilynx wrote: post #19
gildas wrote: post #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.

You can't easily use that with a plain* CDN though - you would need to add a Vary: Accept header and cache misses will increase as every variant of Accept: will cache a different version * it seems fixable with things like Lambda@Edge and I wouldn't be surprised if a smart CDN which already does on-the-fly image compression had implemented this too

You can't parse the User-Agent header (which is the suggested method in the article) with a plain CDN either, so that argument is moot.

Re: Optimizing images with the HTML <picture> tag

#40

Post by PetahNZ »

jjcm wrote: post #18

One caution here, as I'm just recently was working on automated image encoding for user submitted images - be careful of AVIF/JXL's encoding time. I ran some benchmarks with a raw 48mp iPhone 14 dng file (converted to png to start with since jxl had issues going from dng directly) with imagemagick to illustrate. jpg conversion: 1.74s webp conversion: 3.77s avif conversion: 67.96s jxl conversion: 42.74s Of course ther…

Yep, we do about 30TB of user images a month, looked into converting to avif for storage savings, but the processing time basically stopped that. Ended up on webp.
Post reply on HN