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