Specify explicit width and height for picture tag

Question

Lighthours and Pagespeed insight keep telling me to define an explicit width and height for my images. But most of my images comes from picture tags since mobile and desktop image sizes are different. How can I provide different width and Height values according to the selected image?

<picture>
  <source media="(max-width:767px)" srcset="img_pink_flowers_small.jpg">
  <source media="(min-width:768px)" srcset="img_pink_flowers_large.jpg">
  <img src="img_pink_flowers_small.jpg" width="?" height="?">
</picture>

Could this be helpful [Image elements do not have explicit width and height](https://stackoverflow.com/a/65077326/15545116) — Anton, Sep 14 '21 at 18:14

score 21 · Accepted Answer · answered Oct 15 '21 at 17:28

21

In the future, you can do this:

<picture>
  <source media="(max-width:767px)" width="320" height="480" srcset="img_pink_flowers_small.jpg">
  <source media="(min-width:768px)" width="1920" height="1080" srcset="img_pink_flowers_large.jpg">
  <img src="img_pink_flowers_small.jpg" width="1920" height="1080">
</picture>

In Chrome it is already done - example

answered Oct 15 '21 at 17:28

Web Master

327
1
3
13

2

Firefox has an issue displaying the correct dimension of the image. You need to add `img{width: auto;}` to your CSS. – Daryl Malibiran Jul 29 '22 at 01:39

score -1 · Answer 2 · edited Oct 11 '22 at 04:42

Add the real file width and height to your default img tag, no matter which file source does finally takes. That will probably calm Lighthouse and PagesSpeed. Doing so will improve the rendering of the image as the browser does not need to download the whole image prior the render because you already provide the size. However if you want to provide also the source size, then you'll have to use the sizes attribute:

Sizes

Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in srcset to use. Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example).

The sizes attribute has an effect only when the element is the direct child of a <picture> element.

You can also do it directly over the img tag:

    <picture>
      <img srcset="img_pink_flowers_small.jpg 320w,
             img_pink_flowers_medium.jpg 480w,
             img_pink_flowers_large.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="img_pink_flowers_small.jpg" width="280" height="460">
    </picture>

The second value of each size set is the real width of the image. While the first one is equivalent to the media attribute. The last one does not use media value as is the one set for any other screen size.

score -3 · Answer 3 · answered Sep 11 '21 at 23:02

When it comes to images, it is better to make more than one copy of the image for each specific size, a copy, for example

    <img 
    srcset="/example1.jpg 4025w
    , example2.jpg 3019w,
    example3.jpg 2013w,
    /example4.jpg 1006w " 
    src="example.jpg" 
    width="100px"
    height="100px"
>

in above example we use srcset attribute to add more than one copy for each screen size you can read more about that here

and about height and width you will add height and width attribute for default image

Mohammad Roshan · Answer 4 · 2021-09-18T09:58:50.067

-3

You see the warning because you didn't specify both width and height for your IMGs and to solve it you have to specify both of them.
Its depending on your project, but as your concern is just about desktop view and mobile view for your images, you better add max-width: 100% when you use fixed height and max-height: 100% when you use fixed width for your images,
and if not use both of them

see example below:

<img style="width:200px; max-height:100%"/>
<img style="height:200px; max-width:100%"/>
<img style="max-width:100%; max-height:100%"/>

edited Sep 18 '21 at 09:58

answered Sep 15 '21 at 23:27

Mohammad Roshan

18
2

This does not have anything to do with Taraka's issue / concern which is related with automatic tests warnings – Daniel Abril Sep 16 '21 at 09:23
1

seems you didn't get it. the warning is about he didn't specified both width and height. so when he used fixed width and didn't set height he or fixed height without setting width he get that warning. to fix that and still having his responsive image he should add min-width or min-height to his picture to get rid of warnings. @Daniel Abril – Mohammad Roshan Sep 18 '21 at 05:16
Excuse me Mr. Roshan, but I think you are the only one in this threat that did not understand the problem. It's not a matter of styling but performance, which is what Lighthouse and Pagespeed take care of. To improve render you should include the information through the HTML tags width and height, not in the CSS. – Daniel Abril Oct 07 '21 at 12:56
1

Thank You Mr. Daniel, I know that and I had the same issue before and I solve it by specify the width and height in CSS like I explain above. at least lighthouse didn't show me the warning again but I am not sure about the actual performance if you concern about it. – Mohammad Roshan Oct 09 '21 at 06:45
You may trick the testers, but your web won't perform better. On the other hand, you can't apply specific dimensions by CSS if you work with responsive techniques. So the HTML attribute provides better performance, accessibility and do not interferes in responsiveness. – Daniel Abril Oct 10 '21 at 17:27
1

Thank Mr. Daniel, but it was just about bypassing the error from lighthouse not the performance. Thanks for info anyway. – Mohammad Roshan Oct 11 '21 at 13:22

Specify explicit width and height for picture tag

4 Answers4

Linked