在 HTML 中的图像上指定宽度和高度属性是不是仍然相关？

Posted 2023-03-05

【中文标题】在 HTML 中的图像上指定宽度和高度属性是不是仍然相关？

【英文标题】：Is it still relevant to specify width and heigth attribute on images in HTML?在 HTML 中的图像上指定宽度和高度属性是否仍然相关？

【发布时间】：2017-01-15 07:19:25

【问题描述】：

我找到了a similar question here，答案是：“您应该始终在图像标签中定义宽度和高度。”但它是从 2009 年开始的。

与此同时，前端发生了许多变化。我们现在都在进行响应式页面设计，同时针对多种设备和尺寸（移动设备、平板电脑、台式机...）。

所以，我想知道是否仍然需要指定宽度和高度属性，以及出于什么原因（响应、页面速度、SEO...）？

【问题讨论】：

您应该将属性从实际图像中删除并使用 css 设置它们的样式，但它们仍然是允许的 - w3.org/TR/html-markup/img.html（这只是我的意见）

我总是用 css 来设置图片的样式，但是因为我公司的代码审查，我必须添加属性。这对我来说很没有意义，但我不知道其他情况。

请注意，链接的answer 有一个编辑说明（至少在回流/重新渲染方面）在 html 文档中指定尺寸没有任何好处，（前提是 在 css 中指定）。

可能重复：***.com/q/32217863/3597276

@Michael_B 感谢您的链接，它非常有帮助！

【参考方案1】：

是的，您要声明 2016 年图像的宽度和高度。

让他们为视网膜做好准备

如果您希望您的图像支持 Retina，您应该定义一个低于实际像素的宽度和高度。如果图像是 800x600，请指定 <img width="400" height="300" />。

避免页面跳转

没有宽度和高度，图像不知道它有多大，这会导致页面在加载时出现不必要的跳转（它会重排）。声明高度和宽度可以解决这个问题。

注意：

具有定义宽度和高度的图像仍然可以响应。只需将max-width 和max-height 添加到您的CSS。这将导致图像在不适合屏幕时缩小（而不是放大）（see this sweet retina-ready, responsive kitten）。定义 min-width 和 min-height 会适得其反。 当您对所有屏幕尺寸使用单个（相对较大的）图像时，建议您对 JPG 进行大量压缩（大约 50%）以保持较小的文件大小。

【讨论】：

如果您将 min-width 设置为 img 让 min-height auto ，如果需要在此最小值以下减小尺寸，则此图像将失去其纵横比。所以它会打破响应式“规则”......

我已经用一个工作示例更新了答案。您不应将min-height 设置为auto，因为此值无效，请参阅属性值：w3schools.com/cs-s-ref/pr_dim_min-height.asp。

@JoëlBonetRodríguez 你可能正在寻找类似的东西，使用width: auto;:codepen.io/anon/pen/BLLWxx

难道这一切都不能用关键的 CSS 来代替吗？

是的，尝试在具有各种原生尺寸的动态图像数量的页面上执行相同操作。每次加载新图像时，您是否会编辑代码为每个添加媒体查询？不用了，谢谢。编程的基础是尽可能地自动化每项任务，并且您绝对假设您正在编写一个简单的 HTML + CSS，以及关于不包含其他内容以重新缩放单个图像的一部分的示例该怎么说.

【参考方案2】：

是的，在 HTML 中指定图像的宽度和高度属性仍然相关。

图像的加载时间通常比构成页面其余部分的 HTML 代码要长。因此，指定的大小是一个好主意 图像，以便浏览器可以在 页面，同时为图像留出适量的空间 仍在加载。

因此，在图片上指定宽度和高度属性将通过防止加载延迟来提高网页性能。

【讨论】：

省略宽度和高度不会导致加载延迟。会导致页面跳转。

【参考方案3】：

嗯，这个问题的基本答案（与大多数编码问题一样）是这样的：这取决于手头的情况。

我想说，始终指定图像的 height 和 width 属性的“最佳实践”对页面渲染速度有显着影响，这可以追溯到设计师使用表格和间隔 GIF 布局网站的时代.从那时起，我们已经取得了长足的进步。

未来的一个迹象是引入新的picture 元素正在起草到 HTML 中。 picture 元素实际上是现有 img 元素的包装器，它允许您通过 source 元素指定多个不同尺寸的图像，而用户代理本身实际上决定使用哪个版本。

<picture>
    <source media="(min-width: 64em)" src="high-res.jpg">
    <source media="(min-width: 37.5em)" src="med-res.jpg">
    <source src="low-res.jpg">
    <img src="fallback.jpg" >
    <p>Accessible text.</p>
</picture>

从上面的示例代码（取自Intel Developer Zone's article on the HTML5 picture element）可以看出，img 元素本身没有height 或width 属性。

以下是一些资源，可帮助您确定最合适的声明图像大小的方法：

Responsive Images Community Group W3C Working Group Note: Use Cases and Requirements for Standardizing Responsive Images WHATWG HTML Living Standard: The picture element

【讨论】：

首先，页面渲染速度的区别？你能提供一个来源吗？因为我觉得这很难相信。此外，不提及宽度和高度会在页面加载时导致不必要的页面跳转。 HTML5 没有解决这个问题。所以答案是肯定的，您应该始终提供宽度和高度。

英特尔开发者专区文章已经过时，标记错误。

【参考方案4】：

