如何在移动端显示高分辨率图像，在桌面端显示低分辨率图像?

Question

我使用了一些典型的引导网格，在桌面上有4张图像，在移动设备上有1张图像。像这样:

<div class="row">
<div class="col-md-3 col-sm-12">
<img src="image1_src">
</div>
<div class="col-md-3 col-sm-12">
<img src="image2_src">
</div>
<div class="col-md-3 col-sm-12">
<img src="image3_src">
</div>
<div class="col-md-3 col-sm-12">
<img src="image4_src">
</div>
</div>

浏览器中渲染的图像大小约为250px*250px，但这个分辨率对于移动设备来说是不够的，因为移动设备中的图像几乎是全屏的。我决定使用500px*500px分辨率的图像，图像质量在移动和桌面版本中都非常好，但它面对我的谷歌pagesspeed警告说:

图像元素没有明确的宽度高度和

所以我决定使用<picture>标签使用两个不同版本的图像。小的在桌面，大的在移动端!

<div class="row">
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image1_src">
<source media="(max-width:700px)" srcset="500px_image1_src">
<img src="500px_image1_src">
</picture>
</div>
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image2_src">
<source media="(max-width:700px)" srcset="500px_image2_src">
<img src="500px_image2_src">
</picture>
</div>
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image3_src">
<source media="(max-width:700px)" srcset="500px_image3_src">
<img src="500px_image3_src">
</picture>
</div>
<div class="col-md-3 col-sm-12">
<picture>
<source media="(min-width:701px)" srcset="250px_image4_src">
<source media="(max-width:700px)" srcset="500px_image4_src">
<img src="500px_image4_src">
</picture>
</div>
</div>

现在我面临一个新的问题，浏览器在桌面模式下自动选择分辨率较高的图像，而忽略其他图像。

Answer 1

这里有两个独立的问题:

第一:Google抱怨明确的宽度和高度。如果您为浏览器提供宽度/高度值，它将提供布局所需的空间，即使图像本身尚未加载。如果没有宽度/高度值，提供的空间将为零，直到图像被加载，导致布局移位。

第二:你希望提供不同分辨率的图像，因为现代智能手机的屏幕分辨率比普通桌面显示器高得多。通过使用图片标签，你可以告诉浏览器"这些是我的图片，请决定哪一张最适合当前的布局和分辨率"。图片标签中的最后一个img标签是后备选项，如果上面的媒体查询都不适合，浏览器将使用该选项。这就是为什么它拍了那张照片。

参见https://www.w3schools.com/tags/tag_picture.asp

另一种实现不同分辨率的方法是使用srcset。您可以在此页面找到非常详细的解释:https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images