前端必看:img标签不可忽视的width与height属性

在前端web开发时,有两种方式在页面中放置图片:一种是使用img标签 ,一种是使用CSS背景图片

如果一张图片只是用来装饰,没有其他含义,那么更推荐使用CSS背景图片来实现。

当我们使用img标签在页面中嵌入图片的时候,可能很多人都只是在CSS中指定图片的width属性,以此来使图片加载后保持正常的宽高比而不会变形。

这似乎是一种比较完美的写法,width属性可以指定图片的宽度,而高度浏览器会根据图片宽高比进行自动计算。这种方式在图片不确定的情况下是比较通用的写法,但带来的问题是页面的内容可能会发生偏移

因为图片加载是异步的,在未加载时,浏览器无法知晓图片的尺寸,img标签的高度就是0。在图片加载完成后,浏览器根据图片的尺寸计算出了高度,img的高度不再是0,此时图片后方的内容就会被强制向下偏移,这也会触发页面布局的重新计算。

这会带来两个影响:

  1. 如果页面图片较多,对浏览器的性能开销就会变大;
  2. 会打断用户当前正在浏览的内容,用户视觉体验不友好。

如果说现在的硬件性能都已经过剩,那么第二点也是不容忽视的问题。

你可以在Chrome浏览器的性能测试工具中看到布局偏移 这一项指标,并也会检测出导致的原因:Unsized image element

具体有哪些最佳实践方案呢?

我们分两种情况来说:

情况1:已知图片尺寸

我们应该在img标签上设置正确的图片尺寸,这往往是现在很多开发这容易忽视的地方。

html 复制代码
<img src="xxx.jpg" width="200" height="100" alt="">

然后在CSS中,指定图片在页面中应该渲染的尺寸。

css 复制代码
img {
  width: 100%;
  height: auto;
}

这样,在图片加载之前,浏览器就能得到img标签应该渲染的尺寸,预留出正确的空间。

img的宽度由CSS中的width: 100%;来决定,高度设置为auto,浏览器会根据img标签上的width="200" height="100"得到图片的宽高比2:1,从而计算出高度宽度*1/2

如果你不想在img上设置尺寸的话,你也可以在CSS中手动指定图片比例。

CSS 复制代码
img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
}

情况2:未知图片尺寸

没有图片的尺寸也就不可能知道图片的比例,所以就不可能有上面如此完美的解决方案。

你只能尽可能的减小布局偏移带来的视觉影响,预估一个图片尺寸。这样在图片未加载的时候,能够让用户提前知道这个区域可能会有一张图片。

CSS 复制代码
img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* 根据实际情况预估 */
}

你也可以在图片区域提前渲染一个占位符,比如:占位图片,加载动画等,来提升用户的使用体验。

好了,如果你正在做前端页面优化方面的工作,不妨试一试吧,在提升Chrome性能指标的同时,可能也会带来用户体验上的提升。

相关推荐
ObjectX前端实验室12 分钟前
React Fiber 双缓冲树机制深度解析
前端·react.js
高斯林.神犇1 小时前
javaWeb基础
前端·chrome
用户21411832636021 小时前
dify案例分享-Qwen3-VL+Dify:从作业 OCR 到视频字幕,多模态识别工作流一步教,附体验链接
前端
IT利刃出鞘1 小时前
HTML--在textarea左侧添加行号
html
南屿im2 小时前
把代码变成“可改的树”:一文读懂前端 AST 的原理与实战
前端·javascript
charlie1145141912 小时前
从《Life of A Pixel》来看Chrome的渲染机制
前端·chrome·学习·渲染·浏览器·原理分析
HWL56792 小时前
输入框内容粘贴时 &nbsp; 字符净化问题
前端·vue.js·后端·node.js
梦6502 小时前
JQ 的 AJAX 请求方法
前端·ajax
ObjectX前端实验室2 小时前
【react18原理探究实践】分层解析React Fiber 核心工作流程
前端·react.js
IT_陈寒2 小时前
「JavaScript 性能优化:10个让V8引擎疯狂提速的编码技巧」
前端·人工智能·后端