如果我们谈论的是“响应式”，您可以使用引导程序（如果不是，请开始这样做）。 处理图片时，应添加 img-responsive 类，这将在必要时修改图片的宽度，高度将自动调整，因此如果宽度减小，高度也会减小。

您将始终拥有保持其容器百分比相同且永远不会丢失纵横比的图像。

与 SEO 和图像大小声明无关。 页面速度将始终相同，因此如果图像为 800 x 600 像素，您将加载完整图像，即使您将其声明为 60 x 40 像素。

您必须认为，即使使用 img-responsive，此图像的最大宽度和高度也将是图像的实际尺寸。所以如果我们有一个 800 x 600 px 的图像，它不会放大它（因为它会变得失去质量）。

所以在 2016 年，建议不要声明图像的高度和宽度。而是使用 bootstrap 的 img-responsive 类，获得相同结果的其他响应式框架类，或者手工制作适当的 jquery 和 css 以达到相同的结果。

希望对你有帮助！

【讨论】：

.img-responsive 类做了 3 件事。它设置display: block;、max-width: 100% 和height: auto;。首先，这会导致图像不是内联的。你可能不想要那个。其次，这并不能防止页面跳转。所以它唯一有用的就是让图像在小屏幕上缩小。我不需要引导程序来添加max-width: 100%。你呢？

请注意，图像完全可以变得比实际像素大。我不会推荐它，但对于背景图像，这并不少见。使用width: 100; 或min-width: 100%; 可以做到这一点。

@JootS 使用 img-responsive 图像不能大于它们的真实像素。我不介意在图像上设置显示内联的原因，但如果您需要它，只需添加 div.[class of your div] > img.img-responsivedisplay:inline; 问题就解决了。 bootstrap 后面有 jquery 会影响 img-responsive （即使您在 html 标签上声明宽度和高度的原因是“即时”重新声明的。最简单、清晰和有效。你不想页面跳转？在上传之前添加一个 img pre-charger js 库或优化图像;-)

我们不是在这里解决问题。我们正在讨论最优雅的 img 标签解决方案。使用 CSS 将它们重置为默认值或使用 jQuery 设置高度和宽度不是很优雅。使用库来修复页面跳转就更过分了。

我正在解决您想象的问题。我没有“页面跳转”的问题，因为我在上传之前很好地优化了图像（使用渐进式 jpg）并且我使用的是完整的引导程序，只有当我需要它时我才修改 css 以获得我想要的界面。我同意你对图像威胁的看法，但现在如果你设置完整的响应页面（像往常一样），最好使用引导程序的类来处理它（这只是我的意见）。在 html 上使用固定值设置宽度和高度以便稍后使用 css 修改它可能会在处理某些脚本时导致调整大小问题，特别是在某些浏览器中。

【参考方案5】：

好的标准总是值得推荐的。通过一些额外的代码，很容易合并 img 标签的静态 (px) 值和 CSS 提供的通用 (em, %) 值。更简单的是，完全摆脱 img 标签并将图片设置为具有唯一 ID 的 div 的背景。如果您有多个图像，请使用精灵并将每张图片分配给其相应的 div。然后，您的标记来源将类似于<div id="image_001"></div> - 仅此而已。自行缩放；不需要像 JQuery 等臃肿软件。

【讨论】：

我认为考虑前景（内容）图像和背景（布局）图像之间的区别很重要。含义和用法有很大区别。

好点。但是，两者都可以通过添加 z-index 的相同方式实现。

前景我的意思是img标签。背景我的意思是CSS背景。您是否见过 CMS 在内容中包含背景图片？我也不。背景用于布局，img 标签用于内容。

使用img添加至少1个，通常是多个额外请求，使用sprite可以减少到1个单个请求。关于CMS，我不使用任何内容，但同意您的假设。但是，源通常是开放的，因此编辑所需的部分应该很容易。无论如何，我相信整个主题更多的是关于哲学而不是实际的编码。问候。

【参考方案6】：

img 元素具有宽度和高度属性，但在任何DOCTYPE 下都不需要它们。

宽度和高度属性仅是“必需”或与保留页面空间并防止页面在加载时四处移动有关 - 这很重要。这可以使用 CSS 来实现，而不是提供足够快的 CSS 加载 - 它很可能在图像之前加载，所以一切都应该很好。

也可以（并且有效）只指定一个属性，宽度或高度，浏览器将计算省略的值以保持正确的纵横比。

如果需要，您可以在属性中指定百分比值。你不需要为此使用 CSS，如果这是你的暗示的话。

此外，还需要添加 - 在 HTML5 下，宽度和高度只能采用像素值，即有效的非负整数。

是否使用宽度和高度属性取决于您的设计。如果您有很多不同尺寸的图片，您是想在 CSS 中合并所有尺寸还是将它们包含在 img 中？

【讨论】：

换句话说，它不是关于相关性，而是如果你想保留空间，即使禁用了样式表。因此，图像宽度和高度的最佳位置可能是在 html 电子邮件中。

img 元素是内容而不是布局。如果你有一个内容图像，你想要 300px 宽，而它有 600px 宽，你应该怎么做？是：您应该将宽度设置为 300（像素）并将高度（也）设置为原始高度的一半。这不应该在 CSS 中完成，因为 CSS 考虑的是布局，而不是内容。这样你的内容图像仍然可以通过 CSS 缩放，在视网膜显示器上看起来很清晰，在普通显示器上看起来很好。作为奖励，这也将防止可怕的页面跳转，请参阅：***.com/a/39563913/2397550