如何使用SRCSET构建响应式图像

本文是Microsoft Web开发系列的一部分，探讨了响应式图像 - 创建网站的关键方面，这些网站可以在各种设备之间完美运行。 它不再是可选的；在我们的多设备世界中，这是必要的。

钥匙要点：

• >使用srcset>属性提供针对不同设备像素比的各种图像源。
• >与srcset>属性相对于视口指定图像显示大小，引导浏览器选择最佳映像。> sizes>利用
元素的增强灵活性，启用基于媒体条件（例如CSS媒体查询）的图像选择，并通过
• >属性来支持各种图像格式。<picture></picture>> type始终使用
属性作为缺少
• 支持的浏览器的后备。src srcset>使用Microsoft提供的工具彻底测试各种设备和浏览器的响应性和性能
• 理解响应式图像：

响应式图像将其表示形式调整到查看设备。 “最佳形式”是指不同的事物：

>根据屏幕尺寸显示不同的图像资产（例如，13.5英寸笔记本电脑与5英寸手机的不同图像）。

使用基于设备分辨率的不同图像（或设备像素比 - 设备像素与CSS像素的比率）。
选择图像格式（例如JPEG XR），如果由浏览器支持，则有可能获得更好的压缩。
• >
启用响应式图像：

>在存在较旧的脚本方法时，由于有多个下载或缺少图像的潜在问题，因此不建议使用它们。首选方法使用：

属性

1. srcset属性
2. sizes元素
3. <picture></picture>

>属性：

> srcset在潜入使用之前，让我们定义：>

>

设备像素比：srcset这是每个CSS像素的设备像素的数量，受：

设备像素密度（每英寸物理像素）：较高的分辨率设备具有较高的密度，因此在相同的变焦级别上具有较高的设备像素比。>

浏览器缩放级别：更高的缩放级别增加给定设备的设备像素比。

basic
2. 实现使用设备像素比的描述符：
>

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174027748422704.jpg"  class="lazy" alt="How to Build Responsive Images with srcset " />

• 1x：space-needle.jpg对于1.
的设备像素比。
• 2x：space-needle-2x.jpg对于2的设备像素比2
3x：
• 对于设备像素的比率为3> space-needle-hd.jpg

属性可作为无支持的浏览器的后备。 描述符指定图像宽度：src srcset w

<img  src="/static/imghw/default1.png"  data-src="images/space-needle.jpg"  class="lazy" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET构建响应式图像" >

<>>属性：

> sizes基于视口大小来控制图像大小，请在中使用>描述符。

>示例1（一半视口宽度的图像）：sizes> w srcset>

>示例2（基于视口宽度的响应尺寸）：

<img  src="/static/imghw/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET构建响应式图像" >

元素：

>

元素允许根据渲染尺寸和浏览器功能进行图像选择。 它包含

<img  src="/static/imghw/default1.png"  data-src="images/space-needle.jpg"  class="lazy"  sizes="(max-width: 40em) 100vw, 50vw" srcset="images/space-needle.jpg 200w, images/space-needle-2x.jpg 400w, images/space-needle-hd.jpg 600w" alt="如何使用SRCSET构建响应式图像" >

>，

，， and<picture>>属性的元素。 一个

（注意：图像源和大小是说明性的。）> <picture><source> srcset sizes mediatype <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174027748575415.png" class="lazy" alt="How to Build Responsive Images with srcset " /> </picture>结论：

响应式图像可以增强跨设备的用户体验。 实施它们以获得最佳网站性能。 Microsoft的更多资源和工具可用于跨浏览器测试和Web开发最佳实践。 详细的常见问题解答以下是有关

实施的常见问题。>

以上是如何使用SRCSET构建响应式图像的详细内容。更多信息请关注PHP中文网其他相关文章！