Optimizing Images with the HTML Tag

Re:Optimizing Images with the HTML Tag by lgreiv on Sunday October 30, 2022 @03:30PM (#33397759)

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 the slightly jarring layout jumps on slow desktop connections.

In combination with static hosting from S3 with CloudFront for caching, handwritten CSS + JS (except from Turbo), this yields a close-to-SPA snappiness and feel even on meager connections (as tested from rural Germany, fellow Germans may understand the implications).

The picture tag and the aspect-ratio CSS rule are real MVPs for dealing with photographs.

[1] https://44hz.de

[ Parent | on HN ]

Re:Optimizing Images with the HTML Tag by randomguy0 on Sunday October 30, 2022 @06:57PM (#33399895)

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

[ Parent | on HN ]

Re:Optimizing Images with the HTML Tag by lgreiv on Monday October 31, 2022 @02:29AM (#33402636)

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.

[ Parent | on HN ]

Re:Optimizing Images with the HTML Tag by randomguy0 on Monday October 31, 2022 @05:47PM (#33413729)

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.

[ Parent | on HN ]

Re:Optimizing Images with the HTML Tag by Zardoz84 on Monday October 31, 2022 @04:27AM (#33403253)

> 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

[ Parent | on HN ]

Re:Optimizing Images with the HTML Tag by ilaksh on Monday October 31, 2022 @05:09AM (#33403465)

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?

[ Parent | on HN ]

Re:Optimizing Images with the HTML Tag by lgreiv on Monday October 31, 2022 @05:40AM (#33403648)

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.

[ Parent | on HN ]