3 ms·

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

by lgreiv 4y 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 https://44hz.de

deleted 4y ago
[deleted]
randomguy0 4y ago
Set width and height to the ratio of the image to prevent those layout shifts.
- lgreiv 4y 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.
  - randomguy0 4y 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.
Zardoz84 4y 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
ilaksh 4y 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?
- lgreiv 4y 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.

by lgreiv 4y ago

deleted 4y ago

[deleted]

randomguy0 4y ago

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

lgreiv 4y 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.
- randomguy0 4y 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.

Zardoz84 4y 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

ilaksh 4y 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?

lgreiv 4y 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.