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

21–30 of 52 posts

Re: Optimizing images with the HTML <picture> tag

#21

Post by dmitriid »

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…

I wish more people knew about this: https://github.com/for-GET/http-decision-diagram and https://github.com/for-GET/know-your-http-well

Re: Optimizing images with the HTML <picture> tag

#22

Post by gnull »

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/…

Google search result do this weird trick. When you hover on a link the line at the bottom the your browser window shows the actual URL. But if you do "copy link URL" on it, you get a Google tracker URL in your clipboard.

Couldn't one do the same thing to make users get jpegs when they try to save a wepb? How bad would it be?

Re: Optimizing images with the HTML <picture> tag

#23

Post by [deleted] »

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…

[deleted]

Re: Optimizing images with the HTML <picture> tag

#24

Post by wwalexander »

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…

Same thing with core UNIX commands, and so many other areas. We are doomed to incessantly reinvent the wheel and turn versatile abstractions into single-purpose complications. One must imagine Sisyphus happy.

Re: Optimizing images with the HTML <picture> tag

#25

Post by alwillis »

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 of macOS, Preview, the Mac’s default image and pdf viewer can open WebP and AVIF files, making it easy for Mac users to convert to another format if they wish. Also 3rd party graphics apps have supported WebP for years now.

AVIF support isn’t as widespread yet but that will quickly change now.

BTW, the iOS defaults to saving photographs in HEIC, which the average consumer has never heard of.

Re: Optimizing images with the HTML <picture> tag

#26

Post by levymetal »

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…

Google famously uses geolocation to set language instead of Accept-Language. They have their reasons, which I disagree with.

https://news.ycombinator.com/item?id=30638590

Re: Optimizing images with the HTML <picture> tag

#27

Post by WrtCdEvrydy »

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…

> avif conversion: 67.96s > jxl conversion: 42.74s

Holy shit-balls? Also I thought that quad bayer would come down to 12MP for the output?

Re: Optimizing images with the HTML <picture> tag

#28

Post by Panino »

You can also use the picture tag to serve different images based on the browser's dimensions, to serve the best content and fast. So people with a TV get a wide image while a phone gets a small version, for example. The browser itself makes the choice and GETs the image from a list in the picture tag.

This could also conceivably be used for user tracking purposes as a way to determine without javascript the user's browser window setting. (I assume CSS can do this too.)

Re: Optimizing images with the HTML <picture> tag

#29

Post by ThatMedicIsASpy »

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/

Re: Optimizing images with the HTML <picture> tag

#30

Post by tqkxzugoaupvwqr »

jeffmc wrote: post #16

For me the biggest win in pages with lots of images is the img loading=lazy flag- https://developer.mozilla.org/en-US/docs/Web/Performance/Laz... This only loads the image when it scrolls into view

Nitpick: The image is loaded when it’s near the viewport so loading is likely finished when the user reaches the image.
Post reply on HN