交流图像尺寸,最佳实践


11

如果您严格使用当前的最佳做法来制作HTML文档,而这种做法始终使样式不属于标记,那么您将如何最好地传达图像大小?

过去的最佳做法是希望图像具有图像的高度和宽度,因为它的渲染速度要比等待图像下载以获取尺寸的浏览器要快。但是这样做似乎违反了隔离文档的样式。

为每个图像添加一个id属性,并将高度/宽度放在CSS中?这会否定内联图像高度和宽度的渲染奖励吗?

Answers:


12

不建议在IMG元素中使用宽度和高度,这绝对是告诉浏览器图像的宽度和高度的最佳方法。竭尽全力去做另一种方式是多余的和不必要的(并且可能很愚蠢)。不要为自己或浏览器做任何不必要的工作。坚持有效的基础知识。


1
...并且ALT即使标签空白,也不要忘记标签,否则合规性检查人员会抱怨。
Talvi Watia

@Tchalvak对不起,但你错了。您可以通过服务器端编程和/或JavaScript动态覆盖宽度和高度。而且根据您的逻辑,您也不能覆盖内联样式。
约翰·孔德

糟糕,无论如何我似乎都对缺少CSS覆盖感到不对,!important因为CSS确实允许您覆盖width和height属性,因此最初使用width / height效果很好。现在,我仍然处于拒绝投票的位置。如果您想编辑答案,我会更改它。 耸耸肩 不是那么重要。
卡扎伊2011年

8

约翰·康德(John Conde)的回答很明确。图片具有宽度和高度-它是内容的一部分,而不是样式。因此,这里无需进行“分离”。

然而,有一个例外:CSS图像尺寸如果你有很多有用的图像都是一样的大小(例如缩略图)。在这里,最好使用CSS类来缩减HTML并加快开发速度。

对于包含按钮和图标的网站设计,最好的解决方案是CSS sprites。


+ 1,css子画面在站点速度上产生了可笑的差异。
卡扎伊2011年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.