Allow specifying thumbnail image resolution for websites

[yuxi-liu-wired]

Description

For generating static websites, the thumbnail image can be unnecessarily large. It would be cumbersome to manually create a thumbnail image for the preview. It would be good if the user can specify in the YAML the desired width/height/aspect ratio, and let the generator compile it.

Rescaling images can be done by convert, imagemagick or Python Pillow, or some other lightweight tool. Apparently webp is recommended for now? See https://web.dev/articles/serve-images-webp.

According to Frequently Asked Questions  |  WebP  |  Google for Developers, HTML allows <picture> to specify alternative formats, which means if webp is not supported, another format can be fallbacked..

The following is my idea of what it could look like:

---
title: "Test"
format:
  html:
    toc: true
image: "figure/banner_1.png"
image-width: 500
image-aspect-ratio-preservation: true
image-format: webp
---

Also, it might be useful to try avif too. There is a node package for it. lovell/avif-cli: Command line utility to convert images to AVIF, requires Node.js 14.15.0+.