使用 img srcset 处理响应式图像

Question

我使用 angular 和材质并使用 img srcset 来处理标题的响应图像。

这就是我目前正在做的事情：

<img srcset="../../assets/mtn-bg_600.jpg 600w,
      ../../assets/mtn-bg_960.jpg 960w,
      ../../assets/mtn-bg_1280.jpg 1280w,
      ../../assets/mtn-bg_1600.jpg 1600w"
 sizes="100vw"
 src="../../assets/mtn-bg_1600.jpg" alt="Header image">

我对如何使用 srcset 处理高分辨率图像感到困惑。我已经看到 srcset 的示例只有分辨率为 1x 2x 或带有媒体查询的图像。但想清楚如何处理高分辨率图像以及媒体查询。

我是否需要在 srcset 中添加具有尺寸的高分辨率图像，并且 img 元素会自动处理它。

我正在使用 flex-layout for material 为我的应用程序和 srcset 提供的默认断点。还请建议我是否需要考虑 srcset 的任何其他断点。

谢谢！

Answer 1

要深入了解 srcset 和响应式图像，MDN 网络文档“Responsive Images”是一个很好的资源。还有其他几篇文章只需搜索一下即可。

使用 x 描述符可以方便地在不同屏幕分辨率的屏幕上以一致的物理尺寸提供图像。

例如，如果您在标准屏幕上加载 900 像素宽的照片，您将希望在 1.5 倍屏幕上加载 1350 像素宽的照片，在 2 倍屏幕上加载 1800 像素宽等，以便它们看起来物理上 对观众来说也是如此。

代码将如下所示：

<img srcset="my-image-900w.jpg,
             my-image-1350w.jpg 1.5x,
             my-image-1800w.jpg 2x"
     src="my-image-900w.jpg" alt="how would you describe it?">

如果我的设备具有 2 倍像素密度的屏幕，它会仅加载 my-image-1800w.jpg 而忽略其他的。

为了决定选择什么宽度，我会匹配 css 媒体查询。然后，只要您有小屏幕的选项（例如 300w），您就应该准备就绪。我个人使用 boostrap 作为框架，所以我使用相同的宽度来加载我的响应式图像，加上大于 2000 像素的屏幕的组合大小。

希望这会有所帮助！