CODEWITHSUNDEEP
htmlimagegoogle-pagespeedpagespeed-insights
Tharaka Nuwan
Tharaka Nuwan

Reputation: 782

Specify explicit width and height for picture tag

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>

Upvotes: 24

Views: 17242

Answers (5)

Alberto
Alberto

Reputation: 11

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 
  }
}

Upvotes: 0

Daniel Abril
Daniel Abril

Reputation: 454

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.

Upvotes: -2

Web Master
Web Master

Reputation: 525

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

Upvotes: 27

Mohammad Roshan
Mohammad Roshan

Reputation: 18

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

Upvotes: -3

Yazan Alnughnugh
Yazan Alnughnugh

Reputation: 128

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

Upvotes: -4

Related Questions