WordPress 图像优化终极指南
图片是您网站上最重要的元素之一，正确使用图片可能是提供出色用户体验的热门网站与没有任何流量或转化的网站之间的区别.但图像是，嗯，复杂.
您需要做很多事情才能使它们完美无缺，这样您才能获得最大收益.
在这个终极 WordPress 图像优化指南中，我将为您提供优化图像所需的所有信息.我们将经历一切:
我们将尽可能简洁地介绍我们在之前的图片优化帖子中分享的所有重要子主题和信息(包括我们的完整的图片 SEO 指南)，因此您很快就会成为 WordPress 图像优化师.如果您想对这些主题进行更彻底的解释，我在这篇文章中提供了指向我们深入教程的链接.
准备图像
在 WordPress 中优化图片
图片搜索引擎优化
提供图片
如果您想知道最好的 WordPress 图像优化器是什么，请看看我们自己的 Smush Pro.将其与 Hummingbird 和 SmartCrawl SEO 结合使用，因为这三者都可以显着提高图像的性能.您可以在您的网站上免费试用所有这三种免费试用.
希望在低流量、个人或爱好网站上优化图片?我们还有 WordPress.org 上提供的免费版 Smush.
如何优化图像
在您将图片上传到 WordPress 之前，您需要确保您的图片在制作时达到最佳状态.您需要正确地构图、完美地调整大小、使用适当的图像格式并为其指定一个描述性的文件名.
合成图片
创建图像时最重要的问题如下:
这个图片有必要吗?
图片需要大量资源才能提供给访问者.它们是"昂贵"的站点资产，因此您不应仅将它们用于填充空间.创建可增强您的内容的原创图片，并尽可能使用廉价资源(例如标题和文本)代替图片进行交流和添加样式.
切勿在图片中添加文字.这种做法不遵循可访问性最佳做法，如果您的图像缩小为移动响应，那么文本将更小且更难阅读.此外，带有文本的图像需要具有更高的质量才能保留字母的精细细节.不要浪费资源，使用 CSS 在图像上创建文本相反，为了更好的结果.
放弃图片很难，我知道.它们确实可以让您的网站看起来很棒，但根据对网站性能的研究，转化用户的会话比未转化的会话拥有 38% 更少图像，因此更多的图像不会添加到底部线.
调整图像大小和裁剪
说到图片，尺寸很重要！而且不是越大越好.GTmetrix 和 Google PageSpeed Insights 建议缩放您的图像以适应它们将要使用的容器以提高性能.
对于容器而言过大的图像需要由浏览器手动缩小.这会在加载您的网页时浪费时间和数据，而不会在性能和质量方面带来任何好处.
如何在 WordPress 中减小图像尺寸
第一步是使用浏览器中的开发者工具找出您网站上不同大小的图像容器.
观看我们的快速教程，了解如何在 WordPress 中检测大小不正确的图像.
然后使用图像编辑器调整图像的大小以适合它在您网站上的最大容器.如果您想在您的网站上使用 Retina 图像，您需要将最大容器的宽度和高度都加倍.我们将在下面详细讨论 Retina 图片.
如果您要为您的网站缩放新图像，那么剩下的就是上传图像并在为其调整大小的容器中使用它.如果您要更正网站上的现有图片，请上传图片并将旧图片的网址替换为新图片.
Smush Pro 还可以自动调整图像大小.因此，如果您有一个包含大量图像的成熟网站，请让 Smush 负责缩放.免费试用 Smush Pro.
裁剪图像
在裁剪图像时，尝试创建更紧密的裁剪并从图像中去除多余的细节和空间.
4:3 和 16:9 的比例更适合图像 SEO，因此如果您的目标是让图像在图像搜索中排名，请瞄准非全景或高瘦的图像.
为作业使用正确的图像格式
您是否对所有内容都使用 PNG?说实话.在没有插件的情况下在 WordPress 中优化图像的最佳方法是使用正确的图像格式.
每种文件类型都是为特定用例而设计的，并且都有自己的优点和缺点.
额外的图像文件功能(例如透明度)、不必要的细节和过多的颜色都会使您的图像变得臃肿.有时，这些是必要的，有时则不是.
关键是使用具有适当功能的适当图像文件来满足您的需求.
我们整理了一份可下载的 PDF 备忘单供您参考！ 单击此处获取副本
WordPress 图像调整大小压缩
图像图形类型有矢量图像和光栅图像两种.
矢量图像是数学生成的几何形状，可以在不降低质量的情况下调整大小.
光栅图像由排列在网格上的称为像素的小块组成.光栅图像仅在其要显示的尺寸或更小尺寸时才显示出高质量.否则，图像会出现像素化.
WordPress 图片压缩
选择图像文件类型时要记住的另一件事是每个人使用的图像压缩类型，因为这会影响图像在解码并出现在您的网站上时的质量.
有损压缩会在图像压缩时永久删除图像数据.有些细节是人眼无法察觉的，因此这并不总是会造成明显的质量损失.
通常，75-100% 之间的有损压缩将保持图像的完整性和高质量，但在 75% 时，图像只有一半大.当您上传图片时，大多数社交网络会将其图片压缩在 70-85% 的范围内.
无损压缩会保留所有数据，因此不会丢失任何数据，并且可以准确再现图像而不会降低质量.缺点是文件大小要大得多.这是一个比较.
图像文件类型
JPEG
JPEG 图像最适合大照片.
- JPEGS 是由消费类相机和移动设备生成的标准文件类型.
- JPEGS 可以包含数百万种颜色，并使用有损压缩来生成较小的文件大小.
- 所有主要浏览器都支持它们.
- JPEG 不支持透明度或动画.
PNG
PNG 图像在保留细节(例如屏幕截图文本)很重要的情况下是最佳选择.
- PNG 采用无损图像压缩，因此比同类 JPEG 大.
- 有 3 种 PNG:
- PNG-8 支持 256 种索引颜色，就像 PNG 的 GIF.
- PNG-24 支持 24 位颜色来创建包含数百万种颜色的调色板，因此它更像是 JPEG.
- PNG-32 支持 24 位颜色以及用于高级透明度功能的额外 Alpha 通道.
- 所有三种 PNG 类型都支持透明度，但它们以不同的方式实现.您可以在这篇博文中获得有关不同类型 PNG 以及它们如何处理透明度的完整说明.
WebP
WebP 是 Google 的开源图像格式，它结合了 JPEG 和 PNG 的优点，但文件大小要小得多.它们即将获得广泛支持.
WebP 图像文件有两种类型
- 第一个简称为 WebP，使用有损压缩.这就像 JPEG 的 WebP 版本.
- 第二种类型称为 WebP Lossless，它更像 PNG 等价物，因为它使用无损压缩.
如果您想知道如何为 WordPress 创建 WebP 文件，您可以使用插件为您完成此操作.事实上，Smush Pro CDN 将图像转换为 WebP.如果有人在支持 WebP 的浏览器上访问您的站点，Smush 将转换您的图像并提供 WebP 图像.如果他们使用不支持 WebP 的浏览器，他们将获得您的日常 JPEG 或 PNG.
SVG
SVG 是一种基于 XML 的标记语言，允许您创建二维形状来创建矢量图形.它最适合简单的形状，例如徽标、图形、旗帜、图标和几何形状.
- SVG 不适用于照片.
- 它们与所有浏览器兼容.
- 由于它们在技术上是一种标记语言，因此默认情况下 WordPress 不允许使用 SVG 来防止恶意软件注入.您应该只允许了解使用 SVG 的风险的可信用户在您的网站上使用它们.
GIF
GIF 非常适合制作愚蠢的模因动画，除此之外别无他法.
- GIF 生成的文件特别大，尤其是当图像包含动画时.对于动画，MP4 或 WebM 文件的文件大小较小.
- GIF 具有 256 色的有限调色板，并支持透明度.
- 它们与所有浏览器兼容.
- 对于如何发音没有达成共识，所以谁需要"em".
图片标题
选择正确的图像保存格式后，您需要更改相机生成的默认图像标题.
为您的图片提供简洁的描述性标题.使用您的关键字，如果它们恰当地描述了图像.如果您的关键字不能描述您的图片，请不要在图片标题中使用它们.我会在 本文的 SEO 部分 中向您展示更适合他们的位置.
批量图像编辑器
为新网站创建一批图像或返回修复您网站上当前图像的所有问题可能需要大量时间.幸运的是，有多种工具可以帮助您批量处理您的图片.
Lightroom Classic 旨在管理对图像的非破坏性编辑.使用它来批量缩放、裁剪或重命名相机中的 JPEG 图像.
Photoshop 可以帮助您批量编辑 PNG 或 JPEG.使用图像处理器或创建自定义 Photoshop 动作来记录复杂的编辑序列，然后将它们应用到其他图像.
在 WordPress 中优化图片
正确准备图像可以在问题开始之前防止很多问题.准备好图片后，WordPress 会提供一些很棒的功能来帮助您管理图片并使它们看起来最好.
WordPress 默认图片尺寸
每次您将图像上传到 WordPress 媒体库时，WordPress 默认会创建以下额外的图像大小:
- 缩略图
- 中
- 中大
- 大
如果您的主题为您的存档页面、主页等指定了额外的图像尺寸，WordPress 也会创建这些尺寸.WordPress 还会保留您上传的原始尺寸，并将其命名为 Full 为全尺寸.
为了减少为网站上不同容器手动调整图像大小的工作，您可以在媒体 > 中调整默认值.设置部分或添加自定义尺寸，以便您有更多选项可供选择.只是避免过度并为各种可能的目的创建图像，否则您将消耗托管服务器上的磁盘空间.
当您更改 WordPress 创建其他图像的方式时，它不会更新您媒体库中已有的图像.要更改您已上传的图片，您必须使用流行的重新生成缩略图插件.
如果您执行以下任一操作，则需要重新生成缩略图:
- 修改 WordPress 默认图像大小
- 添加自定义图像尺寸或
- 切换到具有不同自定义尺寸的新主题背景.
响应式图片
所有不同图像大小的用途之一是 WordPress 可以提供响应式图像.
响应式图像功能是在 WordPress 4.4 版中引入的，并且默认启用.它的工作原理是使用 srcset 属性为浏览器提供一系列可供选择的各种尺寸的图像.
浏览器不会每次都下载和提供最大的图像文件，而是为设备加载适当大小的文件.如果访问者使用的是移动设备，他们将在 srcset 中收到一个较小的图像.如果他们在桌面 Retina 设备上访问您的网站，那么他们会收到巨大的全尺寸 Retina 就绪文件.
WordPress 编写 srcset 代码并自动将图像添加到集合中，但作为图像优化审核的一部分，您的主题或插件中的任何内容都不会干扰此过程，这仍然是一个好主意.
视网膜图像
Retina 和其他高清屏幕的像素是其 4 倍.为了在高清屏幕上保留图像的细节和清晰度，您需要创建 Retina 图像，并使用足够的数据填充所有这些新像素，然后仅将它们提供给 Retina 设备.
如何在 WordPress 中提供 Retina 图像
第 1 步:生成两倍像素尺寸的图像
要在 WordPress 中生成每个像素都有足够数据的 Retina 图像，您需要将上传的每张图像的像素尺寸加倍.
- 如果您有一张宽 1600 像素、高 400 像素的大英雄图片，则需要制作一张宽 3200 像素、高 800 像素的图片.
- 如果您的博客的宽度为 800 像素，那么您博客文章的图片的宽度必须为 1600 像素，依此类推.
您只需将像素尺寸加倍即可显示图像的最大可能尺寸.您无需为每种可能的响应尺寸创建双维图像.
第 2 步:将 Retina 图像提供给 Retina 设备
选项 1:提供 Retina 图像的更好方法之一是使用 srcset 属性.您只需将 Retina 图像添加到 WordPress 用于生成响应式图像的源集中.
选项 2: 安装和配置免费的 WordPress Retina 2x 插件.
第 3 步:将您的 Retina 图片上传到 WordPress 并在您的网站上使用
当您在网站上使用 Retina 图像时，请使用全尺寸宽度和高度一半的图像变体.
下一代 WebP 文件
由于下一代图像如 WebP 没有得到广泛支持，我们还可以使用 srcset 来为兼容浏览器提供 WebP 图像.
首先，您需要使用 WebP 转换器来转换媒体库中的现有图像以及将来上传的图像.然后需要判断访问者的浏览器是否支持WebP图片.
最后，您可以使用 srcset 或其他方法来提供 WebP 图像(如果它们受支持)或传统文件格式(如 PNG 或 JPEG)(如果不支持).
Smush Pro 可以转换使用 tag on your site to WebP and serve them to compatible browsers with her CDN.You’ll need to use a different method for CSS background images though.Get a free trial and see what a difference it makes for your site.
Check out the video below for an example of how to use a WordPress image optimizer to serve next-gen images.
的图像
图片搜索引擎优化
图片搜索引擎优化最近变得越来越重要，并且有很多机会通过图片来增加流量.与书面内容不同，重复内容会受到惩罚，而图片则是最佳优化的图片将在搜索结果中"获胜"并获得最佳排名.
使用正确的 HTML 属性正确识别您的图片可以帮助您在图片搜索中发现您的图片，更不用说提高网络可访问性，这非常重要.
以下是您需要为每张图片填写的重要图片属性.
图片标题
WordPress 中的图片标题与文件名标题不同.在 Photoshop 或其他图像编辑器中创建图像时添加的文件标题比 WordPress 媒体库中的图像标题字段更重要.前者对 SEO 有贡献，后者可以完全排除.
替代文字
替代文字不仅对 SEO 很重要，对可访问性也很重要.
要为您的图片编写有效的 alt 标签，您需要编写一个简洁的描述，以传达图片包含的内容或试图传达给看不到图片的人，因为他们正在使用屏幕阅读器，或无法下载图像.此外，Alt Text 属性中使用的替代文字取决于您的内容中使用的图片类型.
阅读我们的在 WordPress 中编写图像 alt 标签的综合指南，以在 SEO 和可访问性之间取得恰到好处的平衡.
图片说明
图片周围的标题和其他文字，为您的图片提供上下文.它们还帮助 Google 了解图像的含义.并非所有图像都需要标题，但标题的功能与正文中的标注类似.由于它们与您的其余文本分开并突出显示，因此被阅读的可能性是其四倍.
页面上靠近图像的其他元素
Google 在尝试理解您的图片时也会考虑整个页面.页面标题是什么?网址是什么?即使这些与您的图片没有直接关系，Google 也会将它们用作排名因素.如果可能，请在页面标题、页面 URL 和图片 URL 中包含关键字和相关词组.
图片站点地图
为了确保 Google 将您的所有图片编入索引，您需要创建一个图片站点地图.如果您经常更新内容、拥有电子商务网站或拥有新网站并希望 Google 尽快将您的图片编入索引，那么站点地图就显得尤为重要.
如果您想要一个简单的解决方案，您可以使用 SmartCrawl 生成站点地图.
社交媒体标签
社交媒体标签是您标记内容的一种方式，因此当有人在社交网络上分享内容时，他们会分享您希望他们分享的内容.Facebook、Twitter、LinkedIn 和 Pinterest 都支持 Open Graph，这是 Facebook 的社交媒体标签语言.Twitter 有自己的元标签，但如果 Twitter 社交媒体标签不可用，它会识别 Open Graph 数据.
重要的图像开放图谱标签是 og:image，它允许您指定当有人分享您的帖子时，您希望 Facebook 和其他社交网络显示什么图像.
提供图片
优化图像时您需要注意的最后一件事是图像的传送方式.您可以在 WordPress 中使用多种工具来改进图像优化和 PageSpeed.Smush Pro 有延迟加载和她自己的 CDN.蜂鸟可以帮助浏览器缓存.获得无风险会员资格免费试用，并在您的网站上试用两者的专业版.
延迟加载
延迟加载是一种通过延迟加载当前不在浏览器视口中的非关键资产来提高初始页面速度和有效负载的技术.在 WordPress 中延迟屏幕外图像基本上意味着等待加载我们还看不到的图像.
浏览器缓存
缓存 是一种可靠的方式，可以通过将资产存储在缓存中以加快检索速度来提高访问者的网站速度.使用 HTTP 缓存时，浏览器会将用户通过 HTTP 下载的资产(例如图像)的副本存储在其缓存中，以便无需额外访问服务器即可检索它们.如果操作得当，这会显着提高重复访问者的性能.
内容分发网络，CDN
CDN 不仅在一个位置提供来自您的网络服务器的图像，而且位置遍布全球，因此加载图像所需的数据传输发生得更快.
如果您使用 CDN 来提供图像，需要记住的一件事是您需要避免更改 CDN 或激活 CDN 并停用.这会更改图片网址，并对您的图片 SEO 产生负面影响.
其他资源
有关图像优化的更详细教程，请查看我们关于该主题的其他帖子:
- 如何使用 WordPress 正确调整大小和提供缩放图像
- 比较网站的最佳图像格式！ PNG、JPG、GIF 和 WebP
- 如何使用 WordPress 以下一代格式提供图像
- 如何制作不会降低 WordPress 速度的视网膜图像
- 默认 WordPress 图片尺寸以及如何添加自定义尺寸
- 图片搜索引擎优化完整指南
- 如何使用延迟加载延迟 WordPress 中的屏幕外图像
- 6 个延迟加载插件让您的 WordPress 网站更快
- WordPress 批量照片编辑
这就是 WordPress 图像优化的全部
图片优化有很多内容，因此最明智的入门方法是审核您的网站并查看图片的位置.首先关注最重要的事情，缩放图像和添加替代文本是两件耗时的事情，但可以帮助您取得显着的改进.
其他图像优化策略，例如启用延迟加载、使用浏览器缓存、添加 CDN、创建图像站点地图、使用下一代图像，可以使用 Smush Pro 等 WordPress 图像优化器一举完成.因此，如果您没有很多时间或正在管理大量网站，那么使用 WordPress 自动图像压缩插件是一个不错的起点.
最后，使用 Lightroom 和 Photoshop 等功能强大的批量图像编辑器可以帮助您更快地改进单个图像.
如果您真的想改进您的图像优化游戏，那么 WPMU DEV 的优化三连胜就是您的最佳选择:Hummingbird、SmartCrawl 和广受欢迎的 Smush Pro.Smush Pro 是最好的 WordPress 图像优化器，因为它可以做到这一切.您可以通过免费试用在您的网站上试用所有三个.如果您从未认真对待图片优化问题，您会惊喜地发现网站性能的提升幅度.
标签:
