Preparing Images for The Yawning Abyss

If I don't have a checklist I'll miss steps

These are the steps to prepare image files to be used on this site. The goal is to have images prepared, compressed into AVIF and JPG/PNG, and with all necessary metadata.

  • Start with the best quality original I have. Locate RAW files if possible.
  • Perform standard RAW to JPG processing. Using my current workflow on the full resolution image.
  • Resize to a maximum width of 1024 pixels.
  • Export as lossless TIFF file.
  • Apply watermark to resized image.
  • Apply output sharpening. Currently using NIK Sharpener Pro 3 - sharpen for display. Typically a setting of 30.
  • Convert lossless sharpened image to site formats
    • AVIF - though this may need to be done from a high quality jpg conversion.
      • Use Squoosh or avi-win-x64 --best -q 30 -e input.jpg -o output.avif.
    • JPG or PNG
      • Using magick input.tiff output.jpg and then Squoosh to shrink the resulting file.
  • Update EXIF information in the created files. Using Properties in Windows Explorer works fine.
    • Update Title, Subject, Author, Copyright, and check the dates.
  • Copy resulting images to a post’s folder.
  • Use the images with the figure_avif shortcode.
  • Store the complete set of images in the site info backup location. Not just the ones being used on the site.
    • Original image
    • Resized image
    • Watermarked image
    • Compressed images used in the site

 

Squoosh settings:

  • Max quality 25
  • Min quality 15
  • Effort - set to max

 

figure_avif shortcode

{{<
  figure_avif
  image="image_file.jpg"
  alt="Alternate text if the image is not displayed" 
  caption="Optional caption under the picture" 
  class="imagealigncenter" 
  width=100
>}}
  • class [optional] can be:
    • imagealignleft
    • imagealigncenter
    • imagealignright
  • width and height [optional] can be
    • A number of pixels width=100
    • A percentage - width=75%

If the width is 100% then the class aligns the caption and the image takes up the full width of the page.

The standard Markdown tag and Hugo shortcodes work as well.