时间戳

首页 > 解决方案 > 使用源标签同时使用媒体和类型

html - 使用源标签同时使用媒体和类型

问题描述

我正在尝试使用 webp 图像来提高页面的性能，但我的实际 Safari 版本似乎还不支持 webp。所以基本上我想使用相同的图像，但使用另一个更受支持的扩展（尊重媒体）。

如何使用 media 和 type 属性来根据屏幕尺寸和浏览器支持来决定应该显示哪个图像？

仅供参考：我的页面是用 next.js 构建的，而不是添加任何库来执行此操作。

<picture>
  <source media="(min-width: 500px)" type="image/avif" srcset="https://avif.io/img/comparison.avif" /> <!-- Imagine that is an upscaled version for 500px -->
  <source media="(min-width: 500px)" type="image/jpg" srcset="https://avif.io/img/comparison.jpg" /> <!-- Imagine that is an upscaled version for 500px -->
  <source media="(min-width: 300px)" type="image/avif" srcset="https://avif.io/img/comparison.avif" />
  <source media="(min-width: 300px)" type="image/jpg" srcset="https://avif.io/img/comparison.jpg" />
  <img src="https://avif.io/img/comparison.avif" width="500px" />
</picture>

标签： htmlimage

解决方案

推荐阅读