Canvas’s included responsive image component renders smaller image, then has the image upscale to fill the width
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3550869. -->
Reported by: [mherchel](https://www.drupal.org/user/118428)
>>>
<h3 id="overview">Overview</h3>
<p>My component:</p>
<pre><div{{ attributes }}><br> {% include 'canvas:image' with {<br> src: image.src,<br> alt: image.alt,<br> width: 400,<br> height: image.height,<br> } only %}<br></div></pre><p>The issue is when rendering the responsive image, the largest size (within <code>srcset</code>) is 384px wide, although the image will then be rendered at 400px.</p>
<p>The (cleaned up) rendered HTML is </p>
<pre><img class="image" <br>src="/sites/default/files/2025-10/stage_0.jpg?alternateWidths=/sites/default/files/styles/canvas_parametrized_width--%7Bwidth%7D/public/2025-10/stage_0.jpg.webp%3Fitok%3DKg8ATRxO" <br>srcset="/sites/default/files/styles/canvas_parametrized_width--16/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 16w, <br> /sites/default/files/styles/canvas_parametrized_width--32/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 32w, <br> /sites/default/files/styles/canvas_parametrized_width--48/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 48w, <br> /sites/default/files/styles/canvas_parametrized_width--64/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 64w, <br> /sites/default/files/styles/canvas_parametrized_width--96/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 96w, <br> /sites/default/files/styles/canvas_parametrized_width--128/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 128w, <br> /sites/default/files/styles/canvas_parametrized_width--256/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 256w, <br> /sites/default/files/styles/canvas_parametrized_width--384/public/2025-10/stage_0.jpg.webp?itok=Kg8ATRxO 384w" <br>sizes="auto 100vw" <br>alt="stage" <br>width="400" <br>height="1365" <br>loading="lazy" <br>data-component-id="canvas:image"></pre><h3 id="proposed-resolution">Proposed resolution</h3>
<p>Canvas should include one size larger (in this case it looks like it'd be 640px width). The browser would then downscale the image as necessary.</p>
<p><img src="https://www.drupal.org/files/issues/2025-10-07/Home___My_Drupal_CMS_site.png" alt></p>
<h3 id="ui-changes">User interface changes</h3>
issue