title: Img srcset with sizes not working as expected with responsive next/image being shipped on simulated mobile screen in chromium
body: <h1>What did I do?</h1>
  <p>Setup a NextJs project to ship different image sizes for different screens sizes with the help of <code>next/image</code> component with the following settings:</p>
  <pre><code>&lt;Image
    src={image}
    alt={title}
    objectFit='cover'
    layout='responsive'
    placeholder='blur'
    width={320}
    height={240}
    sizes={width !== undefined ? `${Math.round(width)}px` : '100vw'}
  /&gt;
  </code></pre>
  <h1>What did I expect?</h1>
  <p>That shipped images have the specified <code>sizes</code> for both desktop as well as mobile views in Chromium DevTools. For Desktop views, this seems to work as expected. As can be seen in the intrinsic (512px) and rendered (492px) width resolution of the image.
  <a href="https://i.stack.imgur.com/CelKC.jpg" rel="noreferrer">Desktop-View-Screenshot</a></p>
  <h1>What did happen?</h1>
  <p>For some reason I can not get my finger on, this does not happen for mobile views in Chromium. Here the intrinsic width resolution is 1024px although the rendered resolution is 492px as well.
  <a href="https://i.stack.imgur.com/Aqe7J.png" rel="noreferrer">Mobile-View-Screenshot</a>
  I honestly don't fully understand how next.config.js device and screen sizes relates to the sizes and layout settings on next/image components.
  Hoping someone in this forum can enlighten me.</p>
  <h1>General Application Setting</h1>
  <h2>Application Stack</h2>
  <p>With docker-compose on a dedicated Debian machine for staging with NextJs, Mongodb and some other micro services such as Redis and a Python worker with Fast-API.</p>
  <h2>next.config.js</h2>
  <pre><code>const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
  })
  
  const withCss = require('@zeit/next-css')
  const withPurgeCss = require('next-purgecss')
  
  const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
  
  const nextConfig = {
    webpack(config) {
      const fileLoaderRule = config.module.rules.find(
        (rule) =&gt; rule.test &amp;&amp; rule.test.test('.svg')
      )
      fileLoaderRule.exclude = /\.svg$/
      config.module.rules.push({
        test: /\.svg$/,
        loader: require.resolve('@svgr/webpack'),
      })
      return config
    },
  }
  
  nextConfig.i18n = {
    locales: ['de-DE', 'en-US', 'ja-JP'],
    defaultLocale: 'de-DE',
  }
  
  nextConfig.images = {
    deviceSizes: [
      256, 320, 492, 512, 640, 768, 896, 1024, 1152, 1280, 1408, 1536, 1664, 1792,
      1920, 2048, 2176, 2304, 2432, 2560, 2688, 2944,
    ],
    imageSizes: [32, 64, 96, 112, 128, 144, 160, 176, 192, 240],
    formats: ['image/avif', 'image/webp'],
  
    domains: [
      'upload.wikimedia.org',
      'wikimedia.org',
      'i.ytimg.com',
    ],
  }
  
  module.exports = (phase) =&gt; {
    if (process.env.PURGE_CSS === 'true') {
      return withCss(withPurgeCss(nextConfig))
    }
    if (phase === PHASE_DEVELOPMENT_SERVER) {
      return nextConfig
    }
    return nextConfig
  }
  
  module.exports = (phase) =&gt; {
    if (process.env.ANALYZE === 'true') {
      return withBundleAnalyzer(nextConfig)
    }
    if (phase === PHASE_DEVELOPMENT_SERVER) {
      return nextConfig
    }
    return nextConfig
  }
  </code></pre>
  <h2>next/image element</h2>
  <p>On an Image in a Card element I set sizes to generate scrset that ships more or less appropriate sizes of the image for different screen sizes.</p>
  <h3>ContentCard.jsx</h3>
  <pre><code>import Image from 'next/image'
  import Link from 'next/link'
  
  import styles from './ContentCard.module.css'
  
  import dynamic from 'next/dynamic'
  import useDimensions from 'react-cool-dimensions';
  const ArrowRightIcon = dynamic(() =&gt; import('@/assets/icons/arrow-right-icon'), {ssr: false})
  
  function ContentCard({ title, claim, image, action, href }) {
    const { observe, width } = useDimensions();
    return (
      &lt;div className={styles.item}&gt;
        &lt;Link passHref href={href}&gt;
          &lt;a&gt;
            &lt;div&gt;
              &lt;div ref={observe} className={styles.image}&gt;
                &lt;Image
                  src={image}
                  alt={title}
                  objectFit='cover'
                  layout='responsive'
                  placeholder='blur'
                  width={320}
                  height={240}
                  sizes={width !== undefined ? `${Math.round(width)}px` : '100vw'}
                /&gt;
              &lt;/div&gt;
  
              &lt;div className={styles.content}&gt;
                &lt;div className={styles.title}&gt;
                  &lt;h3&gt;{title}&lt;/h3&gt;
                &lt;/div&gt;
                &lt;p&gt;{claim}&lt;/p&gt;
                &lt;div className={styles.actions}&gt;
                  &lt;span className={styles.icon}&gt;
                    {action}&amp;emsp;
                    &lt;ArrowRightIcon /&gt;
                  &lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/Link&gt;
      &lt;/div&gt;
    )
  }
  
  export default ContentCard
  
  </code></pre>
  <h3>ContentCar.module.css</h3>
  <pre><code>.item {
    display: inline-block;
    width: 100%;
    height: 100%;
    /* height: 400px; */
    overflow: hidden;
    transition: 0.5s all;
    position: relative;
    text-align: left;
  
  }
  
  .item a:link {
    color: white;
    text-decoration: none;
  }
  
  /* visited link */
  
  .item a:visited {
    color: white;
  }
  
  /* mouse over link */
  
  .item:hover p {
    display: flex;
  }
  
  .item:hover .content {
    transition: 0.5s all;
    font-size: larger;
    height: 75%;
  }
  
  .item:hover .title {
    transition: 0.5s all;
    font-size: larger;
    height: 50%;
  }
  
  .item:hover .actions {
    transition: 0.5s all;
    display: flex;
    height: 25%;
  }
  
  /* selected link */
  
  .item a:active {
    color: white;
  }
  
  .content {
    position: absolute;
    bottom: 0;
    background-color: var(--primary-dark);
    height: 33.33%;
    width: 100%;
    padding-left: var(--size-1);
    display: flex;
    flex-direction: column;
  }
  
  .content p {
    display: none;
    margin-top: 0;
    padding: 0 var(--size-1);
  }
  
  .title {
    text-transform: uppercase;
    font-weight: bold;
    line-height: var(--size-1);
    margin: 0;
    position: relative;
    background-color: var(--primary-dark);
    width: 100%;
    padding-left: var(--size-1);
    display: flex;
    flex-direction: column;
  }
  
  
  .content h3 {
    font-size: var(--size-8);
    line-height: var(--size-8);
    margin-bottom: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
  
    /* margin: var(--size-1) 0; */
  }
  
  .item p {
    font-weight: normal;
    font-size: var(--size-7);
    line-height: var(--size-7);
    
    margin: 0;
  }
  
  .actions {
    display: none;
    font-size: var(--size-7);
    line-height: var(--size-7);
    font-weight: bold;
  }
  
  .icon {
    margin-left: var(--size-1);
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  
  .icon svg {
    width: var(--size-4);
    height: var(--size-4);
  }
  </code></pre>