如何提升网站图片加载速度 | CSS-Tricks

在下面嵌入的视频中，Jen Simmons 解释了如何通过使用宽度和高度属性来提高图片加载速度。问题在于，图片首次加载时会产生很多卡顿，因为在浏览器成功下载图片资产之前，img 的高度自然会为 0。然后它需要重新绘制页面，这会导致所有内容都被推开。我确实在大型新闻网站上多次遇到过这个问题。

总之，Jen 建议我们应该像这样向图片添加 height 和 width 属性

<img src="dog.png" height="400" width="1000" alt="A cool dog" />

这是因为 Firefox 和 Chrome 现在会考虑这些值，并在图片加载之前消除所有卡顿，即使您在 CSS 中使用流体宽度并因此导致高度未知覆盖这些值。这意味着内容将始终保持在相同的位置，即使图片尚未加载。过去，我在许多项目中将图片放置在页面下方，仅仅是为了防止这种卡顿。我认为这很好地解决了这个问题。

Aggelos

# 2020年2月19日

我一直以为这是多年的标准做法了

Chris Coyier

评论永久链接# 2020年2月20日

它确实曾经是，特别是在固定宽度设计中，其中宽度/高度属性实际上是图片渲染的尺寸。然后，当我们都开始使用灵活媒体时，这种情况就消失了。如今，很少见到不是max-width: 100%的图片。并且，一旦图片具有灵活宽度，就意味着高度在下载之前是未知的，因为高度基于图片的纵横比。

因此，此更改有点像暗送秋波，暗示一下——我们知道这并不是图片最终渲染的尺寸，这只是让你告诉我们其纵横比的一种方式，并且我们将根据此在流体设计中预留空间。这很酷。

James

# 2020年2月20日

这实际上是纵横比吗？例如，如果我们将文章中的数字分别替换为 4 和 10（或 2 和 5），我们会获得相同的好处吗？

Chris Coyier

评论永久链接# 2020年2月20日

是的！

匿名

# 2020年2月20日

不错。我们所有的图片都使用填充百分比作为纵横比技巧，因此在纵横比属性获得完全的浏览器支持之前，此方法的实用性不大。在此之前，为所有图片添加包装 div！

Mohamed Hussain S H

# 2020年3月10日

我们是否有任何 caniuse 页面来检查此功能在不同浏览器中的状态？…
这是否适用于普通的非替换 <div> 元素？如果不是，我们是否只能使用填充技巧来获得正确的纵横比而不会出现卡顿，或者我们可以使用 aspect-ratio css 属性
放置

img{ max-width:100%; height:auto}
 ```

with 

```html

<img width=16" height="9" src="test.png"/>

，此技术是否可以在没有卡顿的情况下工作？图片的计算宽度现在是多少？

Stefan

评论永久链接# 2020年5月31日

https://caniuse.cn/#feat=mdn-css_properties_aspect-ratio_internal-value

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。