代码之家 › 专栏 › 技术社区 › Tom

在HTML和CSS中为页面加载指定图像尺寸

pageload dimensions image css html

9

Tom · 技术社区 · 14 年前

我从很久以前的某个地方学到了指定宽度和高度 <img> HTML文档中的元素加快并改进了页面加载体验,并且通常遵循以下做法:

<img src="" width="100" height="100" />

我现在面临这样一种情况:我在一个页面上有大量的图像,我更愿意通过CSS设置维度,以便更容易控制和减少重复的HTML代码:

.whatever img {width: 100px; height: 100px;}

虽然这不是一个非常严重的问题,但我想知道在CSS中声明维度是否与在HTML中声明维度有相同的好处,或者是否应该直接在HTML中完成?

任何见解都是受欢迎的。

谢谢

2 回复 | 直到 14 年前

1

12

Pekka 14 年前

我想如果样式表立即可用,那么图像尺寸将立即应用于布局,这是整个练习的重点。

这个猜测得到了 Google's pagespeed rules . 他们似乎可以用这种方式指定图像(强调我的):

为所有图像指定宽度和高度可以通过消除不必要的回流和重绘来实现更快的渲染。

当浏览器布局页面时,它需要能够围绕可替换的元素(如图像)流动。它甚至可以在图像下载之前开始呈现页面,前提是它知道包装不可替换元素的尺寸。如果在包含的文档中未指定任何维度,或者指定的维度与实际图像的维度不匹配,则浏览器将要求在下载图像后进行回流并重新绘制。要防止回流,请在HTML中指定所有图像的宽度和高度 <img> 标签, 或在CSS中 .

2

1

transistor09 7 年前

在属性中定义宽度和高度(与在CSS中相反)的关键区别在于数据 ,不是表示参数。想象一下管理下面的样式表

img[src='/images/tree.jpeg'] {
    width: 100px;
    height: 100px;
}

这不必要地将CSS与图像纠缠在一起。它还限制了自适应布局,即当推断出图像的某个维度时(例如。 width: 100% ).

另外,考虑CSS规则,比如 object-fit . 困惑什么 width 和 heigth 样式属性则意味着可能出现。