优化图片需用现代格式（如WebP）+合理尺寸+有损压缩；HTML压缩只删注释、合并空白、移除可选闭合标签；构建时图片须经imagemin插件压缩，CSS背景图也要走loader处理。
HTML里怎么让图片变小却不模糊
导出体积大，八成是图片没压。浏览器加载的不是“原始图”，而是你塞进 <img> 的那个文件——哪怕它藏在 CSS 背景里、用 JS 动态插入，只要最终进了 DOM，就占体积。
关键不是“删图”，而是“换图”：用现代格式 + 合理尺寸 + 有损可控压缩。
-
srcset和sizes必须配对用，否则高 DPR 设备（比如 iPhone）仍会下大图 - 优先用
.webp（支持透明+动图），iOS 14+、Chrome 85+ 全支持；老版本 fallback 到.jpg或.png，用<picture>包一层 - 别信“PS 导出为网页格式”——它默认不关色度抽样，
cjpeg -quality 75 -chroma-subsample 1x1才真压得狠 - SVG 图标别转成 PNG，文字类图标直接用
<svg>内联，体积常小于 1KB
HTML压缩工具选哪个才不翻车
用错工具反而增大体积：比如把空格全删了但破坏了 pre 和 textarea 的换行，或把 class="btn btn--primary" 压成 class="a b" 却忘了改对应 CSS。
真正安全的 HTML 压缩，只做三件事：删注释、合并空白符、移除可选结束标签（如 </li>），其它一概不动。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 开发期用
html-minifier-terser（注意开collapseWhitespace: true，关removeAttributeQuotes，否则某些框架属性会失效） - 构建流程里加
htmlnano，它比老版 htmlnano 更稳，能识别data-属性和 Vue/React 模板语法 - 千万别在线压缩完再手改——很多网站会把
<script>里的字符串也当 HTML 处理，导致"<div>"变成"<div>" <h3>Webpack/Vite 打包时图片体积失控怎么办</h3> <p>构建工具默认把所有 <code>import进来的图片走 asset module，但不会自动压缩——它只负责“搬图”，不负责“瘦身”。你看到 dist 里一堆 2MB 的photo.jpg，是因为 loader 没配压缩逻辑。- Vite 用户加
vite-plugin-imagemin，注意配置gifsicle（动图）、mozjpeg（JPG）、svgo（SVG）三个子插件，缺一个就漏压一类图 - Webpack 用
image-minimizer-webpack-plugin，别用已归档的url-loader+file-loader组合，它们不带压缩能力 - 所有图片路径必须走
import或require()，硬写src="assets/photo.jpg"的图会被 copy 插件原样扔进 dist，完全绕过压缩
检查导出体积是否真优化到位
别只看打包后 dist 文件夹总大小——它包含 source map、未引用的 CSS、重复引入的 polyfill。真正影响首屏的是
index.html+ 它同步加载的资源（<link rel="stylesheet">、<script>、<img>）。打开 Chrome DevTools → Network → 切到 “Disable cache” + “Online” 模式，刷新页面，按 “Size” 列倒序，重点盯前三名：
- 如果最大项是某个
.jpg，右键 Open in Sources 查它原始尺寸，对比width/height属性——若显示宽高仅 300px，图却有 2000px，就是没 resize - 如果最大项是
index.html本身，说明 HTML 压缩没生效，或内联了太多 base64 图片（base64 比二进制大 33%） - 如果有多个同名但 hash 不同的图片（如
icon.abc123.png、icon.def456.png），说明构建时没去重，可能是不同组件各自 import 了同一张图
最常被忽略的点：CSS 里
background-image: url(...)引用的图片，同样要走构建压缩流程，且不能用相对路径硬写——Vite 中必须url('./icon.png')，Webpack 中必须url('./icon.png')并确保 loader 匹配该路径。 - Vite 用户加
