在加载一个由 WordPress 所生成的页面当中，图片的文件大小通常比 HTML、JavaScript 或是 CSS 等文件还要来的大，所以只要能将网站上的图片优化，就能有效的减少网页下载所需要花费的时间，进而提升网页效能。
本篇文章将会和你分享如何一步一步的最佳化网站上的图像
- 调整图片的尺寸
- 选择适当的图片格式
- 压缩图片来减少文件大小
- 延迟加载图片
调整图片的尺寸
首先，我们先来了解一下网页图片的基本概念。
一般来说，我们习惯使用「像素」（pixel）来做为图像尺寸（高度和宽度）的单位。
而另一方面，图片文件的大小则是图像所佔用的存储空间量，通常用 KB（Kilobyte）和 MB（Megabyte）为单位，其中 1 MB = 1000 KB。
图片的尺寸和文件大小有着非常明显的正相关：图片尺寸越大，文件也会越大。
| 图片尺寸（像素） | 总像素 | 位元组（每个像素有 4 个位元组） |
| 100 x 100 | 10,000 | 40,000 位元组 / 1024 = 39 KB |
| 200 x 200 | 40,000 | 160,000 位元组 / 1024 = 156 KB |
当图片尺寸（长、宽）大一倍的时候像素和文件大小增加了 4 倍，所以如果想要降低图片文件的大小，第一步应该是使用正确的图片尺寸。解析度和 PPI （DPI）
如何确定正确的图片尺寸？
在上传图片到你的 WordPress 媒体库之前，你应该先确定它们的尺寸不会和你的页面配置相差太大。
如果找得到的话，你应该遵照你正在使用的主题所推荐的图片尺寸，或是查看该主题 demo 当中的图片是什么尺寸。
当然你也可以自己丈量网页的尺寸，这边有几种工具可以让你知道网页上各种元素的宽度和高度：
使用浏览器的「开发者工具」是最快速的方式，而且各种浏览器都有这个功能。
使用「开发者工具」就能知道网页图片的尺寸
或是你也可以安装一款 Chrome 的扩充套件「Page Ruler」，它可以让你轻松的测量页面上的各种尺寸。
「Page Ruler」 扩充套件
如何调整图片尺寸？
调整图片的尺寸一点都不难，有各式各样的软件或是在线工具可以帮助你调整图片大小。
一般来说你只要设置你想要的宽度或是高度，让工具自动帮你调整比例即可，如果有需要的话你可以选择能够批量调整图片尺寸的工具。
这边推荐几款桌面软件给大家参考：
- Photoshop – 最有名的图片编辑软件。
- GIMP – 和 Photoshop 很像但是是免费的。
- Image Resizer for Windows – 安装后就可以使用右键来调整图像大小，十分方便。
- IrfanView – 轻巧的图片编辑软件，可以批量编辑。
- PhotoScape – 操作简单，有拼图功能。
- High Quality Photo Resizer – 免费、小巧的图片编辑软件。
- FastStone Photo Resizer – 可以转档、更名、剪裁、调整大小等功能。
如果你和我一样偏好使用在线工具的话，你也可以参考以下几款
- iLoveIMG – 非常好用的在线图片编辑工具，有繁体中文。
- Squoosh.app – Google 推出的免费在线工具。
- Bulk Resize Photos – 可以批量变更图片尺寸的在线工具。
使用没有调整尺寸的图片，常常会造成主机空间和网页加载时间的浪费。
使用正确的图片尺寸可以避免被 GTmetrix 扣分
选择适当的图片格式
取决于你的需求来选择适合自己网站的图片文件格式也是图片优化的重要环节之一。
我们通常可以把用于网页上的图片分为两种：向量图片和点阵图片。
目前比较广为人知的向量图片格式为 .svg，它最大的优点是可以任意放大图像，而不会影响解析度而且文件通常比点阵图片还要来得更小。
但是如果不使用插件的话，WordPress 并不支援.svg格式，加上.svg无法呈现複杂的色彩，如果使用在网站的图标或是小图示也许很理想，但是其他网页上的照片或是图片就不适用.svg格式了。
而点阵图片则包含了大家常见的.jpg（.jpeg）、.png、.gif等格式还有比较少见的.webp，点阵图片最大的优点是可以处理複杂的图像，例如色彩丰富的风景照片，但是将图片放大之后常常会有锯齿状和模糊的影像等问题，必须要储存多个不同解析度的图片版本。
| 格式 | 支援透明 | 支援动画 | 支援浏览器 |
| JPG（JPEG） | 否 | 否 | 所有 |
| PNG | 是 | 否 | 所有 |
| GIF | 是 | 是 | 所有 |
| WebP | 是 | 是 | Chrome、Opera、Android |
如果对图片的品质没有特别的要求，我认为比较理想的网页图片格式应该会是.jpg（.jpeg），它採用「破坏性压缩」（Lossy Compression）可以大幅度的减少文件大小，提升网页效能。
.png是一种「非破坏性压缩」（Lossless Compression）的图片格式，它保留了图片的细节、支援透明颜色、图片品质比.jpg还要来得好，但是文件比较大，在你需要保持图片的透明度或是高品质的时候才建议使用它。
.gif的支援度最好但是它只能显示 256 种颜色，无法满足所有图片的需求，但是很适合拿来制作成动画。
.webp目前的问题是浏览器的支援，在不是所有的浏览器都支援的情况下，你必须要同时准备除了.webp之外的其他图片格式，以避免在某些浏览器无法显示图片的窘境，不过在 Google 强力推动之下.webp有潜力可以成为未来的主流格式。
压缩图片来减少文件大小
除了选择合适的格式之外我们还可以使用图片压缩工具来进一步的缩小图片或是照片的文件大小。
这些图档压缩工具通常会使用独特的演算法来扫描并且分析图片，然后根据分析的结果来建立最佳的压缩文件，过程中也会一併把包含来自数位相机的 EXIF 数据删除，以获得最大程度的文件缩减。
除了在线的图片压缩工具之外，你也可以选择使用 WordPress 图片压缩插件来帮助你减少额外的工作时间。
我从 Pixabay 下载了一张猫咪的免费图片（1920×1277 px），并且安装测试了几个受欢迎的图片压缩插件，结果如下图表格所示。（所有的插件都採用预设的设置值）
| 插件 | 压缩等级 | 原始图片大小 | 压缩后图片大小 | 减少百分比 |
| EWWW | Pixel Perfect | 492 KB | 469 KB | 4.67% |
| Imagify | Aggressive | 492 KB | 137 KB | 72.15% |
| Kraken | Intelligent Lossy | 492 KB | 398 KB | 19.11% |
| reSmush.it | Image quality 92 | 492 KB | 458 KB | 6.91% |
| SG Optimizer | 无法选择 | 492 KB | 407 KB | 17.28% |
| ShortPixel | Lossy | 492 KB | 88 KB | 82.11% |
| TinyPNG | 无法选择 | 492 KB | 160 KB | 67.48% |
在我的测试中，「ShortPixel」、「Imagify」和「TinyPNG」的压缩表现最好，它们都是免费安装、付费升级的插件，需要用 Email 申请 API 金钥才能使用。
ShortPixel
ShortPixel 的免费版可以让你每个月免费最佳化 100 张图片，在预设的情况下当你上传 1 张图片 WordPress 会自动产生 4 张不同大小的缩图，再加上原始的图片，代表只要上传 20 张图片一个月的免费限额就用完了，所幸你可以自由设置要最佳化的缩图。WordPress 预设产生的缩图
ShortPixel 可以单独最佳化某张图片，也可以批量最佳化所有在媒体库当中的图片，它的最佳化速度很快，有 3 种不同的压缩等级可以选择分别是「Lossless」、「Glossy」 和 「Lossy」（在上面的测试中是使用预设的 Lossy）。
它支援常见的图像格式 JPG、PNG、GIF、WebP 还有 PDF，而且没有文件大小限制，申请到 API 金钥后可以同时启用在多个网站。
ShortPixel 的操作介面简单明了，可以设置的选项不少。
如果不幸的用完了免费额度，想要购买的话，ShortPixel 有月付方案的订阅制和单次购买特定张数的选项，详细的费用可以到 ShortPixel 的网站查询。
另外，ShortPixel 在今年推出了他们新的图片最佳化插件「ShortPixel Adaptive Images」，强化了图片尺寸自适应（增加 GTmetrix 和 PageSpeed Insights 分数）、CDN（和另一款插件「Optimole」的概念很像）和 WebP 的支持，目前正在免费测试阶段，有兴趣的朋友可以尝试看看。
Imagify
Imagify 是和知名的 WordPress 缓存加速插件 WP Rocket 同一家公司所开发的插件，和 ShortPixel 比较不一样的地方是它採用文件的大小来计算使用量，免费版可以使用每个月 25 MB 的限额，每张图片有 2 MB 的大小限制。
同样有 3 种压缩等级可以设置，预设是「Aggressive」，按照官方的说法这个级别几乎不会让使用者感到有品质上的损失，如果没有特殊的需求，建议採用这个级别。
操作介面设计的比 ShortPixel 友善，这一向是 WP Media 公司的强项。
Imagify 的操作介面
Imagify 的付费计画也有分成月付订阅和一次性购买，详细的费率请到 Imagify 的定价页面查看。
TinyPNG
知名的在线图片压缩工具所推出的 WordPress 插件，正确的插件名称应该是「Compress JPEG & PNG images」，它是今天介绍的 3 款插件当中唯一有被中文化的，感觉额外亲切。
每个月的前 500 张图片压缩是免费的，用完额度之后才需要付费，会按照压缩图片的张数计费，没有文件大小限制。
没有压缩等级可以选择，不算多的设置加上中文介面让一般用户没有烦恼，算是这 3 款插件当中最容易使用的。
详细费率可以到 TinyPNG 官网查询。
利益揭露
我没有收到任何的报酬来撰写此篇文章，不过如果你决定通过点击本文中的链接来购买产品，那么我可能会获得一笔小额佣金，这将不会影响你的任何权益或是购买商品的价格。
本网站没有使用烦人的广告，Affiliate 链接是目前唯一的收入来源，如果你想要支持我继续经营本网站，请使用本站链接购买你需要的产品，我会非常感谢您。
最好的 WordPress 图片压缩插件
考虑到图片压缩的自动化和便利性，选择一款合适的图片最佳化插件可以增加不少工作效率，测试的结果通常会随着插件的更新和不同的图片文件而有所变动，大家可以当参考就好不用太执着于压缩的比率，反而选择适合自己的费率才比较理想。
我认为 ShortPixel 在 WordPress 图像最佳化这块领域应该是有领先地位的，除了「ShortPixel Image Optimizer」有着丰富的设置项目和操作起来非常流畅、快速之外他们还有其他许多图像相关的插件，像是「Enable Media Replace」、「reGenerate Thumbnails Advanced」和「Resize Image After Upload」评价都很不错。
有着 WP Media 的加持 Imagify 未来的表现很值得期待，但是目前来说感觉得出来还有进步的空间。
一般的部落格或是图片不多的形象网站，Compress JPEG & PNG images 应该是非常好的选择，每个月 500 张的免费额度非常具有吸引力。
另外 SiteGround 的 SG Optimizer 有提供免费无限额度的图片最佳化功能，虽然有时候 GTmetrix 会提示还可以有再缩小的空间（1% 或是 2%），但是如果不计较的话也不失为一个很好的选择。
另外，这些插件就算停用或是删除之后，已经被最佳化的图片还是会被继续保留着，一般来说不会有太大的问题，值得留意的是最好选择保留原始图片文件的选项，以免对压缩之后的品质感到不满意，万一手上又没有原始图片的备份的话就伤脑筋了。
延迟加载图片
在我们对图片的尺寸和文件大小都做好了最佳化之后，我们还有一个步骤可以来加速网页的读取，那就是「延迟加载」（Lazy Loading）图片。
延迟加载的基本概念是只有当访客即将看到图片的时候才加载它，这样做有几个好处
- 减少网页加载时间
如果要一口气下载网页上的所有图片，肯定会花费比较多的时间，尤其当网页内容又长图片又多的时候，只先下载可视範围内的图片可以减少网页读取时间。 - 减少浏览器的负担
延迟加载图像可以让浏览器在读取到图片时才开始处理影像，可以更有效率的分配资源。 - 减少 HTTP 请求 的数量
在网页加载初期的 HTTP 请求数量将会减少，提高网页效能。 - 减少不必要的数据传输流量
没有被看见的图片将不会被下载，可以大幅度的节省流量上的浪费，尤其是当流量传输不是免费的时候，往往可以减少额外的开销。 - Google 喜欢延迟加载
Google 在其开发者指南中推广使用延迟加载网页上的图像和影像。
SiteGround 的免费插件「SG Optimizer」或是「Lazy Load by WP Rocket」都有提供「延迟加载」的功能，只要启动这项功能马上就能加快网页的读取速度。
SG Optimizer Lazy Load
结论
「图片加速」是一种在影像品质和网页效能之间的取舍，你希望提供网站访客最佳的浏览体验，也希望尽可能的加速网页读取的效能，我期待这篇文章的内容能让你找到中间的平衡。
