为图片标签指定明确的宽度和高度

Question

Lighthours 和 Pagespeed 洞察力不断告诉我为图像定义明确的宽度和高度。但我的大部分图像来自图片标签，因为移动设备和桌面图像尺寸不同。如何根据所选图像提供不同的宽度和高度值？

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

Answer 1

将来，你可以这样做：

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

在 Chrome 中它已经完成 -示例