Improved image handling on this blog

My last post was delayed by the long desired improvement of the image handling facilities of this website. I implemented a basic “Photo” post type a long time ago, but always had to add pictures manually to blog posts by copying their urls and writing an <img> tag. I spent far too much time recently improving this, and other aspects of images on the site.

The main goal of making blog writing easier was achieved by adding a custom liquid (templating engine) tag to include images, using an image id. This tag generates the image tag with alt text pulled from the photo’s own data. I also added a variant which creates an html <figure>, which shows the picture in a box with a caption.

I also wanted images to be bigger. The desire for this was increased the recent acquisition of a much higher resolution screen that I am used to. Stuff begets stuff. I thought, “I know, I’ll use a picture tag, and srcsets!” Now I had two problems.

The picture tag allows for different versions of images. I decided to use it to provide the latest fancy compression with AVIF images, and a fallback to JPEG for older browsers. I assume this part works ok. The difficult part is getting browsers to select the correct size of image to load.

In srcset, I list various scaled versions of the image which are generated when a picture is uploaded. I hoped browsers would be able to work out which one to use based on the space available in the layout, but it seems this is not generally the case. There is a way to specify which one to load using media queries, but this is based on the size of the screen. Going from screen size to image size would require me to guestimate how much space each each image might get in the layout to specify things this way. After far too much time wasted on this project, I reverted to my previous way of handling it. What I do now is still generate the srcsets, but only with sources up to a maxim size I think is reasonable. Photos on their own page get size large, but in feeds they are limited to medium or small.

I also had “fun”* with EXIF based image rotation. To specify dimensions to the browser, I had to know if the image was rotated. I was doing this when processing uploaded images, but thought I might change that. Then it seemed they were being rotated anyway, and behaviour was different for JPEG and AVIF. I discovered that Firefox will rotate images based in EXIF tags itself, whether on their own page or included by html. That was very unexpected, and maybe caused part of the confusion.

* not fun

Update:

Loading the correct image size automatically seems to be working now. This was acheived by adding loading="lazy" to the <img> tag, as well as using sizes="auto".