时间戳

首页 > 解决方案 > 为不同的屏幕尺寸和密度定义响应式图像的最佳方法是什么

html - 为不同的屏幕尺寸和密度定义响应式图像的最佳方法是什么

问题描述

我正在尝试根据用户的设备屏幕尺寸和屏幕密度找到在我的网站上显示响应式图像的最佳方式。我正在尝试按照优先级顺序找到一种方法来制定以下规则：

  1. 如果设备屏幕窄于 624px 或低密度 (1x)，请加载小 .webp 图片（如果浏览器无法管理 .webp 图片，请加载小 .png）

  2. 如果设备屏幕宽于 623 像素或高密度 (2x)，请尽可能加载大的 .svg 图像或 .webp 图像。如果浏览器无法管理 .svg 或 .webp 图像，请改为加载大的 .png。

上述规则是我能想到的最佳核心网络生命体征结果和最小化图像大小负载的最佳规则。

我想出了以下代码，它在可以处理 .webp 图像的小屏幕（小于 624 像素）的设备上运行良好：

<picture>
   <source srcset="small.webp" media="(max-width: 623px)" type="image/webp">
   <source srcset="big.svg" type="image/svg+xml">
   <source srcset="small.webp" type="image/webp">
   <IMG src="small.png" srcset="big.png 2x" width="683" height="967" alt="cat image"></picture>

但我似乎无法找到仅在高密度屏幕上加载 .svg 图像的方法。我为 .svg 定义尝试了以下代码，但即使是低密度屏幕也使用它：

 <source srcset="big.svg 2x" type="image/svg+xml">

根据我上面所述的规则，我找不到正确区分图像并确定其优先级的方法。

任何人都可以帮忙吗？

标签： htmlsvg

解决方案

推荐阅读