In-body images size to the measure
Owner: Ivan Hawkes
references: be-best/layouts/_partials/images/boxes.html | be-best/layouts/_markup/render-image.html | be-best/layouts/_shortcodes/img.html

In-body images size to the measure

A Markdown image asks for variants wider than it is drawn.

_markup/render-image.html:21 and _shortcodes/img.html:34 wrote the hint (min-width: 1024px) 100vw, 50vw, and both laddered from 320 to 1920 (render-image.html:19, img.html:2). The images they write sit inside the .prose block of page/content.html, capped at --prose-measure, the 65ch a page hero takes too (p2-is-hero-images-use-the-prose-measure), so the hint named a box about three times the one the browser draws and offered widths that measure can never select.

Measured before the change: 51 in-body bigImgDiv pictures, of which 7 offered a variant wider than 1280w, 5 at 1600w and 2 at 1920w. The two 1920w webp files weigh 136 KB and 97 KB, and are the widest a browser can pick for a picture 600 pixels wide.

In-body images size to the measure

Acceptance Criteria

Notes