网页中 img 标签未设置宽高属性会导致页面布局跳动吗

未设置宽高属性导致的布局跳动现象

网页中 img 标签未设置 width 和 height 属性时，浏览器在下载图片前无法预留显示空间。一旦图片加载完成，浏览器会根据图片原始尺寸将其插入页面，导致周围内容被迫重新排列。这种重新排列会使页面布局发生跳动，严重干扰用户阅读体验。

资料指出，这种布局跳动不仅让用户感到不适，还会导致浏览器重新渲染页面，从而降低页面性能。如果图片下方有大量文本内容，用户在阅读过程中突然遇到图片插入，会被迫中断阅读，造成注意力分散。因此，未设置宽高属性是导致页面布局不稳定的主要原因。

在 HTML 中为 img 标签指定 width 和 height 属性，可以让浏览器在下载图片前就预留出相应的显示空间。这样，当图片下载完成后，浏览器可以直接将其放置在预留位置，无需移动周围内容，从而避免布局跳动。

资料强调，设置宽高属性还能优化页面加载性能。浏览器不需要在图片加载后重新计算布局，减少了重绘和回流操作。如果图片下方没有其他内容，仅设置 width 属性即可，此时 height 会自动设置为保持图片原始比例的值。

要检查网页中 img 标签是否未设置宽高属性，可以打开浏览器开发者工具（按 F12），在 Elements 面板中查看 img 标签的属性。如果 width 和 height 属性缺失，说明图片未指定尺寸，可能导致布局跳动。

验证方法是在浏览器中故意将图片文件名拼写错误，例如将 dinosaur.jpg 改为 dinosooooor.jpg。此时浏览器不会显示图片，而是显示 alt 属性中的文本。如果发现图片加载后页面布局发生变化，说明未设置宽高属性是原因，建议添加 width 和 height 属性。

为了避免未设置宽高属性导致的布局跳动，建议在网页中使用图片前，先使用图片编辑工具将图片调整到所需的显示尺寸，并在 HTML 中指定 width 和 height 属性。这样可以确保图片尺寸与显示尺寸一致，避免浏览器重新计算布局。

资料还建议，如果必须通过 CSS 调整图片大小，应使用 max-width 或 width 属性，并配合 height: auto 来保持比例。同时，应避免在 HTML 中直接设置 width 和 height 属性来调整图片大小，尤其是当图片尺寸较大时，以免破坏图片比例或浪费带宽。