2015-09-22 45 views
0

我知道这个问题之前问。 他们大多数都是5-6岁,所以在最新的浏览器中添加或不添加原始img大小的高度和宽度?性能明智做或不加宽度和高度img标签

<img class="stars-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-128.png" height="128px" width="128px"> 

<img class="stars-img" src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/star-128.png"> 

的IMG的大小调整仍然会用CSS实现,所以它不是关于从HTML

回答

1

tl; dr:它对加载时间没有影响。

将宽度和高度添加到图片标签的好处是,浏览器将根据图片大小放置浮动文本,并避免在图片准备好加载时“跳跃”文本。

因此,如果您了解它们,那么添加尺寸是有意义的。如果你只是添加虚拟值,那么它是无用的,不应该这样做。

速度明智这实际上没有影响。 A 合理width="1000px" height="800px"有29个字节。

下行速率为24.0 Mbit/s,延迟为9.667 microseconds(此时光线传播距离为2898米)。使用56kbit调制解调器时,每张图片的时间为4.143毫秒。

即使您在一页上有10.000张图片,延迟也只会是96.67毫秒(56kbit为41.43秒)。并且花费更多时间来加载所有图像。

0

如果你仍然要风格与分离造型CSS,首先添加它有什么好处?

如果您担心性能,最好将图片作为上传所需的大小,这样您就不会加载比您需要的图片更大的图片。

+0

有时当你在桌面上时,img的大小需要与手机相比不同 – Ivo

+0

那么为什么不在CSS中使用媒体查询呢? – n8udd

+0

当然,我将使用媒体查询,但这是CSS的样式,我想知道如果性能明智的是最好告诉浏览器的原始高度和宽度在HTML – Ivo

0

如果可能的话,您应该指定imgages的大小,以便浏览器知道图像需要多少空间。这可以防止浏览器需要移动元素来为出现的图像腾出空间。

通常,如果您在HTML或CSS中设置尺寸,但将其设置在CSS中可能允许您为多个图像指定相同的尺寸,这并不重要。另外,随着CSS被缓存,移动样式以减小HTML大小是有意义的。

相关问题