htmlimagegoogle-pagespeedpagespeed-insights

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

  • 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