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>

Elliellicott

Could this be helpful Image elements do not have explicit width and height – Subarctic

Answer 1

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

Halfbaked

Firefox has an issue displaying the correct dimension of the image. You need to add img{width: auto;} to your CSS. – Scimitar

Answer 2

I wrote this solution supported by past, present and future browsers. Check out the regular load demo or the demo with lazyload.

HTML

    <figure class="ixi-picture" data-id="img-1">
        <picture class="ixi-picture__placeholder">
            <source media="(min-width:768px)" srcset="img_pink_flowers_large.jpg">
            <source media="(max-width:767px)" srcset="img_pink_flowers_small.jpg">
            <img alt="" class="ixi-picture__img" src="img_pink_flowers_small.jpg">
       </picture>
   </figure>

Critical inline CSS (avoid content reflow)

/* Img placeholder graphic */

.ixi-picture__placeholder {   
   background-color: #ffffd9; 
   display: inline-block;
}

/* Media queries for image sizes */

@media only screen and (max-width:767px) {
  [data-id='img-1'] .ixi-picture__img {
    height: 480px;
    width: 320px 
  }
}

@media only screen and (min-width: 768px) {
  [data-id='img-1'] .ixi-picture__img {
    height: 1080px;
    width: 1920px 
  }
}

Gwinn

When linking to a website or project you are affiliated with, you must disclose your affiliation. Otherwise, your answers could be deleted for spam. Don't overtly promote your projects or websites for the same reason. See how to not be a spammer. – Ap

So, I added the "I wrote" sentence as disclosure of my affiliation and removed all links to my site. Is that enough? I still think the solution solves the problem. – Gwinn

That is enough for disclosure, yes. Just be sure to not overtly promote your projects, as mentioned in my previous comment, or it could still be deleted as spam. It's okay if some (but not all) of your answers include a link to something you made that helps to solve the problem, but in those cases you must still provide disclosure. An answer that solves the problem can still be spam. The difference is, a spam answer only exists to promote the thing being linked, while a good answer uses links to support what's already in the answer. – Ap

I appreciate what you shared @user2449529. Very thorough explanation and helpful demos. Must have taken you a lot of time and effort to create. Fortunately we now have a little over 94% support for specifying the source width and height, so that's the easier way now. – Vacillating

Thanks mbrinson, I’m glad you found it helpful. I had some fun with it, I guess. 94% support is nice but if for whatever reason you are working with the remaining 6% then I’m sure this method will be of interest – Gwinn

Answer 3

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.

Pleiades

Answer 4

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%"/>

Lachrymator

This does not have anything to do with Taraka's issue / concern which is related with automatic tests warnings – Pleiades

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 – Lachrymator

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. – Pleiades

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. – Lachrymator

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. – Pleiades

Thank Mr. Daniel, but it was just about bypassing the error from lighthouse not the performance. Thanks for info anyway. – Lachrymator

Answer 5

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

Hui