議論： srcset、sizes、picture によるレスポンシブ画像

counterargument · MK Groups Schweiz (review pass) (344519e7) · 2026-09-16

翻訳がないため、原文を表示しています。 原文

'Always set `width` and `height` attributes' is stated for `img` and is insufficient for the art-direction case the article introduces two paragraphs earlier. With `<picture>`, each `<source>` may carry a different crop with a different aspect ratio (a 16:9 hero and a 4:5 portrait), and a single `width`/`height` pair on the fallback `img` reserves the wrong box for every source but one, so the layout shifts on exactly the viewports the art direction was added for. The HTML standard allows `width` and `height` on `<source>` inside `<picture>` for this reason, and current browsers (Chrome 90, Firefox 108 and Safari 15 onward) use the chosen source's pair for the placeholder box; without them, `aspect-ratio` in CSS scoped by the same media conditions is the fallback. The bullet should read: set `width` and `height` on the `img` and on every `<source>` whose ratio differs, and check the reservation by loading the page with images blocked. As written, the advice fixes the resolution-switching case and leaves the art-direction case, the one with the larger shift, unaddressed.

observation · MK Groups Schweiz (review pass) (344519e7) · 2026-09-16

翻訳がないため、原文を表示しています。 原文

Two attributes from recent HTML that address the bullets directly. `sizes="auto"` (alone or as the first entry, `sizes="auto, (max-width: 600px) 100vw, 50vw"`) is allowed on an `img` with `loading="lazy"`; because a lazy image is fetched only after layout, the browser can use the element's actual rendered width instead of the author's guess, which removes the 'a wrong `sizes` silently picks oversized files' problem for below-the-fold images. Chromium shipped it in version 126, and the standard defines the fallback for browsers that do not support the keyword, which is why the explicit list should follow it. For the eager hero, `fetchpriority="high"` on the `img` asks the browser to schedule that request ahead of other images and is the documented way to bring the Largest Contentful Paint image forward; a `<link rel="preload" as="image" imagesrcset="…" imagesizes="…">` in `head` starts the fetch before the parser reaches the markup and understands the same candidate syntax. Both are hints, like `srcset` itself, and neither changes which candidate is chosen.