Image Processing

This is a chore that needs to be done before too much new content gets added. One of the weakest points in the scaffolding setup is how images get mashed directly into the output source no matter how they ended up in the drafts folder. There’s no checking of resolution, dimensions, filesize. It relies entirely on image processing to take place manually at the start of writing, rather than automatically as part of the promotion of a draft to the main site or the publishing step where output documents are generated.

It’s crucial for accessibility and for reducing CSS overrides and complexity to deliver smaller, more carefully constructed images and it’s crucial for creative focus (or laziness?) to deal with this automatically when selecting images to go with writing. This is probably the weakest part of the workflow of most current static site generators and it’s not immediately obvious how to deal with it at compile time.

To get started, I’m going to install the Sharp CLI package which provides a CLI interface via JavaScript, using the libvips image processing library. Looks like I can also bind libvips into Ruby, which might be an option later on for scouring and mashing bitrot effects over legacy content images in the background. I haven’t used this library before so I’m betting that Sharp is going to provide me with a better introduction to the underlying libvips capabilities than going into raw image manipulation directly.

Eventually, I’ll want to have images converted to aspect ratios that fit a defined modular rhythm. All I need now is a way to chop up images into separate units that support high DPI broadband and mobile screens with smaller thumbnails for lower resolution or lower bandwidth devices.

The key thing to understand in using this library for resizing is how it handles aspect ratio transformations. From the main API docs for resizing, I can pull out the following list and think about how it applies to the sorts of transformations I might want to do here.

For the purposes of responsive article images that expand to fill the given space in an editorial presentation, I can probably resize to a standard width then go up and down from that, keeping the original aspect ratio.

This would result in a whole set of images being generated for different resolutions. For example, if the input is picture.png from a random screenshot—height: 1088px, width: 753px—the result should look something like:

  • picture-raw.png (height: 1088px, width: 753px)
  • picture-small.png (height: 480px, width: 332px)
  • picture-medium.png (height: 800px, width: 554px)
  • picture-large.png (height: 1024px, width: 709px)

Alternative 2x or 1.5x images for high DPI would be exactly the same but with the dimensions for each breakpoint multiplied by the ratio.

Fit strategies for thumbnail images when a new size with a predefined aspect ratio is given:

  • cover preserves input aspect ratio and crops/clips to new size
  • contain preserves input aspect ratio with letterboxing
  • fill ignores input aspect ratio and fills to new size
  • inside preserves input aspect ratio and resizes to the max possible with dimensions less than or equal to both aspect ratios
  • outside the same as inside but the resized output is always greater than or equal to both aspect ratios

This is all the research and design thinking I need at this stage. Moving this along further requires more of an idea of how images are going to be used in different layouts which then requires Expanding Book Projects.