HTML不压缩图片，只引用文件；Canvas用toDataURL('image/jpeg', 0.7–0.8)兼顾清晰与体积，需缩放尺寸而非仅调质量，WebP须用<picture>配fallback，srcset必须搭配sizes才生效。
HTML 本身不压缩图片，它只是引用图片的容器。真正起作用的是你塞进 <img> 的那个文件——无论它来自本地、CDN 还是 JS 动态生成，体积大就加载慢，跟 HTML 写得多漂亮没关系。
Canvas 压缩图片时 toDataURL 质量参数怎么设才不糊又够小
用 canvas.toDataURL('image/jpeg', 0.8) 是最常用也最有效的控制点。质量值不是线性压缩比，0.7～0.8 是视觉无明显损失、体积下降明显的甜区；低于 0.6 容易出现色块和模糊，高于 0.9 体积节省有限但文件陡增。
- 必须显式指定
'image/jpeg'类型，否则默认是image/png（无损、体积大） - 如果原图是透明 PNG，强行转 JPEG 会丢 alpha 通道——要么加白底再画，要么改用
image/webp（支持透明） - 移动端 Safari 对
toBlob()兼容更好，toDataURL()在大图时可能触发内存警告
srcset + sizes 配合不当，高 DPR 设备还是下大图
写了 srcset 却没配 sizes，浏览器就按“默认宽度 100vw”猜尺寸，iPhone 等高 DPR 设备仍会优先加载 2x/3x 图片——哪怕你只在 300px 宽的卡片里显示。
-
sizes必须写具体断点，比如sizes="(max-width: 768px) 100vw, 50vw" -
srcset中每个地址后要带宽度描述符，如"small.jpg 480w, medium.jpg 768w, large.jpg 1200w" - 验证方式：打开 Chrome DevTools → Network → 切换设备模拟 → 刷新，看实际加载的是哪个资源
WebP 格式 fallback 不生效，老浏览器直接空白
只写 <img src="a.webp"> 在不支持 WebP 的 IE 或旧版 Safari 上就是 404 或空白。必须用 <picture> 包一层，且 <source> 的 type 属性要准确。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<source srcset="a.webp" type="image/webp">后，必须紧跟一个<img src="a.jpg" alt="..."> - 服务器要返回正确的 MIME 类型：
image/webp，否则 Chrome 会拒绝解析 - 不要依赖“自动转换”，CDN 如 Cloudflare 的 Polish 功能需手动开启，且不处理
data:或 base64 图片
压缩后体积反而变大？常见翻车点
很多所谓“压缩”操作其实在帮倒忙：原始图是 800KB 的 JPG，用 Canvas 按 0.9 质量导出成新 JPG，结果变成 1.2MB——因为浏览器重采样时没关色度抽样（chroma subsampling），或 canvas 尺寸没缩放只调了质量。
- 先检查原始图是否已过度压缩：用
identify -verbose img.jpg（ImageMagick）看是否已有Chroma subsampling: 2x2 - Canvas 绘制前务必缩放尺寸，不能只靠 quality 参数硬压；目标宽高建议按最长边 ≤ 1920 计算
- 别对 SVG 或文字图标转 PNG 再压——内联
<svg>通常
真正卡住性能的从来不是 HTML 写法，而是你放进 src 和 background-image 的那个二进制文件。优化路径很直：换格式（WebP/AVIF）、控尺寸（按 display 区域缩）、限质量（0.7–0.8）、加懒加载（loading="lazy"）。其余都是锦上添花。
