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
- 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%
- A number of pixels
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.