HTML - 理解从 https://www.responsivebreakpoints.com 自动生成的代码 - Web 响应式图像

Posted 2023-02-22

【中文标题】HTML - 理解从 https://www.responsivebreakpoints.com 自动生成的代码 - Web 响应式图像

【英文标题】：HTML - Understanding automatically generated code from https://www.responsivebreakpoints.com - Web responsive images

【发布时间】：2022-01-14 01:59:43

【问题描述】：

我正在尝试制作一个网页，其中包含根据窗口大小改变大小的图像。我找到了以下网站： https://www.responsivebreakpoints.com

当您上传您想要响应的图像时，该网站会生成 Web 响应 html 代码（同时还会对其进行裁剪并为您提供所有不同的尺寸）。

我一直在看代码，我很难理解它：

<picture>
      <source
      media="(max-width: 767px)"
      sizes="(max-width: 1534px) 100vw, 1534px"
      srcset="
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_50.jpg 50w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_656.jpg 656w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_893.jpg 893w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1121.jpg 1121w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1291.jpg 1291w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1452.jpg 1452w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1529.jpg 1529w,
            milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
      <source
      media="(min-width: 768px) and (max-width: 991px)"
      sizes="(max-width: 1983px) 70vw, 1388px"
      srcset="
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_945.jpg 945w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1222.jpg 1222w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1349.jpg 1349w,
            milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
      <source
      media="(min-width: 992px) and (max-width: 1199px)"
      sizes="(max-width: 2400px) 60vw, 1440px"
      srcset="
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1068.jpg 1068w,
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1398.jpg 1398w,
            milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
      <img
      sizes="(max-width: 13688px) 40vw, 5475px"
      srcset="
            milkyway_a0ye1g_c_scale,w_480.jpg 480w,
            milkyway_a0ye1g_c_scale,w_1614.jpg 1614w,
            milkyway_a0ye1g_c_scale,w_2334.jpg 2334w,
            milkyway_a0ye1g_c_scale,w_2831.jpg 2831w,
            milkyway_a0ye1g_c_scale,w_3485.jpg 3485w,
            milkyway_a0ye1g_c_scale,w_4042.jpg 4042w,
            milkyway_a0ye1g_c_scale,w_4479.jpg 4479w,
            milkyway_a0ye1g_c_scale,w_4882.jpg 4882w,
            milkyway_a0ye1g_c_scale,w_5379.jpg 5379w,
            milkyway_a0ye1g_c_scale,w_5475.jpg 5475w"
      src="milkyway_a0ye1g_c_scale,w_5475.jpg" >
</picture>

尺寸和媒体有什么区别？据我了解， media="(max-width:767px)" 是一个条件，以下代码仅在窗口小于 768px 时才会发生。如果是这样，那么在尺寸上拥有更高数量的像素有什么意义？

【参考方案1】：

我在Sublime Text 3中做了一些挖掘，发现如果代码清洗干净，视觉效果是一样的：

<picture>
    <source
    media="(max-width: 767px)"
    sizes="100vw"
    srcset="
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_50.jpg 50w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_656.jpg 656w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_893.jpg 893w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1121.jpg 1121w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1291.jpg 1291w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1452.jpg 1452w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1529.jpg 1529w,
        milkyway_a0ye1g_ar_1_1,c_fill,g_auto__c_scale,w_1534.jpg 1534w">
    <source
    media="(min-width: 768px) and (max-width: 991px)"
    sizes="70vw"
    srcset="
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_945.jpg 945w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1222.jpg 1222w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1349.jpg 1349w,
        milkyway_a0ye1g_ar_4_3,c_fill,g_auto__c_scale,w_1388.jpg 1388w">
    <source
    media="(min-width: 992px) and (max-width: 1199px)"
    sizes="60vw"
    srcset="
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1068.jpg 1068w,
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1398.jpg 1398w,
        milkyway_a0ye1g_ar_16_9,c_fill,g_auto__c_scale,w_1440.jpg 1440w">
    <img
    sizes="40vw"
    srcset="
        milkyway_a0ye1g_c_scale,w_480.jpg 480w,
        milkyway_a0ye1g_c_scale,w_1614.jpg 1614w,
        milkyway_a0ye1g_c_scale,w_2334.jpg 2334w,
        milkyway_a0ye1g_c_scale,w_2831.jpg 2831w,
        milkyway_a0ye1g_c_scale,w_3485.jpg 3485w,
        milkyway_a0ye1g_c_scale,w_4042.jpg 4042w,
        milkyway_a0ye1g_c_scale,w_4479.jpg 4479w,
        milkyway_a0ye1g_c_scale,w_4882.jpg 4882w,
        milkyway_a0ye1g_c_scale,w_5379.jpg 5379w,
        milkyway_a0ye1g_c_scale,w_5475.jpg 5475w"
    src="milkyway_a0ye1g_c_scale,w_5475.jpg" >
</picture>

如您所见，尺寸现在只有图像要使用的屏幕百分比。其他参数什么也没做。我想，就像自动生成的代码中经常出现的情况一样，额外的东西是无用的，可以清理成更小的尺寸。 媒体更具限制性，因此不会查看大小参数。