Image sizes

The wall draws each card at about 512 px and opens the item larger. An item that brings only image is often the original upload, which can be megabytes per card. A program looks for smaller copies, in this order:

1. The item’s own image_focus or image_full. When either is present, nothing below applies.
2. srcset on Level 1. With two or more width descriptors, the smallest copy at least 512 px wide becomes image, the smallest at least 1024 px becomes image_focus, and the largest becomes image_full. A recipe whose image field reads a srcset does the same, unless it names image_focus or image_full itself.
3. The site’s media.resize rules, in the manifest or in a recipe.
4. Image hosts that resize by URL. When the item gives the original’s width, a program does not ask for a copy wider than that. Wikimedia serves only fixed widths and scales a smaller original up, so a 300 px original keeps its own file as image, and an 800 px one gets the 500 px copy and keeps its own file as image_focus. Without a width the copies are requested as usual. @diazoma/adapters knows Wikimedia Commons, Cloudinary, imgix, Unsplash, Contentful, Sanity, Shopify, WordPress.com and Jetpack (i0.wp.com, *.files.wordpress.com), Squarespace, Flickr and Imgur.

In steps 3 and 4 the URL found becomes image_full, so the viewer still opens the original.

media.resize

"media": {
  "resize": [
    { "match": "/images/screen/", "image": "/images/thumb700x/", "image_focus": "/images/screen/", "image_full": "/images/large/" },
    { "match": "https://cdn.example.com/", "image": "{url_raw}?w=512", "image_focus": "{url_raw}?w=1024" },
    { "match": "https://img.example.com/", "image": "https://resizer.example/r?w=512&u={url}" }
  ]
}

• match is plain text that the absolute image URL must contain. Regular expressions are not used, so a rule cannot hang the program.
• A size that contains {url} is that template with the whole URL put in, percent-encoded with encodeURIComponent so it is one query value (the third rule above). {url_raw} puts the URL in as it is, for the rare host that wants it in the path or unencoded (the second rule).
• Any other size replaces the first occurrence of match.
• The first rule that matches is used. A size it leaves out is not set.
• At most 20 rules, and match at most 200 characters.
• A result that is not an http(s) URL is dropped.

For feeds

The simplest way is to serve the sizes yourself: put a 512 px copy in image, a 1024 px copy in image_focus and the original in image_full. Then none of the steps above is needed.

From RSS

RssAdapter takes a sizes option, a function that gets the absolute image URL and returns the copies. See the Adapters API.