想让你WordPress网站的图片加载更快？GTmetrix和PageSpeed Insights显示了一些图像应该优化，如何优化呢？本教程帮助你优化WordPress中的图片，使其尽可能快地加载。它包括从WebP到ShortPixel、自适应图像、通过CDN提供图像以及正确确定图像大小等所有内容。
你是否想优化成搬主题站点这样，可以参考本文章。
许多图像编辑程序（Photoshop和GIMP）可以在上传图像之前进行优化。例如，它们可以让你裁剪/调整图像的尺寸，压缩它们，并删除EXIF数据。利用这些由你的图像编辑程序完成的优化。如果你的网站使用高分辨率的图像（摄影网站），你可能不想调整它们的大小和压缩它们（步骤2+5），因为它可能降低质量，即使是很小的数量。
一、优化WordPress的图像以提高速度
1. 在GTmetrix + PSI中查找未优化的图像
GTmetrix和PageSpeed Insights显示了自GTmetrix更新以来的相同的图像优化。
- 适当调整图像大小–将大型图像调整到正确的尺寸。
- 推迟屏幕外的图像–懒加载图像和背景图像。
- 以下一代格式提供图像–将JPEGs/PNG转换为WebP。
- 有效地编码图像–使用插件无损地压缩图像。
- 使用CSS sprites组合图片–将许多小图片组合成一个文件。
2. 使用GTmetrix检测报告查看更多图像优化情况
使用GTmetrix的传统报告会显示你指定的图像尺寸错误，以及正确的尺寸的图像错误，而新的报告没有。对于这些具体的优化，使用GTmetrix遗留报告。你将需要创建一个免费的GTmetrix帐户，并进入帐户>分析选项>默认为报告。
- 指定图像尺寸：在图像的HTML或CSS中添加宽度/高度。
- 尽量减少重定向 – 从正确的www和http(s)版本提供图像。
- 使用内容交付网络–从CDN提供图像。
- 充分利用浏览器缓存 – 确保图像被缓存。
- 使favicon小而可缓存–使用16x16px的favicon并将其缓存。
3. 适当调整图像大小
正确的图片尺寸意味着你需要将大图片的尺寸调整到较小。
只要你遵循你的网站的正确尺寸（全宽博客图片、标志、侧边栏、页脚、滑块等），你不应该看到错误。如果你已经上传了大型图片，你将需要手动调整它们的大小，或使用一个插件。然而，大多数图像优化插件只有一个选项，可以将它们调整到一组尺寸，所以手动调整尺寸往往是唯一的选择。
如何修复正确的图像大小
- 通过GTmetrix报告运行一个页面。
- 在PageSpeed选项卡中展开服务缩放的图像。
- 找到过大的图像和它们的正确尺寸（由GTmetrix提供）。
- 调整图像的尺寸，然后用新的图像替换旧的图像。
拍摄截图的技巧
Chrome浏览器的Zoom扩展可以让你在精确的缩放级别上进行截图。由于我的全幅博客图片是680px，我使用Zoom（以及我的电脑的缩放级别）来实现接近完美的680px屏幕截图。然后我用GIMP来裁剪边缘。我就得到了一个高质量的680px的屏幕截图，完全适合博客。对于截图，我使用Awesome Screenshot。
创建一个图像尺寸
了解你网站的不同区域并创建一个记录。这样，你就知道每张图片的确切尺寸，可以避免调整巨大的图片，因为这可能导致质量损失。
- Favicon。16x16px
- 小工具图像。414(w)
- 轮播图像。115(h)
- 幻灯片图像。1900(w) x 400(h)
- 特色图片。250(w) x 250(h)
- 全宽博客文章图片。680(w)
- Twitter OG图片 1024(w) x 512(h)
- Facebook OG图像。1200(w) x 628(h)
一定要使用自适应图像，为移动设备正确调整图像大小（步骤11）。
4. 延迟屏幕外的图像
推迟屏幕外的图片意味着你需要懒加载它们。
懒加载是WordPress 5.5内置的，所以不需要在其他插件中启用它。大多数懒加载错误是因为背景图像（在CSS中）没有被懒加载。在这种情况下，你可以搜索WordPress的资源库或尝试Elementor懒加载背景图片插件。
如何修复延迟离屏图像
- 懒加载图像。
- 懒加载背景图片。
- 了解你的缓存插件（如WP Rocket）如何懒惰地加载图片。
折叠上方的图片应该被排除在懒惰加载之外，因为用户会立即看到它们。
5. 提供图像用下一代格式
以下一代格式服务图像意味着你需要将图像转换为WebP。
大多数图像优化插件都能做到这一点（如ShortPixel）。否则，请使用WebP插件，如WebP Converter For Media。如果您使用WP Rocket，WebP缓存几乎应该被禁用，除非您的WebP插件不提供WebP图像（通常是这样）。如果你使用Cloudflare或使用元素或.htaccess方法，也应该禁用它。
如何修复以下一代格式提供的图像
- 通过你的图像优化插件启用WebP。
- 选择一种WebP转换方法，元素是最常见的。
- 另外，您也可以使用WordPres资源库中的指定WebP插件。
6. 高效地对图像进行编码
有效地编码图像意味着你需要压缩图像。
这通常是通过图像优化插件或你的图像编辑程序（Photoshop、GIMP等）完成的。Lighthouse对你的图像进行了85%的压缩，并与原始版本进行了比较。如果节省了4KiB或更多，Lighthouse将标记该图像。因此，如果你想通过这项建议，请将你的图像压缩级别设置为85%左右。
如何有效地修复图像编码
- 选择一个图像优化插件（我推荐ShortPixel）。
- 将压缩级别设置为85%（与Lighthouse使用的级别相同）。
- 批量压缩现有图片，并在上传时选择优化图片。
7. 指定图像尺寸
指定图像尺寸是指在图像的HTML或CSS中添加一个宽度/高度。
这是在GTmetrix传统报告中推荐的优化，但仍然有用。没有高度属性的图片会导致PageSpeed Insights中的CLS更高。视觉编辑器和大多数页面生成器会自动添加宽度/高度属性，所以你通常不需要担心这个问题。但在HTML/CSS中硬编码的图像需要手动完成。
如何修复指定图像尺寸
- 通过GTmetrix报告运行一个页面。
- 了解哪些图像有指定图像尺寸错误。
- 记下GTmetrix提供的图像尺寸。
- 编辑页面，找到图像，并查看它的HTML或CSS。
- 给图像添加一个宽度和高度的属性（下面的截图）。
- 如果你使用WP Rocket，请启用 “添加丢失的图像尺寸”。
8. 从CDN上提供图像
从CDN提供图片意味着你需要启用CDN重写。当设置一个CDN时，他们默认不会改变你的URLs。你将需要启用CDN重写，这可以在Perfmatters或WP CDN重写插件中完成。这将从你的CDN提供图像，而不仅仅是你的服务器。一些图像优化插件，如Flying Images将从免费的CDN（如Statically）提供图像。Cloudflare不使用CDN URLs。这将改变你的图像URL，包括CDN URL，确保它们从CDN提供。
如何从CDN提供图片
- 设置一个CDN（BunnyCDN是一个非常流行的选择）。
- 启用CDN重写（在Perfmatters或通过一个插件）。
- 或者，选择一个具有内置CDN的图像优化插件。
旧图片URL（无CDN重写）：https://www.banzhuti.com/wp-content/webpc-passthru.php?src=https://www.banzhuti.com/wp-content/uploads/2021/01/Tom-Dupuis-Widget.png&nocache=1
新图片网址（有CDN重写）：https://banzhuti.b-cdn.net/wp-content/uploads/2021/01/Tom-Dupuis-Widget.png
9. 避免图像URL重定向
最小化重定向可能是由错误的URL提供的图像引起的。如果你改变了HTTPS或WWW版本，你应该批量更新所有图像（和链接），以便它们使用正确的版本。否则，你会看到整个网站的错误，以减少重定向。
使用Better Search Replace插件来批量更新图片URL。
10. 使用CSS Sprites组合图像
我的旧主页上使用了一个CSS sprite。你可能认为你看到了21个图标，但实际上是1张单一的图像。这是一个CSS sprite，将多张图片（通常是较小的装饰性图片，如标志或图标）组合成1张单一图片。这减少了图像的数量以及请求。你可以用CSS sprite生成器来做这件事，而不是加载21张图片，而是加载1张。
人们可能会说 “好吧，369MB的页面大小很容易在0.5秒内加载！” 但说实话，删除沉重的元素，使你的网站更轻巧，这和其他优化一样好。
11. 在移动端使用自适应图像
自适应图像为移动设备提供较小的图像。如果你在GTmetrix安卓系统的传统报告中测试你的网站（高级功能），你可能会在移动端看到服务缩放的图像错误。这是因为图像没有为移动设备调整大小。有许多自适应图像插件（ShortPixel自适应图像是最流行的）。
如何创建自适应图像
- 安装一个自适应图像插件。
- 在你的网站上重新测试移动端上正确大小的图像错误。
12. 禁用图片热链接
禁用热链可以防止人们复制/粘贴你的图片到他们的网站。如果他们这样做，图片仍然会被托管在你的服务器上，并消耗你的带宽。WP Rocket（禁用嵌入）、Cloudflare和许多主机都有禁用图像热链接的选项。
13. 删除EXIF数据
删除EXIF数据会从图像中剥离无用的信息。
移除它可以使图像略微变小。你可能不需要光圈、快门速度、ISO、焦距、相机型号、照片拍摄日期以及图像中的其他无用数据。大多数图像优化插件都有一个删除EXIF数据的选项（下面是ShortPixel）。
14. 为慢速连接的用户提供低质量的图像
Optimole插件和Cloudflare Mirage为慢速连接的用户降低了图像质量。这是一个权衡的结果，但是如果你的大多数访问者是在移动设备上，请考虑它。
15. 缓存图像
缓存图片通常是通过你的缓存插件完成的。WP Rocket和LiteSpeed Cache是WordPress上超牛的缓存插件。可以从这里下载汉化中文插件【WP Rocket完美汉化中文版|WordPress网站缓存优化加速专业插件介绍】
16. 缓存Gravatars
如果你的文章有很多评论，可以考虑优化Gravatars。可以使用WP User Avatar在本地托管Gravatars，再WP Rocket来延迟我的评论和Gravatar的JavaScript（wpDiscuz和gravatar）。由于我的评论被延迟和优化，它对我的博客的初始加载时间的影响几乎为零。我试过Gravatar缓存插件，但它们对我不起作用。
17. 调整GIF的大小
就像你把图片调整到正确的尺寸一样，GIF也应该被调整大小（使用GIF GIF）。
第1步：上传GIF并调整其大小。
第2步：压缩它。
在你的网站上嵌入它，是不是很不错？
18. 避免嵌入图片
始终将图像上传到你的网站，而不是从其他网站复制/粘贴。否则，你会有额外的请求，因为它不是托管在你的服务器上，而是从其他地方拉来的。
19. 图像优化工具
只是一个提醒；避免使用多个插件来实现相同的功能!
主要的图像优化工具
- ShortPixel – 无损压缩、删除EXIF、调整大小。
- ShortPixel Adaptive Images – 向移动设备提供更小的图像。
- BunnyCDN – 我推荐用于提供图像和其他资产的CDN。
- WebP Converter For Media – 将JPEG/PNG转换为WebP图像。
- Elementor Lazy Load Background Images – 懒加载背景图片。
- GTmetrix Legacy Reports – 显示新报告中没有显示的图像错误。
- Perfmatters – 启用CDN重写，从你的CDN提供图片。拥有其他速度优化功能，以消除臃肿和卸载特定页面上的资产。
其他图像优化工具
- Awesome Screenshot – 用于拍摄屏幕截图的Chrome扩展。
- Better Search Replace – 大量更新需要优化的图片。
- Cloudflare – 包括图像优化，如热链保护、海市蜃楼、抛光。
- CSS Sprite Generator – 将多个装饰性图片合并为一个CSS sprite。
- Flying Images – 优化插件，从Statically CDN提供图片。
- WP User Avatar – 上传一个本地托管的Gravatar图片（见我的评论）。
- WP Rocket – 在大多数Facebook民意调查中排名第一的缓存插件，具有图像优化功能。
- Zoom – Chrome扩展，在截图时获得完美的缩放级别。
或者可以参考搬主题的文章【5个WordPress最好的图像压缩优化插件2021年最新对比评测】
二、常见问题
我如何在WordPress中优化图片？
图像优化插件通常处理压缩、WebP和删除EXIF数据。否则，要确保图片有适当的尺寸和懒惰加载，这是图片优化的两个关键部分。
我如何在WordPress中正确地调整图片的大小？
将图像调整到正确的尺寸。GTmetrix的传统报告告诉你他们应该被调整到正确的尺寸。这在以前被称为服务比例的图像。
我如何在WordPress中创建WebP图像？
大多数图像优化插件都有一个将JPEG和PNG转换为WebP图像的设置。否则，请在WordPress的资源库中搜索WebP插件。
如何延迟加载屏幕外的图像？
这意味着你需要懒加载图像。如果你在PageSpeed Insights中出现这个错误，很可能是由于CSS中的背景图片，这些图片更难懒加载。
我如何有效地对图像进行编码？
压缩你的图像可以解决这个问题。PageSpeed Insights使用85%的压缩水平来检查储蓄是否为4KiB或更大，所以尽量将你的图像压缩在85%左右。
暂无评论内容