Hacker News new | ask | show | jobs
by lgreiv 1329 days ago
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
3 comments
randomguy0 1329 days ago
Set width and height to the ratio of the image to prevent those layout shifts.
link
lgreiv 1328 days ago
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.
link
randomguy0 1328 days ago
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.
link
ilaksh 1328 days ago
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?
link
lgreiv 1328 days ago
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.
link
Zardoz84 1328 days ago
> 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

link