Images

The template uses getAreaImageOrPlaceholder() and the setting Show image placeholders is at its default, For logged in users, which includes site members. On a membership site set it to Never, or use getAreaImage() with an isBlank() check in templates members see.

The site setting Generate picture tag is on. Every image rendered through getHtml(), and every image in rich text, becomes a <picture> with a WebP source, an original-format source and an <img> fallback, plus 2x versions when the image was resized and the original is large enough. Your attributes are on the inner <img>. Inside a hand-written picture element use getPath(), not getHtml().

A converted path was put into a plain <img src> or a CSS background, where there is no negotiation. Render through getHtml() with picture tags on, so the browser chooses by type, or keep the original format for a plain src. Note that when no image service can produce the WebP, the original file is delivered under the .webp URL, which browsers accept; so check the response before blaming the browser.

The strategy: fit crops to fill the box, auto scales to fit inside it, exact and square stretch, portrait currently errors and should be auto with only a height. Blur is an original smaller than the requested size, or a 1x image on a high-density screen without the 2x source, which is only offered when picture tags are on, the image was resized in the template and the original is at least one and a half times the requested size. Compression quality is a setting, judged on real images with the URL parameters l and q.

By design: a pixel width or height in a style passed to getHtml() is taken out of the style, used to resize the image, and emitted as width and height attributes, so a 3000-pixel file is not downloaded to show at 300. Values in other units stay in the style. Resize explicitly with getResized() and style the element with a class.

Every resized or converted version is generated on its first request and cached, and the page itself is cached for anonymous visitors after its first render. A deploy or a cache purge resets both. Expect it, and warm the key pages after a deploy by requesting them; keep the set of sizes small so there are fewer versions to generate; and put the same call order (resize, then convert) in every template, or the cache holds every image twice.

The requested size equals the original, so nothing is resized. Then: the resize request is invalid (fit with one dimension, an unknown strategy), and on an image straight from a layout area the platform logs it and returns the full-size original; the filename is of type file, which cannot be transformed; no w or h parameter is present; or no image service could do the work and the original was delivered. Check the resize arguments first.

Import external images is off by default, and it acts on save: migrated rich text that was never re-saved with the setting on keeps hotlinking the old site. Turn it on, re-save the records (in the admin or through the API), check the file manager, and turn it off again. Two sites that had a file at the same path share one copy, so check logos and other common paths after the import.