我真的很困惑如何用响应的srcset图像最好地实现不同的下一代(JPEG/webp/jpg2000/JPEG XR(图像格式?
我想有不同尺寸的图像,不同的屏幕宽度,但也不同的分辨率,不同的下一代图像格式。还有退路。如何写下这一点,当我说:
1个图像有4种大小,具有jpeg、webp、jpg2000、jpg-xr格式,并具有3个不同的断点。
我想我可以使用<图片>元素,并且在该元素中我将使用<srcset>,但我只是在一个网站上读到:"<图片>元素的子元素<img>元素,并且该子项不应该具有自己的srcset和size属性,因为该功能将被转移到<来源>元素">
PICTURE
中的IMG
元素是不支持PICTURE
的浏览器的后备元素。
我找到了如何使用标签内srcset+大小的答案:
<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,
(min-width: 1000px) 19vw,
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>