4

While using srcset for responsive images, the code looks something like this:

<img 
src="dog.jpg" alt="a dog" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">

So, now when I am running lighthouse for that page, then it is saying that the image does not have width and height specified, which'll cause CLS.

Ok Understood, so now I have to specify the width and height... Now the code looks something like this:

<img 
src="dog.jpg" alt="a dog"
width="800px" height="440px" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">

But now, after specifying the width and height of this image, the srcset is not working (The specified width and height is overwriting my srcset rules).

So my question is how to specify width and height to this image along with keeping it responsive at the same time using srcset?

Thank you for your help.

For your reference I want to achieve something like this: Go to this page: https://web.dev/debug-web-vitals-in-the-field/ Then inspect the image on this page. See how they have specified the width and height and used srcset at the same time with the img tags.

jitesh
  • 53
  • 5

4 Answers4

1

I just got an answer to this problem. I fixed it by more observation and research. I thought to share it with others to help them if ever they encounter this. The final code for responsive image with width and height attribute will look like this:

<img 
src="dog.jpg" alt="a dog"
width="800" height="440" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">

I just removed the "px" from dimensions(width and height attribute) and that's it, it is working fine now.

jitesh
  • 53
  • 5
  • You're only using one image. So what does this really accomplish? My question is, how to set the width and height dynamically to avoid CLS in cases where multiple sizes of images are offered depending on device/screen size. Have you looked into this aspect by chance? – silencedogood Dec 20 '22 at 16:21
0

try this one.. 

.responsive {
  width: 100%;
  height: auto;
}
<img src="dog.jpg" alt="a dog" class="responsive">
Vijay Dwivedi
  • 172
  • 2
  • 12
  • Hi Vijay, the code you provided will cause CLS that is not good for SEO. I am looking for more SEO friendly code. – jitesh Apr 05 '21 at 07:12
0

.img{
  height:75%;
  width:auto;
  resize:both;
  min-height:200px;
  max-height:750px;
  min-width:auto;
  max-width:auto;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg/275px-Monasterio_Khor_Virap%2C_Armenia%2C_2016-10-01%2C_DD_25.jpg" class="img" alt="mountain"/>
tzvieli
  • 28
  • 4
  • Hi , the code you provided will cause CLS(Content Layout Shift) that is not good for SEO. I am looking for more SEO friendly code – jitesh Apr 05 '21 at 07:13
0
<img 
src="dog.jpg" alt="a dog"
width="800px" height="100%" 
srcset="dog-800.jpg 800w" 
sizes="(min-width:1000px) 800px, 80vw">
Sagar R Anghan
  • 21
  • 2
  • Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes – corsaro Apr 05 '21 at 08:32
  • Hi Sagar, the code you gave is also not working. The moment I am specifying the width and height of the image it is overwriting my srcset rules. – jitesh Apr 05 '21 at 12:50
  • I think you need to give specific size in pixels for both height and width. and your work is done with that. And may you get your desired output. Please, Try it at once, i think you will get your desired output. – Sagar R Anghan May 30 '21 at 05:55