Deth

For a while now, I have been considering how I handle my pictures here. I have been using a Zola (and before that, Hugo) short code that resizes them and generates the srcset but that seems to slow things down a little. As I add more pictures, it will get slower, I would imagine. It’s also less portable since I have to rewrite my short codes, and the next static site generator may not even have image processing capabilities built in.

I did add more steps that I have to do manually, but I’ve already been running exiftool to remove location data from the pictures that are at home.

exiftool -gps:all= static/images/SomeColor.jpg

jpegoptim static/images/SomeColor.jpg

My first order of business with moving away from image processing in the short code itself was to find a way to generate the images for the srcset that have the responsive images. I thought of a script, so I was googling to find some ideas of how to best approach it using FFmpeg or something to do the work. I stumbled upon srcset that would do the job for me. It’s written in Rust, but I have Rust installed anyway. I would like to take the time to try to learn it at some point. Maybe I’ll do that over the winter while there’s no Phillies to distract me. The Eagles only play once a week, and the Flyers are rebuilding so they still suck.

It’s not in the FreeBSD ports tree but I was able to git it and compile it myself with no issues.

That worked like a charm.

srcset -o images/srcset -q 100 -m 25 images/SomeColor.jpg

Running that gave me this

"images/SomeColor.jpg"

<img src="SomeColor/legacy.jpg" srcset="SomeColor/480w.jpg 480w,SomeColor/640w.jpg 640w,SomeColor/768w.jpg 768w,SomeColor/960w.jpg 960w,SomeColor/1024w.jpg 1024w,SomeColor/1366w.jpg 1366w,SomeColor/1600w.jpg 1600w,SomeColor/1920w.jpg 1920w" sizes="(min-width: 1024px) 50vw, 100vw" alt="A file named SomeColor">


Count: 1, Resized: 9, Traversed: 0, Skipped 0 
42.030056947s

Not only does it print the srcset, but it also outputs it in a text file in the folder with the images. That was handy because I could just do some fine-tuning with that instead of hard-coding the few pictures that I have, which are old and too small to generate some sizes.

One issue I did run into again was the fact that my phone(s) had rotated some pictures. I had to work around that with the Hugo short code, but Zola seemed to handle it out of the box. This method didn’t handle it well enough, so the resized images would show up sideways. I wanted to fix this once and for all. In my internet hunting, I found a tool for that too. I discovered exiftran which does the rotating for automatically based on the EXIF data.

exiftran -a -i images/SomeColor.jpg 

Eventually I will write a script to handle all the steps but I’m to tired today.