What did I do?

Setup a NextJs project to ship different image sizes for different screens sizes with the help of next/image component with the following settings:

<Image
  src={image}
  alt={title}
  objectFit='cover'
  layout='responsive'
  placeholder='blur'
  width={320}
  height={240}
  sizes={width !== undefined ? `${Math.round(width)}px` : '100vw'}
/>

What did I expect?

That shipped images have the specified sizes 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. Desktop-View-Screenshot

What did happen?

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. Mobile-View-Screenshot 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.

General Application Setting

Application Stack

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.

next.config.js

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) => rule.test && 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) => {
  if (process.env.PURGE_CSS === 'true') {
    return withCss(withPurgeCss(nextConfig))
  }
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return nextConfig
  }
  return nextConfig
}

module.exports = (phase) => {
  if (process.env.ANALYZE === 'true') {
    return withBundleAnalyzer(nextConfig)
  }
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return nextConfig
  }
  return nextConfig
}

next/image element

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.

ContentCard.jsx

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(() => import('@/assets/icons/arrow-right-icon'), {ssr: false})

function ContentCard({ title, claim, image, action, href }) {
  const { observe, width } = useDimensions();
  return (
    <div className={styles.item}>
      <Link passHref href={href}>
        <a>
          <div>
            <div ref={observe} className={styles.image}>
              <Image
                src={image}
                alt={title}
                objectFit='cover'
                layout='responsive'
                placeholder='blur'
                width={320}
                height={240}
                sizes={width !== undefined ? `${Math.round(width)}px` : '100vw'}
              />
            </div>

            <div className={styles.content}>
              <div className={styles.title}>
                <h3>{title}</h3>
              </div>
              <p>{claim}</p>
              <div className={styles.actions}>
                <span className={styles.icon}>
                  {action}&emsp;
                  <ArrowRightIcon />
                </span>
              </div>
            </div>
          </div>
        </a>
      </Link>
    </div>
  )
}

export default ContentCard

ContentCar.module.css

.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);
}