网页中 img 标签引用 SVG 时宽高属性的设置与必要性
在网页中嵌入 SVG 图片时，为 img 标签设置 width 属性可以防止页面布局在图片加载前后发生偏移。
计算宽高比并设置对应高度
当为 img 标签设置了 width 属性时，浏览器会根据该宽度调整图片显示尺寸。如果未设置 height 属性，图片加载完成后会按照其原始宽高比自动撑开高度，导致页面布局在图片加载前后发生变化。为了避免这种情况，需要根据图片的原始尺寸计算并设置对应的 height 值。例如，图片原始尺寸为 615x419 像素，若设置 width 为 400 像素，则 height 应设置为 400 x 419 / 615，即 273 像素。通过这种方式，图片在加载前和加载后都能保持相同的显示尺寸，从而避免布局跳动。
设置 width 和 height 属性不仅有助于保持布局稳定，还能提升用户体验。布局跳动会导致页面滚动条抖动或内容位置偏移，影响用户的阅读体验。通过预先计算并设置高度，可以确保图片在加载过程中占据固定的空间，避免页面发生不必要的重排。这种方法适用于所有需要预先指定显示尺寸的图片，特别是那些在页面中占据重要位置的图片。
使用 alt 属性提供图片描述
除了设置 width 和 height 属性外，为 img 标签添加 alt 属性也是优化图片显示的重要步骤。alt 属性用于描述图片的内容，当图片无法加载时，浏览器会显示 alt 属性中的文本。对于无法看到图片的用户，如屏幕阅读器用户，alt 属性提供了图片的替代信息。在 MDN 的示例中，alt 属性被设置为 'blueberries'，简洁地描述了图片的内容。
alt 属性的设置应准确且简洁，避免使用无关信息。在示例中，alt 属性仅包含图片的主要对象名称，没有添加额外的描述性文字。这种做法有助于提高图片的可访问性，同时避免因描述过长而影响页面加载速度。对于复杂的图片，alt 属性应提供足够的上下文信息，帮助用户理解图片的内容和用途。
验证图片显示效果与布局稳定性
完成图片设置后，可以通过浏览器开发者工具检查图片的显示效果和布局稳定性。在开发者工具中，可以查看 img 元素的 computed 样式，确认 width 和 height 属性是否正确应用。同时，观察页面在图片加载前后的布局变化，确保没有发生抖动或偏移。如果布局发生变化，可能需要重新检查宽高比的计算是否正确。
验证结果还可以通过模拟不同网络环境下的图片加载来确认。在慢速网络下，图片加载时间较长，此时检查页面布局是否保持稳定尤为重要。如果布局稳定，说明 width 和 height 属性设置正确；如果布局发生变化，则需要调整 height 属性的计算方式。通过这种验证方法，可以确保图片在各种网络环境下都能保持良好的显示效果。
总结图片优化的关键步骤
在 HTML 中嵌入图片时，优化显示效果和布局稳定性需要综合考虑多个因素。首先，根据图片的原始尺寸计算并设置 width 和 height 属性，确保图片在加载前后保持相同的显示尺寸。其次，为 img 标签添加准确的 alt 属性，提供图片的替代信息，提升可访问性。最后，通过浏览器开发者工具验证图片的显示效果和布局稳定性，确保优化措施的有效性。
这些步骤不仅适用于 MDN 示例中的图片，也适用于网页中的其他图片。通过遵循这些最佳实践，可以避免图片加载时的布局跳动问题，提升用户体验和页面可访问性。在实际应用中，应根据图片的具体内容和用途，灵活调整 width、height 和 alt 属性的设置，以达到最佳的显示效果。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。