Using image width and height in case of responsive images

[monami-work]

<nuxt-img
            src="/images/abc.png"
            sizes=" xl:100vw xxl:100vw xxxl:100vw"
 />

works fine but in lighthouse, it generates an warning like the following - Set an explicit width and height on image elements to reduce layout shifts and improve CLS

As per this documentation - https://image.nuxtjs.org/components/nuxt-img Use original image width/height for responsive images (when using sizes)

Width of my actual image is 1930 and height is 333 So when I try to add width and height as 1930 and 333, the image is not responsive anymore. Am I missing something here ? please advise.

<nuxt-img
            src="/images/abc.png"
            width="1920"
            height="333"
            sizes=" xl:100vw xxl:100vw xxxl:100vw"
          />

[tusamni]

Did you define the xxxl size in the module options? Otherwise it's specified as 2xl in the docs.

[tusamni]

Also, can you post the output of the <nuxt-img> tag when you apply the width and height?

[monami-work]

Did you define the xxxl size in the module options? Otherwise it's specified as 2xl in the docs.

image: { // The screen sizes predefined by @nuxt/image: screens: { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, xxl: 1536, xxxl: 1920 } },

I declared image in nuxt.config.js like this.

[monami-work]

Also, can you post the output of the <nuxt-img> tag when you apply the width and height? The image stops being responsive. If I minimize the browser window width, the image width remains same as what I specified against the width attribute. In my case 1920.

[tusamni]

Sounds like it could be a CSS issue to me? What styles are applied to the image?

[monami-work]

Sounds like it could be a CSS issue to me? What styles are applied to the image?

<nuxt-img
            src="/images/abc.png"
            sizes=" xl:100vw xxl:100vw xxxl:100vw"
 />

This is working absolutely fine. The image is responsive if I remove width and height attributes. Would it have worked in case there was any issue related to the CSS ?

[justinmetros]

@monami-work can you try somewhere in your css the following?

img {
  display: inline-block;
  width: 100%;
  height: auto;
}

Or if you need more specific css apply similar to class on your <nuxt-img /> element.

[monami-work]

@monami-work can you try somewhere in your css the following?

img {
  display: inline-block;
  width: 100%;
  height: auto;
}

Or if you need more specific css apply similar to class on your <nuxt-img /> element.

Thanks. It worked.

[monami-work]

@justinmetros , How do I use preload along with nuxt-img ? I tried the following, but it does not seem to work -

<nuxt-img
            src="/images/abc.jpg"
            width="1920"
            height="333"
            sizes="sm:100vw md:100vw lg:100vw xl:100vw xxl:100vw xxxl:100vw"
            format="webp"
            quality="100"
            class="imgNuxt"
          />

nuxt.config.js file -

link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "preload",
        as: "image",
        href: "/images/abc.jpg",
        imagesrcset:
          "_nuxt/image/ec4e01.webp 1920w _nuxt/image/8d3b17.webp 1536w _nuxt/image/4732df.webp 1280w _nuxt/image/d5a381.webp 1024w _nuxt/image/cd9e61.webp 768w _nuxt/image/803ab5.webp",
        imagesizes: "100vw"
      }
    ]

my actual image is within a folder called "images" under static folder and the images for different width is getting generated within ....dist_nuxt\image folder

[luksak]

Is there a way to set the width and height attributes to the dimensions of the source image? I'd like to use intrinsicsize to prevent layout shift while the page is loading like this:

img {
  aspect-ratio: attr(width) / attr(height);
}

Here is some background information: https://developer.mozilla.org/en-US/docs/Web/Media/images/aspect_ratio_mapping

[luksak]

I guess there isn't a solution at the moment. Or has anyone found an approach to this?

[ThornWalli]

Maybe a custom provider will help here?

I would like to work with accurate images, so I added a modifier ratio.

e.g.

import { withBase, parseURL } from 'ufo';
import { createOperationsGenerator } from '~image';
const contentfulCDN = 'https://images.ctfassets.net';
export const operationsGenerator = createOperationsGenerator({
  keyMap: {
    format: 'fm',
    width: 'w',
    height: 'h',
    focus: 'f',
    radius: 'r',
    quality: 'q',
    background: 'bg'
  },
  valueMap: {
    format: {
      jpeg: 'jpg'
    },
    fit: {
      cover: 'crop',
      contain: 'fill',
      fill: 'scale',
      thumbnail: 'thumb'
    }
  },
  joinWith: '&',
  formatter: (key, value) => `${key}=${value}`
});
export const getImage = (src, { modifiers = {}, baseURL = contentfulCDN } = {}) => {
  // ratio for height
  if ('ratio' in modifiers) {
    modifiers.height = Math.round(modifiers.ratio * modifiers.width);
    delete modifiers.ratio;
  }

  const operations = operationsGenerator(modifiers);
  const { pathname } = parseURL(src);
  const path = pathname + (operations ? '?' + operations : '');
  const url = withBase(path, baseURL);

  return {
    url
  };
};