EP515-516. “图片压缩优化 + 插件阶段作业”
🔒 登录后可标记已读- 图片是拖慢网站的头号元凶——每张照片都夹带拍摄地点、时间、相机型号这些访客根本用不到的资料
- 装一个 Smush 插件就能自动压缩、去掉多余资料，之后上传的图片全部自动处理，属于装完就不用管的类型
- PNG 和 JPEG 怎么选有讲究：门面图（header）用 PNG 保画质，博客配图用 JPEG 换速度
- 最后一讲是插件阶段的总作业：备份、安全、分析、提速、SEO、防垃圾留言、邮件订阅，七件事一次过验收
所需工具
WordPress + Smush 插件（免费版）+ Google Analytics / Pingdom / Google Search Console（作业检查用）
重点内容
EP515. Image Optimization & Compression（用 Smush 压缩图片）
为什么要压缩图片
- 网站图片越放越多：博客配图、文章插图、页面设计素材，时间一长整个网站就被拖慢
- 图片除了画面本身，还带着一堆额外资料（metadata），访客每次打开页面都得把这些一起下载
- 压缩之后访客要加载的东西变少 → 网站变快 → 访客体验更好，Google 也更喜欢快的网站（跟之前讲的 cache 提速是同一个道理）
安装 Smush
- 后台 → Plugins → Add New → 搜索 "Smush"
- Install Now → Activate
- 左侧菜单找到 Smush 点进去
- 插件会弹出设置向导，可以直接选 Skip, set it up later——默认设置已经够用
📌 启用那一刻起就已经在工作了：之后每上传一张新图片，都会自动被压缩和优化。
Bulk Smush（批量压缩旧图片）
- 点 Bulk Smush Now，一键把媒体库里已有的图片全部压缩（课程示范时媒体库有 25 张）
- 课程录制时免费版一次最多处理 50 张，图片多就要一批一批按；付费版一次能处理更多
- 新网站从一开始就装 Smush，之后的图片都会自动压缩，免费版完全够用；只有接手一个已经有上万张图片的旧网站，才会觉得 50 张一批很麻烦
💡 免费版的批量上限这几年调整过，实际能一次处理多少张，以插件后台当前显示为准。
设置项说明（不用改，知道它们在做什么就好）
- Automatic Smush：上传即自动压缩，保持开启
- Strip my image metadata：去掉拍摄地点、时间、图片说明这类 metadata——访客看不到也用不到，只会占空间，保持开启
- Image Resizing：不要开，图片尺寸自己在设计时控制
- 其余标着 Pro 的功能用不到
PNG vs JPEG 怎么选
- PNG 画质更好，但文件更大、加载更慢
- JPEG 画质稍差，但文件小很多
- 重要的门面图用 PNG（例如 header 大图，而且它会被 cache），不是重点的博客配图用 JPEG
- 摄影师作品集这类图片本身就是卖点的网站，一律用 PNG
Lossless（无损）vs Lossy（有损）压缩
- 免费版用的是 lossless 压缩：文件变小，但画质完全没损失
- Pro 版可以开更强的 lossy 压缩：文件小很多，但画质会变差一点
- 课程建议保持无损——图片好看比多省那一点空间重要
Smush 具体做了什么
- 去掉 metadata
- 按实际显示需要调整图片数据：比如原图是 2000×1000 像素，但页面上只需要 800×600 的清晰度，多出来的那部分等于白白让访客下载——Smush 会把它优化掉，画面看起来不变，文件却变小
💡 看不懂原理也没关系，记住一点就好：装着别关，网站越做越大时它会一直默默帮你保持速度。
EP516. Plugins Assignment（插件阶段作业）
这一阶段装的插件，作业要求全部落实到自己的网站上：
- Set Up Google Analytics，开始收集访客资料
- 用测速工具（Pingdom）测一下网站速度，再用插件拿到一点提升——后面有整个 Section 专门讲提速，现在先拿到基础提升就好
- 设置 Google Search Console，打好 SEO 基础——后面还有完整的 SEO 课程深入讲
- 设置 SMTP 发信（课程用 Bluehost SMTP 或 SendinBlue，SendinBlue 现已改名 Brevo）
验收清单（七项全部做完才算完成这一阶段）：
- ✅ 已备份网站（Backed up）
- ✅ 已加强网站安全（Secured）
- ✅ 已安装分析工具（Analytics）
- ✅ 已提速（Speeded up）
- ✅ 已完成基础 SEO（Improved SEO）
- ✅ 已设置垃圾留言拦截（Spam blocker）
- ✅ 已设置邮件订阅（Email opt-in）
核心概念速查
| 术语 | 解释 | 例子 |
|---|---|---|
| Metadata | 图片附带的额外资料，访客看不到但要一起下载 | 拍摄地点、拍摄时间、相机型号 |
| Lossless 压缩 | 文件变小但画质完全不变 | Smush 免费版默认的压缩方式 |
| Lossy 压缩 | 牺牲一点画质换来更小的文件 | Smush Pro 的强力压缩模式 |
| Bulk Smush | 一次批量压缩媒体库里已有的旧图片 | 装好插件后按一次，处理之前上传的 25 张图 |
常见误区
- 以为压缩一定会让图片变糊——免费版是无损压缩，肉眼看不出差别
- 全站图片一律用 PNG 求画质，结果博客页面越来越慢；配图用 JPEG 就够了
- 只装插件、不按 Bulk Smush，之前上传的旧图片其实都还没压缩
- 打开 Image Resizing 让插件自动改尺寸，结果设计里的图片尺寸被打乱
行动步骤
- 后台安装并启用 Smush，跳过设置向导
- 确认 Automatic Smush 和 Strip my image metadata 都是开启状态，Image Resizing 保持关闭
- 按一次 Bulk Smush Now，把媒体库里已有的图片全部压缩
- 之后上传图片时：header/门面图用 PNG，博客配图用 JPEG
- 拿 EP516 的七项验收清单逐项检查自己的网站，没做的回到对应讲座补上
- 用 Pingdom 测一次速度，把数字记下来，之后提速 Section 做完再测一次对比
工具 & 资源
| 工具 | 用途 | 费用 |
|---|---|---|
| Smush | 自动压缩图片、去除 metadata | 免费版够用，Pro 付费 |
| Pingdom | 测网站加载速度 | 免费 |
| Google Analytics | 收集访客数据 | 免费 |
| Google Search Console | 监控网站 SEO 表现 | 免费 |
| Brevo（原 SendinBlue） | SMTP 发信服务 | 免费版有每日发信上限 |
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lectures 515–516
- Lecture 515 Image Optimization & Compression
- Lecture 516 Plugins Assignment
Blog / Website：