图片加载慢的四大主因是未用loading="lazy"、缺少decoding="async"、srcset/sizes配置错误、WebP/AVIF无fallback；需四者协同优化，缺一不可。
图片加载慢是因为没用 loading="lazy"
现代浏览器原生支持懒加载，但默认不开启。不加 loading="lazy"，页面一打开就触发所有 <img> 的请求，尤其在列表页或长图文页，会瞬间堆积大量 HTTP 请求，拖慢首屏渲染，还可能触发带宽限速或 CDN 限流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对「视口以下」的图片（如文章正文后半段、卡片列表非首屏项）必须加
loading="lazy"； - 首屏关键图（如 banner、logo）**禁用**该属性，否则可能被懒加载机制延迟触发；
- 注意 Safari 15.4+、Chrome 76+、Firefox 75+ 才支持，老版本需配合
IntersectionObserver回退； - 不要和
width/height属性一起省略——缺少尺寸会导致懒加载计算错位，出现布局抖动。
<img> 缺少 decoding="async" 会阻塞主线程
浏览器解码 JPEG/PNG 是 CPU 密集型操作。默认同步解码时，大图会卡住渲染线程，用户看到“图片已下载但迟迟不显示”。decoding="async" 把解码扔进后台线程，不影响滚动和交互。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有非 SVG 图片都应加上
decoding="async"，尤其是 >100KB 的图； - 该属性兼容性良好（Chrome 69+、Firefox 68+、Safari 13.1+），IE 不支持但 IE 已无实际维护价值；
- 别和
fetchpriority="high"冲突使用——后者强制提升资源优先级，而decoding是纯解码策略，二者可共存，但fetchpriority只对首屏关键图有意义。
srcset + sizes 配置错，图片还是大文件下载
只写 src 不配响应式，移动端照样下载桌面尺寸图。但光加 srcset 不写 sizes，浏览器无法判断“当前容器多宽”，只能按设备像素比瞎猜，结果往往仍下载过大的图。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
sizes必须写具体值，例如sizes="(max-width: 768px) 100vw, 50vw"，不能只写sizes="100vw"（除非真占满全宽）； -
srcset中的宽度描述符（如400w）要和实际图片物理宽度一致，别把 800px 图标标成400w； - 用 Chrome DevTools 的 Network → “Disable cache” + 切换 device，看实际加载的是哪张图；若始终加载最大图，大概率是
sizes没生效或媒体查询条件写反。
WebP/AVIF 格式没 fallback，旧浏览器白屏或加载失败
直接把 src 指向 .webp，Safari 13 以下、部分安卓 WebView 就会加载失败，显示缺省图标或空白。不是速度问题，而是根本加载不了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
<picture>做格式降级：<source srcset="a.avif" type="image/avif">→<source srcset="a.webp" type="image/webp">→<img src="a.jpg">； - AVIF 虽压缩率高，但编码耗时长，CI 构建阶段生成要预留资源；生产环境建议 WebP 为主，AVIF 作为可选补充；
- 别依赖服务端 UA 判断格式——客户端协商更可靠，且避免 CDN 缓存污染。
最常被忽略的点：图片加载性能不是单点优化，而是 loading、decoding、srcset/sizes、<picture> 四者协同。少一个，前面三个都可能白做。
