https://www.tainuohc.com/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/Recent content in 性能优化 on TiJetHugozhTue, 04 Aug 2026 00:00:00 +0000https://www.tainuohc.com/blog/2026-08-04-hugo-image-optimization/Tue, 04 Aug 2026 00:00:00 +0000https://www.tainuohc.com/blog/2026-08-04-hugo-image-optimization/<h2 id="1-为什么要做图片加速">1. 为什么要做图片加速</h2> <p>静态网站加载卡顿，图片往往是最大元凶：</p> <table> <thead> <tr> <th>原因</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>图片体积大</td> <td>一张 2560×1440 PNG 可能有 8-10MB</td> </tr> <tr> <td>格式低效</td> <td>PNG 无损压缩，适合截图但不适合照片</td> </tr> <tr> <td>没有懒加载</td> <td>页面一次性加载所有图片</td> </tr> <tr> <td>没有缓存</td> <td>每次访问都重新下载</td> </tr> </tbody> </table> <p><strong>核心思路：</strong> 让浏览器下载更小的文件。</p> <h2 id="2-hugo-图片处理管道原理">2. Hugo 图片处理管道原理</h2> <p>Hugo 内置图片处理能力，构建时自动完成：</p> <pre tabindex="0"><code>原始图片 (assets/img/wall4.png) ↓ Hugo 构建时处理 Resize &#34;1920x webp q75&#34; ↓ 优化后图片 (public/img/wall4_hu_xxx.webp) </code></pre><table> <thead> <tr> <th>操作</th> <th>语法</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>缩放</td> <td><code>Resize &quot;800x&quot;</code></td> <td>限制宽度 800px</td> </tr> <tr> <td>裁剪</td> <td><code>Crop &quot;800x600&quot;</code></td> <td>裁成指定尺寸</td> </tr> <tr> <td>填充</td> <td><code>Fill &quot;800x600&quot;</code></td> <td>填充并居中裁剪</td> </tr> <tr> <td>转格式</td> <td><code>webp</code> / <code>jpg</code> / <code>png</code></td> <td>WebP 体积最小</td> </tr> <tr> <td>质量</td> <td><code>q75</code></td> <td>75% 质量（默认 75）</td> </tr> </tbody> </table> <h2 id="3-方案一css-背景图优化实测">3. 方案一：CSS 背景图优化（实测）</h2> <h3 id="步骤-1图片放到-hugo-资源目录">步骤 1：图片放到 Hugo 资源目录</h3> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>mkdir -p web-site/assets/img </span></span><span style="display:flex;"><span>cp 你的图片.png web-site/assets/img/wall4.png </span></span></code></pre></div><h3 id="步骤-2创建处理-partial">步骤 2：创建处理 partial</h3> <p>新建 <code>layouts/partials/hero-bg.html</code>：</p>