不要再用img标签展示图片了
＜img＞ 标签的弊端＜!-- 直接阻塞渲染的典型示例 --＞＜img src="large-image.jpg"＞ ＜!-- 大图未优化 --＞
无懒加载：默认立即加载所有图片
无法自适应尺寸：需手动设置 width/height 防止布局偏移（CLS）
缺乏格式优化：无法根据浏览器自动选择 WebP/AVIF 等新格式
＜!-- 需要复杂配置 --＞＜img srcset="image-320w.jpg 320w, image-480w.jpg 480w" sizes="(max-width: 600px) 480px, 100vw"＞
多分辨率适配代码冗长
Art Direction（艺术指导）需要 ＜picture＞ 配合
加载失败时默认显示破损图标
无加载过渡动画
不支持渐进式加载（模糊占位等）
＜!-- 缺少必要属性 --＞＜img src="product.jpg"＞ ＜!-- 无 alt 文本 --＞
＜picture＞ 元素＜picture＞ ＜source media="(min-width: 1200px)" srcset="large.webp 1x, large@2x.webp 2x" type="image/webp"＞ ＜source srcset="medium.jpg 1x, medium@2x.jpg 2x" type="image/jpeg"＞ ＜img src="fallback.jpg" alt="Responsive image" loading="lazy"＞＜/picture＞
优势：
1.按条件加载不同图片源（Art Direction）
2.自动选择最优图片格式（WebP/AVIF优先）
3.兼容旧版浏览器自动降级
.card { background-image: url('placeholder.svg'); background-size: cover; position: relative;}/* 通过媒体查询加载响应式图片 */@media (min-resolution: 2dppx) { .card { background-image: url('image@2x.jpg'); }}/* 使用伪元素实现渐进加载 */.card::after { content: ''; position: absolute; inset: 0; background: url('image.jpg') no-repeat center/cover; opacity: 0; transition: opacity 0.3s;}.card.loaded::after { opacity: 1;}
优势：
1.更灵活的动态加载控制
2.天然支持 CSS 过渡动画
3.可实现背景模糊/渐变叠加等特效
// 使用 IntersectionObserver APIconst observer = new IntersectionObserver((entries) =＞ { entries.forEach(entry =＞ { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } });});document.querySelectorAll('[data-src]').forEach(img =＞ { observer.observe(img);});
＜!-- 替代简单图标类图片 --＞＜svg viewBox="0 0 24 24" class="icon"＞ ＜path d="M12 2L3 9v12h18V9l-9-7z"/＞＜/svg＞＜!-- 动态颜色控制 --＞＜svg class="icon" style="color: var(--theme-color);"＞ ＜use href="sprite.svg#logo"＞＜/use＞＜/svg＞
优势：
1.无限缩放不失真
2.文件体积小（平均比 PNG 小 60%）
3.可通过 CSS 动态控制颜色/动画
1.格式选择策略
＜picture＞ ＜source type="image/avif" srcset="image.avif"＞ ＜source type="image/webp" srcset="image.webp"＞ ＜img src="image.jpg" alt="fallback"＞＜/picture＞
2.尺寸优化原则
使用 srcset + sizes 实现分辨率切换
设置 width + height 防止布局偏移
＜img src="image.jpg" width="800" height="600" style="max-width: 100%; height: auto;" alt="Responsive image"＞
3.加载性能优化
首屏图片预加载：
＜link rel="preload" href="hero-image.webp" as="image"＞懒加载阈值调整：
new IntersectionObserver(entries =＞ {/*...*/}, { rootMargin: '200px' // 提前 200px 加载});
合理选择图片加载方案可以实现：
1.性能提升：平均减少 30%-70% 图片体积
2.用户体验优化：实现平滑过渡、渐进加载等效果
3.维护性增强：通过组件化统一管理图片逻辑
4.带宽成本降低：动态 CDN 可节省 40%+ 流量成本
阅读原文：原文链接
