Live data from Hacker News

Optimizing images with the HTML tag

jfhr.me

41–50 of 52 posts

Re: Optimizing images with the HTML <picture> tag

#41

> 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. https://www.phoronix.com/news/Chrome-Deprecating-JPEG-XL

WTF!? Jpeg xl was looking awesome, with lots of community interest: https://jpegxl.info/

This sucks.

> - There is not enough interest from the entire ecosystem to continue experimenting with JPEG XL - The new image format does not bring sufficient incremental benefits over existing formats to warrant enabling it by default

Re: Optimizing images with the HTML <picture> tag

#42
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

Thank you, this is exactly what I've been looking for and didn't know it.

Re: Optimizing images with the HTML <picture> tag

#43
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…

I don't know much about AVIF (I guess the same concern applies though), but for JPEG XL there are actually two knobs for compression: distance or quality (`-quality` in ImageMagick) and effort (`-define jxl:effort`).

Distance is the target perceptual metric (Butteraugli), while effort controls a variance of the perceptual metric of the encoded image---which can be never accurate. Higher effort means more consistent quality but more computation as well. The default for cjxl, and probably also ImageMagick, is 7 ("squirrel"), which is very high and very slow as you noted. This is much like Brotli defaulting to the highest setting (-11) because both assume that you can spend much more time in compression. If it's not your assumption you should change that.

I do feel that this aspect of JPEG XL is not well communicated. Normally you have a single knob (quality) and increasing quality means more time spent for compression, but in JPEG XL this can be easily decoupled---very useful concept but also relatively alien one. A common mistake is to set the highest effort (9, nicknamed quite appropriately, "tortoise") for speed benchmark, which suggests that there will be people doing this in the production and complaining that JPEG XL compression is very slow, not realizing they can live with much lower efforts.

Re: Optimizing images with the HTML <picture> tag

#44
post #22

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?

[deleted]

Re: Optimizing images with the HTML <picture> tag

#45
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.

Thank you for the hint. I’ll revisit trying that when I can spare some time. I vaguely recall that doing so interfered with the way I ensured the consistent passepartout around my photographs while being responsive, but then again we are talking about CSS here and I just may have gotten things the wrong way around.

Re: Optimizing images with the HTML <picture> tag

#46
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…

> I’ll also add a super low-res placeholder image in the background to prevent the slightly jarring layout jumps on slow desktop connections.

I try that, but don't end to work fine, thanks to the alt text showing, and displacing the background placeholder image

Re: Optimizing images with the HTML <picture> tag

#47
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…

Are you sure about the browser support for WEBP being low? I thought that it didn't work with Safari before but they added it?

Re: Optimizing images with the HTML <picture> tag

#48
post #47
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…

Are you sure about the browser support for WEBP being low? I thought that it didn't work with Safari before but they added it?

Actually, no. I started some projects in meat space in 2020 and did not yet find time to check in on this (or to add newer photographs, fwiw). I’ll have another look at the current support. Thank you for reminding me.

Re: Optimizing images with the HTML <picture> tag

#49
post #22

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?

It could be used but this really seems like websites trying to "fix" browser UX. In cases like this where the problem is generic it seems like it is best for the browser to provide the UX it thinks is best for the users (possibly with preferences to allow the user to decide globally without needing to configure every single site).

Re: Optimizing images with the HTML <picture> tag

#50
post #45

Earlier quoted context omitted.

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

Thank you for the hint. I’ll revisit trying that when I can spare some time. I vaguely recall that doing so interfered with the way I ensured the consistent passepartout around my photographs while being responsive, but then again we are talking about CSS here and I just may have gotten things the wrong way around.

As a secondary tip: I believe you need to make sure that one of width or height is set to “auto” (in CSS). There was a good post on this on either CSS Tricks or SmashingMagazine. If I get some time I’ll try to find it and link it.
Post reply on HN