为图片标签指定明确的宽度和高度

Question

Lighthours 和 Pagespeed 洞察力不断告诉我为图像定义明确的宽度和高度。但我的大部分图像来自图片标签，因为移动设备和桌面图像尺寸不同。如何根据所选图像提供不同的宽度和高度值？

<picture>
  <source media="(max-width:767px)" srcset="img_pink_flowers_small.jpg">
  <source media="(min-width:768px)" srcset="img_pink_flowers_large.jpg">
  <img src="img_pink_flowers_small.jpg" width="?" height="?">
</picture>

Answer 1

将来你可以这样做：

<picture>
  <source media="(max-width:767px)" width="320" height="480" srcset="img_pink_flowers_small.jpg">
  <source media="(min-width:768px)" width="1920" height="1080" srcset="img_pink_flowers_large.jpg">
  <img src="img_pink_flowers_small.jpg" width="1920" height="1080">
</picture>

在 Chrome 中它已经完成了 - example

Answer 2

CSS 内联尺寸 是过去、现在和未来浏览器都支持的解决方案。查看 常规加载演示 或 带有延迟加载的演示 。

HTML

    <figure class="ixi-picture" data-id="img-1">
        <picture class="ixi-picture__picture ixi-picture__placeholder">
            <source media="(min-width:768px)" srcset="img_pink_flowers_large.jpg">
            <source media="(max-width:767px)" srcset="img_pink_flowers_large.jpg">
            <img alt="" class="ixi-picture__img" src="img_pink_flowers_small.jpg">
       </picture>
   </figure>

关键的内联CSS（避免内容回流）

/* Img placeholder graphic */

.ixi-picture__placeholder {   
   background-color: #ffffd9; 
   display: inline-block;
}

/* Media queries for image sizes */

@media only screen and (max-width:767px) {
  [data-id='img-1'] .ixi-picture__img {
    height: 480px;
    width: 320px 
  }
}

@media only screen and (min-width: 768px) {
  [data-id='img-1'] .ixi-picture__img {
    height: 1080px;
    width: 1920px 
  }
}

Answer 3

将真实文件的宽度和高度添加到默认的 img 标签中，无论最终采用哪个文件源。这可能会让 Lighthouse 和 PagesSpeed 平静下来。这样做将改善图像的渲染，因为浏览器不需要在渲染之前下载整个图像，因为您已经提供了尺寸。 但是，如果您还想提供源大小，那么您必须使用 sizes 属性：

尺寸

是描述最终渲染宽度的源尺寸列表 源代表的图像。每个源大小由一个 以逗号分隔的媒体条件长度对列表。此信息 浏览器使用它来在布局页面之前确定哪个 在 srcset 中定义要使用的图像。请注意，尺寸将有其 仅当宽度尺寸描述符与 srcset 一起提供时才有效 而不是像素比值（例如 200w 而不是 2x）。

sizes属性仅在元素为

<picture>

元素的直接子元素。

您也可以直接在 img 标签上进行操作：

    <picture>
      <img srcset="img_pink_flowers_small.jpg 320w,
             img_pink_flowers_medium.jpg 480w,
             img_pink_flowers_large.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="img_pink_flowers_small.jpg" width="280" height="460">
    </picture>

每个尺寸组的第二个值是图像的真实宽度。而第一个就相当于media属性。最后一个不使用媒体值，就像为任何其他屏幕尺寸设置的那样。

Answer 4

对于图像，最好为每个特定尺寸制作多份图像副本，例如一份副本

    <img 
    srcset="/example1.jpg 4025w
    , example2.jpg 3019w,
    example3.jpg 2013w,
    /example4.jpg 1006w " 
    src="example.jpg" 
    width="100px"
    height="100px"
>

在上面的示例中，我们使用 srcset 属性为每个屏幕尺寸添加多个副本 您可以在此处

了解更多相关信息

关于高度和宽度，您将为默认图像添加高度和宽度属性

Answer 5

您会看到警告，因为您没有为 IMG 指定 width 和 height，要解决此问题，您必须同时指定它们。
这取决于您的项目，但由于您关心的只是图像的桌面视图和移动视图，因此当您使用固定高度和 max-height: 100% 时，最好添加 max-width: 100% 当您的图像使用固定宽度时，
如果不同时使用它们

请参阅下面的示例：

<img style="width:200px; max-height:100%"/>
<img style="height:200px; max-width:100%"/>
<img style="max-width:100%; max-height:100%"/>