如何使用 srcset 和大小将 JPEG / webp / jpg2000 / JPEG XR 与响应式图像结合起来？

问题描述

我对如何使用响应式 srcset 图像最好地实现不同的下一代（JPEG / webp / jpg2000 / JPEG XR）图像格式感到非常困惑？

我希望为不同的屏幕宽度提供不同大小的图像，以及不同的下一代图像格式的不同分辨率。和一个后备。如何写下来，当我说：

4 种尺寸的 1 张图片，jpeg、webp、jpg2000、jpg xr 格式，并有 3 个不同的断点。

我以为我可以使用 元素，在那个元素中我将使用 ，但我只是在一个站点上阅读： “ 元素的子 元素是必需的，该子元素不应有自己的srcset 和sizes 属性，因为该功能将转移到 元素。”

解决方法

我想出了如何在标签内使用 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 的浏览器的后备。