选用WebP/AVIF等现代格式并通过<picture>提供回退；2. 使用loading="lazy"实现懒加载；3. 设置width/height防布局偏移，结合srcset响应式适配；4. 压缩图片并避免css缩放；5. 利用cdn加速与缓存策略；6. 添加alt属性及LQIP占位提升体验。
优化图片加载与显示不是通过“html函数”实现的，因为HTML本身没有函数概念。实际是指通过合理使用 img 标签 和相关技术手段来提升网页中图片的加载性能和用户体验。以下是针对 HTML 图片标签（<img>）的实用性能调优方法。
1. 使用合适的图片格式
选择正确的图片格式能显著减小文件体积，加快加载速度：
- JPG：适合照片或色彩丰富的图像，支持高压缩，但不支持透明。
- PNG：适合图标、简单图形和需要透明背景的图片，压缩率较低。
- WebP：现代格式，比 JPG 和 PNG 更小，质量相近，推荐优先使用。
- AVIF：更新的格式，压缩效率更高，适合高端浏览器。
可通过 <picture> 提供多格式回退：
<picture>
<source srcset=”image.avif” type=”image/avif”>
<source srcset=”image.webp” type=”image/webp”>
<img src=”image.jpg” alt=”描述文字”>
</picture>
2. 启用懒加载（Lazy Loading）
延迟加载视口外的图片，减少初始页面加载资源量。
立即学习“前端免费学习笔记（深入）”；
使用原生 loading 属性即可实现：
<img src=”photo.jpg” alt=”风景照” loading="lazy">
设置 loading="lazy" 后，浏览器会在图片接近视口时才开始加载，节省带宽和提升首屏速度。
3. 设置合理的尺寸与响应式图片
避免浏览器重算布局或拉伸图片，影响渲染性能。
- 明确指定
width和height属性，防止布局偏移（CLS）。 - 使用
srcset和sizes提供不同分辨率的图片，适配不同设备：
<img
srcset=”small.jpg 480w,
medium.jpg 800w,
large.jpg 1200w”
sizes=”(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1200px”
src=”medium.jpg”
alt=”响应式图片”
>
4. 压缩图片并控制文件大小
上传前对图片进行压缩，去除元数据，降低体积。
5. 使用 CDN 与缓存策略
将图片托管在 CDN 上，利用边缘节点加速访问。
- CDN 支持自动压缩、格式转换（如根据浏览器请求返回 WebP）。
- 设置长期缓存头（Cache-Control），减少重复请求。
6. 添加 alt 属性并考虑占位方案
图片未加载完成时，可用低质量占位图（LQIP）或背景色提升视觉体验：
<img src=”lqip-thumb.jpg” style=”Filter: blur(5px);” onload=”this.style.filter=’none’; this.src=this.dataset.src;”> 基本上就这些。合理使用 <img> 标签的属性和现代浏览器功能，结合图片优化流程，就能显著提升网页性能和用户体验。