Rules I'm making up as I go along.

Images

Generally use colocated assets for now.

Preview image

Specify the preview image in page front matter extra.og_preview_img.

+++
...
[extra]
og_preview_img="<colocated path>"
og_preview_alt="<alt text for image>"
+++

The preview image will be used as the thumbnail alongside the page title in nav lists.

It will also be displayed right under the title block on the page (no shortcode needed to inject it).

Using FM attribute extra.og_preview_img generates OpenGraph image for sharing a link, too.

Shortcodes and macros

float shortcode - insert responsive image

Displays responsive image

{{ float(src=<colocated img>, 
        alt="<alt text>", 
        align=__{"left", "right", "center"}__ )
}}

<colocated img> : path to image (can be .png, .jpeg, .webp, .gif).
Path is relative to the .md file for the page.
Big image files are resized for smaller contexts.

align="left" : Floats image to left of container, constrains width to < 30% of container or > 120px, whichever is bigger.

align="right" : Same as above, but floats to right.

align="center" : Doesn't float the image, instead puts the image centered across the page. Constrains the height to no more than 1/3 of the view height and no less than 120px.

Macros

responsive_image()

responsive_thumbnail()

Generates small square (usually resized) image in <img> tag. This is used by default in lists of pages on under projects, but not posts, since the latter use the Playfair date. Usually 128px, can be 256px, which is generally too big.