如何解决如何使用 srcset 和大小将 JPEG / webp / jpg2000 / JPEG XR 与响应式图像结合起来?
我对如何使用响应式 srcset 图像最好地实现不同的下一代(JPEG / webp / jpg2000 / JPEG XR)图像格式感到非常困惑?
我希望为不同的屏幕宽度提供不同大小的图像,以及不同的下一代图像格式的不同分辨率。和一个后备。如何写下来,当我说:
4 种尺寸的 1 张图片,jpeg、webp、jpg2000、jpg xr 格式,并有 3 个不同的断点。
我以为我可以使用
解决方法
我想出了如何在标签内使用 srcset+sizes 的答案:
<picture class="my-first-class">
<source
type="image/webp"
sizes="(min-width: 701px) 22vw,(min-width: 1000px) 19vw,35vw"
srcset="
img/hilti-png/hilti-png_190.webp 190w,img/hilti-png/hilti-png_321.webp 321w,img/hilti-png/hilti-png_420.webp 420w,img/hilti-png/hilti-png_507.webp 507w,img/hilti-png/hilti-png_584.webp 584w,img/hilti-png/hilti-png_653.webp 653w,img/hilti-png/hilti-png_718.webp 718w,img/hilti-png/hilti-png_781.webp 781w,img/hilti-png/hilti-png_842.webp 842w,img/hilti-png/hilti-png_900.webp 900w,img/hilti-png/hilti-png_955.webp 955w,img/hilti-png/hilti-png_1006.webp 1006w,img/hilti-png/hilti-png_1060.webp 1060w,img/hilti-png/hilti-png_1111.webp 1111w,img/hilti-png/hilti-png_1160.webp 1160w,img/hilti-png/hilti-png_1210.webp 1210w,img/hilti-png/hilti-png_1260.webp 1260w,img/hilti-png/hilti-png_1309.webp 1309w,img/hilti-png/hilti-png_1353.webp 1353w,img/hilti-png/hilti-png_1380.webp 1380w">
<source
type="image/jpeg"
sizes="(min-width: 701px) 22vw,35vw"
srcset="
img/hilti-png/hilti-png_190.jpg 190w,img/hilti-png/hilti-png_321.jpg 321w,img/hilti-png/hilti-png_420.jpg 420w,img/hilti-png/hilti-png_507.jpg 507w,img/hilti-png/hilti-png_584.jpg 584w,img/hilti-png/hilti-png_653.jpg 653w,img/hilti-png/hilti-png_718.jpg 718w,img/hilti-png/hilti-png_781.jpg 781w,img/hilti-png/hilti-png_842.jpg 842w,img/hilti-png/hilti-png_900.jpg 900w,img/hilti-png/hilti-png_955.jpg 955w,img/hilti-png/hilti-png_1006.jpg 1006w,img/hilti-png/hilti-png_1060.jpg 1060w,img/hilti-png/hilti-png_1111.jpg 1111w,img/hilti-png/hilti-png_1160.jpg 1160w,img/hilti-png/hilti-png_1210.jpg 1210w,img/hilti-png/hilti-png_1260.jpg 1260w,img/hilti-png/hilti-png_1309.jpg 1309w,img/hilti-png/hilti-png_1353.jpg 1353w,img/hilti-png/hilti-png_1380.jpg 1380w">
<img src="img/hilti-png/hilti-png_781.jpg"
alt="hilti"
class="my class">
</picture>
,
需要 PICTURE
中的 IMG
元素作为不支持 PICTURE
的浏览器的后备。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。