Add width and height attrs for local images

[runofthemillgeek]

Image render hook now computes width/height of local images and adds them as attributes. This patch also adds relevant CSS changes to prevent stretchy images.

The main reason for this change is to avoid content shifts when images load. Without providing width/height, browser doesn't have info to know the aspect ratio to reserve some space until the image loads. With this change, browser knows the intrinsic size and aspect-ratio to reserve space and avoid content shifts in the page.

Before (left) and after (right) (devtools 3g network simulation):

https://github.com/user-attachments/assets/86108bfa-e902-4266-ab16-fc45b783f5c3

I believe this also fixes an issue I face in Safari where sometimes, an image below the fold wouldn't load and thus have zero height because it has loading="lazy".

To avoid images getting stretched and images overflow/filling the entire screen when their intrinsic size is larger than the container size, I've added some CSS. A configurable max-height is present which is used for figure img elements. This especially helps when you have tall images like mobile screenshots.

Note that this change only applies to local images. It's possible to do it for remote images but that might open a whole can of worms which is not worth it.

Testing

I've tested this against the sample dev site as well as against my blog and looks good. I've also tried #full and #small variants and those seem to work fine too. Let me know if I missed any other special cases for figure img elements.

[tomfran]

Nice, thank you as always for the work!