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

Question

Lighthours和Pagespeed Insight一直提示我为我的图片定义明确的宽度和高度。但是我的大多数图片都来自于picture标签，因为移动设备和桌面设备的图片尺寸不同。如何根据所选图像提供不同的宽度和高度值？

<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>

- Tharaka Nuwan

---

这可能有帮助 图像元素没有显式的宽度和高度。 - Anton

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

- Web Master

---

Firefox在显示图像的正确尺寸方面存在问题。您需要在CSS中添加“img {width：auto;}”。 - Daryl Malibiran

Answer 2

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

引用：

sizes

是描述由源表示的图像的最终呈现宽度的源大小列表。每个源大小由媒体条件-长度对的逗号分隔列表组成。此信息可用于在布置页面之前确定浏览器要使用的srcset中定义的图像。请注意，只有在使用srcset而不是像素比值（例如200w而不是2x）提供宽度维度描述符时，sizes才会发挥作用。

当元素是<picture>元素的直接子元素时，sizes属性才有效。

您还可以直接在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>

每个尺寸集合的第二个值是图像的实际宽度，而第一个值相当于媒体属性。最后一个值不使用媒体值，因为它是为任何其他屏幕尺寸设置的。

- Daniel Abril

Answer 3

我编写了这个解决方案，支持过去、现在和未来的浏览器。请查看常规加载演示或带有懒加载的演示。

HTML

    <figure class="ixi-picture" data-id="img-1">
        <picture class="ixi-picture__placeholder">
            <source media="(min-width:768px)" srcset="img_pink_flowers_large.jpg">
            <source media="(max-width:767px)" srcset="img_pink_flowers_small.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 
  }
}

- user2449529

---

当链接到与您有关联的网站或项目时，您必须披露您的关联关系。否则，您的回答可能会被删除，因为被视为垃圾信息。出于同样的原因，请不要明显推广您的项目或网站。请参阅如何避免成为垃圾信息发布者。 - undefined

所以，我添加了“我写的”这句话作为我所属的声明，并删除了所有指向我的网站的链接。这样够了吗？我仍然认为这个解决方案可以解决问题。 - undefined

这已经足够透露了，没错。只是要确保不过分推广你的项目，就像我之前的评论中提到的那样，否则它仍然可能被删除为垃圾邮件。如果你的回答中包含一些（但不是全部）链接到你制作的有助于解决问题的东西，那是可以的，但在这些情况下，你仍然必须提供透露。一个解决问题的回答仍然可能是垃圾邮件。不同之处在于，垃圾邮件回答只是为了推广被链接的东西，而一个好的回答则使用链接来支持回答中已经存在的内容。 - undefined

Answer 4

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

请参见下面的示例：

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

- Mohammad Roshan

---

这与Taraka的问题/关注点无关，后者与自动测试警告有关。 - Daniel Abril

似乎你没有理解。警告是因为他没有指定宽度和高度。所以当他使用固定宽度但没有设置高度，或者使用固定高度但没有设置宽度时，就会出现这个警告。为了解决这个问题并仍然拥有响应式图片，他应该在图片上添加最小宽度或最小高度，以消除警告。@Daniel Abril - Mohammad Roshan

对不起，Roshan先生，但我认为您是这个威胁中唯一没有理解问题的人。这不是样式问题，而是性能问题，这正是Lighthouse和Pagespeed所关注的。要改善渲染效果，您应该通过HTML标签宽度和高度来包含信息，而不是在CSS中。 - Daniel Abril

谢谢丹尼尔先生，我知道这个问题，并且我以前也遇到过同样的问题，我通过在 CSS 中指定宽度和高度来解决它，就像我上面解释的那样。至少 Lighthouse 再也没有给我警告，但如果您关心实际性能，我不确定。 - Mohammad Roshan

你可能会愚弄测试人员，但你的网站表现不会更好。另一方面，如果你使用响应式技术，就无法通过CSS应用特定的尺寸。因此，HTML属性提供了更好的性能、可访问性，并且不会干扰响应能力。 - Daniel Abril

感谢Daniel先生，但这只是关于绕过Lighthouse的错误，而不是性能。无论如何，感谢您提供的信息。 - Mohammad Roshan

Answer 5

当涉及到图像时，最好为每个特定大小制作多个图像副本，例如一份副本。

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

在上面的例子中，我们使用srcset属性为每个屏幕大小添加多个副本。您可以在此处阅读更多相关信息。

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

- Yazan Alnughnugh