I'm improving my application made in Nextjs, and I started for SEO optimization, PageSpeed recommends adding explicit width and height properties to image tags. When I use the component Image from "next/Image", It returns me the following:
<span style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
<img alt="my-img" sizes="100vw" srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=3840&q=75 3840w" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&w=3840&q=75" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;" />
</span>In NextJS it would be something like:
<Image
alt="my-img"
loading="eager"
layout="fill"
objectFit="contain"
src={myImg}
/>Well, I don't add the width and height properties to the Image component, because I need a responsive image. However, if I add the width and height properties, they are not reflected in the "img" tag. Is there a way to display these properties to improve SEO a bit?