如何在移动设备中显示更高分辨率的图像，在桌面显示更低分辨率的图像？

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 的图像，并且图像质量在移动版和桌面版中都非常好，但它让我遇到了 google pageSpeed 警告说：

图像元素没有明确的width和height

所以我决定使用<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-tag 是后备选项，如果上述媒体查询都不适合，浏览器将使用该选项。这就是它拍摄这张照片的原因。

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

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