Html 图像宽度/高度作为属性还是在CSS中？

指定图像高度和宽度的“正确”语义方式是什么？在CSS中

width:15px;

或内联

<img width="15"

（是的，我意识到从技术和最终用户的角度来看，这真的不重要。）
如果它是网站模板的一部分，我会将它放在CSS文件中

如果它只在一个页面上，那么它应该是内联的（或者在顶部特定于页面的CSS块中定义）。
它应该是内联的。如果您使用的是img标记，那么该图像应该对内容具有语义值，这就是为什么需要alt属性进行验证

如果图像是布局或模板的一部分，则应使用img标记以外的标记，并将图像指定为元素的CSS背景。在这种情况下，图像没有语义含义，因此不需要alt属性。我相当肯定，大多数屏幕阅读器甚至不知道CSS图像的存在。
我想说CSS

HTML是关于内容的，

CSS是关于表示的。
我认为它是内容的一部分，正如你提到的，就像src属性一样

另一方面，在html或css中不需要指定宽度或高度，尽管这可能有助于加快页面渲染速度
 我想说HTML

宽度和高度属性用于阻止页面以不连贯的方式加载和增长

如果你曾经阅读过一个页面上的文本块，但由于上面加载的图像太晚，它却被向下推，那么你知道这是多么令人沮丧

为每个图像添加一个ID来指定其宽度和高度将是可笑的，而且几乎与添加两个宽度/高度属性一样混乱

问题是Firefox没有使用“宽度”和“高度”属性来保留图像空间，但是，我很惊讶他们实际上没有更新它。
我可能错了，如果我错了，请找人纠正我。。。但我认为谷歌和其他一些搜索引擎索引了alt标签的内容

有时，为了设计美学，我创建了一个文本图像，使用的字体无法通过HTML获得，但可供Photoshop、Illustrator等使用。如果您想要创建一个精确的排版印象，其中包含文本信息，为了搜索引擎的缘故，唯一的方法是创建一个排版文本的图像，并将实际文本放在alt标记中

如果有人有更好的解决方案，我很乐意听到

同时，考虑到对我所描述的内容的需要，作为一种标准实践，投票选择HTML内联高度/宽度参数以及alt文本描述似乎是合理的。事实上，在这种情况下，它不仅仅是设计内容，而且在CSS和搜索引擎提出更好的解决方案之前，这种情况不应该是规则的例外。
高度和宽度应该包含在HTML中。原因是它在页面上创建了间距。如果由于任何原因，img无法加载（而且你是个好孩子，并且包含了alt.），浏览器将显示该帧（使用提供的w和h），其中包含alt

主要的有益原因是防止“弹出”效果。当浏览器加载页面时，有时更大的方面（如img）加载需要更长的时间，如果您没有在HTML中指定w和h，浏览器会暂时折叠该区域，认为它不在那里。然后，当它最终加载所有内容时，弹出到适当的位置

这尤其令人讨厌，但在计算机上仍然非常令人讨厌，因为你要单击一个链接，页面突然向下移动，而你不小心单击了错误的链接。
我认为这取决于你如何使用属性。如果你在一个列表或表格中设置多个图像的样式，以便它们正确布局然后在CSS中添加宽度/高度，以避免需要为列表中的每个图像添加另一组标记

ul.gallery img: { width:117px; } 

另一方面，如果要在某些内容中插入图像，并且图像需要有一定的大小才能使文档正常流动，则将其放入HTML。这样，您就不必为HTML中的每个不同图像弄乱样式表。这样，如果将内容更改为不同的图像，则可以删除总之，你的CSS中没有散落的代码残留要记得删除。
如果你查看HTML5规范，指定高度和宽度是一个选项，而不是一个要求。因此，代码在有或没有这些属性的情况下都是有效的

从实用的角度来看，如上所述，指定它们以防止页面回流是非常可取的。然而，那些建议它应该在html中，因为这忽略了浏览器在最初构建页面时使用css的事实。如果不这样做，页面将不得不为浮动元素、指定填充、margi重新绘制ns等

无论是用html还是css来指定，最好根据具体情况来判断。同样大小的大量图像可能最好使用css，一张带有html的图像。也就是说，如果您为图像指定其他样式（边框颜色、样式或半径、浮动等）在css中添加宽度和高度是有意义的

如果你在html中指定，你只能使用像素。如果你想指定百分比，你必须使用css

另一方面，我们鼓励使用ems&%而不是px，以避免用户更改浏览器设置等时出现问题，但图像总是以像素为单位。显然，使用px进行图像处理是有实际原因的。但是，将图像保留在px中似乎否定了不使用它们的论点。
电子邮件客户端如何处理ts将img约束处理为属性还是内联样式

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >











<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >