渐进式JPEG通过服务端分层编码实现首帧模糊图快速渲染，需配合固定尺寸容器、LQIP占位图及格式回退策略优化加载体验。
直接用普通 JPEG 加载大图，用户看到的是从上到下逐行出现的“扫描线”效果，中间常有大片空白，感知加载慢。渐进式 JPEG 不是靠 JS 或 CSS “做出来”的，而是图像文件本身带分层编码结构——浏览器边收数据边渲染，第一帧就能显示整张模糊图，再逐步变清晰。关键在服务端生成，不是前端加个属性就能生效。
必须由服务端启用 progressive 编码
文件名叫 .jpg 不代表就是渐进式。Baseline（基线）JPEG 和 Progressive（渐进式）JPEG 是两种不同编码模式，区别写在文件头里，HTML 无法动态修改。
- ImageMagick 命令要加 -interlace Plane（不是 PNG）：
convert input.jpg -interlace Plane -quality 85 output.jpg - PIL（Python）保存时显式设 progressive=True：
img.save("out.jpg", "JPEG", progressive=True, quality=85) - sharp（Node.js）需传 progressive: true：
.jpeg({ progressive: true, quality: 82 }) - PHP GD 要调 imageinterlace($img, 1)，再
imagejpeg()
HTML 结构要配合固定尺寸容器
只生成渐进式图还不够。如果外层容器没设宽高，Safari 等浏览器会在图片解码完成前反复重排，破坏最大内容绘制（LCP），反而拖慢首屏感知。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给图片父级 <div> 显式设置 width 和 height（可用 aspect-ratio 替代）
- 避免嵌套超过 3 层的无意义 wrapper，可用 display: contents 扁平化结构
- 不要在 HTML 初始文档中塞满带
data-src的懒加载占位图，会加重解析压力
搭配 LQIP 效果更稳，尤其对非 JPEG 格式
用户上传可能是 PNG、WebP 或普通 JPEG，没法保证全是渐进式。此时可额外生成一张极小尺寸（如 30×30px）、高压缩（质量 10–20）的 JPEG 占位图，内联为 Base64：
立即学习“前端免费学习笔记（深入）”；
- HTML 中：
<img src="data:image/jpeg;base64,/9j/4AAQ..." class="lqip"> - CSS 加过渡：
.lqip { filter: blur(6px); transition: filter .4s ease; }，高清图加载完加.loaded类清除模糊 - 用 IntersectionObserver 控制加载时机，rootMargin 设为
"50px"提前触发，避免滚动卡顿
注意格式兼容与体积权衡
渐进式 JPEG 比 baseline 平均大 5–10%，但弱网下首帧呈现时间可提前 1–2 秒，用户体验提升远超体积代价。
- WebP / AVIF 不支持传统渐进式，但可用 <picture> 回退到渐进 JPEG：
<source type="image/webp" srcset="img.webp"><img src="img-progressive.jpg"> - PNG/GIF 含透明通道时，LQIP 底图要加 background: #f5f5f5，防止透出文字干扰
- 禁用自动播放类属性（如
data-autoplay），改由 JS 检测navigator.connection.effectiveType后按需加载
