如何制作不会减慢 WordPress 的视网膜就绪图像

技术教程 2022年1月19日

957 0 5

我网站上的图片看起来不错，加载速度很快.我以为这就够了.然后我花了一些时间让它们支持 Retina 和 WOWZA，升级后的照片看起来非常棒！现在我已经没有办法回去了.

Retina 设备每英寸的像素更多，因此它们需要高分辨率图像来填充这些额外的像素.但苹果设备并不是唯一的像素吞噬者.Surface 平板电脑、Android 手机、iPhone，它们都需要支持 Retina 的图像.

在这篇文章中，我将向您展示如何在 WordPress 中为 Retina 设备创建高分辨率图像.我将教你如何从中拍照……

……到这个……

...同时确保您提供最优化的文件，因为这些精美的高清图像非常庞大，如果服务不正确，会大大降低您的网站速度.

附:如果上面的图片看起来一样，那是因为您的设备不支持高清图片，但它们正变得越来越流行，因此您应该花时间针对高分辨率屏幕进行优化.

视网膜图像的 WordPress 指南

您的屏幕由数千个(如果您有大屏幕，可能是数百万个)小方块组成，称为像素.要渲染图像，图像文件包含屏幕上每个像素的说明，告诉它生成图像所需的颜色.

图像分辨率会极大地影响图像在屏幕上的显示方式，但不会像您想象的那样.我们假设屏幕上的分辨率与纸上的分辨率相同，但事实并非如此.

那么让我们通过一个小测验来测试你的假设吧！

1.哪种分辨率产生的文件最小?
A) 72 DPI
B) 150 DPI
C) 300 DPI
D) 以上所有

2.您应该以什么分辨率保存图片，以便它们在网络上看起来质量更高?
A) 72 DPI
B) 150 DPI
C) 300 DPI
D) 谁在乎?

这两个问题的答案都是 D.

在此过程中，我了解到 72 DPI 是网络的标准分辨率.我假设如果我想让我的图像在 Retina 屏幕上看起来不错，我应该把这个数字加倍.我选择了 150 DPI，因为它是一个不错的整数，给了我一些额外的收益，所以我开始以 150DPI 保存我网站上的所有图像.

我现在知道我完全错了.

首先，DPI 不会影响图片在您网站上的显示方式.DPI 代表纸上的每英寸点数.这就是真正发生的事情.

查看以不同 DPI 保存的这三张图像:

Photograph Beetle on Succulent — 72 DPI，149KB

它们看起来都一样，并且它们都具有相同的文件大小.如果您不相信我，请下载它们并在 Photoshop 中打开它们.

它们都具有相同的文件大小，因为它们都具有相同数量的像素的相同指令.

您的屏幕不会显示 DPI，但您的打印机会.DPI 告诉您的打印机在将图像打印到纸上时，将屏幕上的像素打包在一起的密集程度.

这是我打印这三张图片时的样子:

Bug image at 72DPI, 150DPI and 300DPOI printed on one sheet of paper, each image is a different size — 所有图片打印在一张纸上

分辨率表示您希望图像数据显示的密集程度.如果我有一个 100 像素 x 100 像素的图像，我有 10,000 像素的数据.

在高分辨率图像中，我将这些数据打包到更小的空间中，从而产生更多细节.
对于低分辨率图像，我将这些数据分散到更大的区域.

图像分辨率不会改变图像中的数据量，只会改变数据显示的密集程度.

Miss-iss-i-PPI

PPI 或 每英寸像素数 是衡量屏幕每英寸可以显示多少像素的指标.

Retina 屏幕的像素数量是垂直和水平的两倍，这意味着以前一个像素占据的空间现在有四个像素！

正如我们从上面所知道的，我们没有足够的数据来为所有这些新像素提供指令.这就是为什么 Retina 屏幕上的常规图像看起来如此模糊的原因.又是这个错误.

Retina 屏幕不会像打印一样提供漂亮但微小的图像来保留细节，而是尝试将数据分散开来.可怜的被忽视的像素，没有自己的数据，试着用周围像素的数据来弄清楚他们应该是什么颜色，就像一堆jockers.

他们正在尽力而为，但老实说，他们做得很糟糕.

要解决这个问题，我们需要为 WordPress 提供更密集的图像，以便有足够的数据可供使用.这将我们带到如何制作视网膜图像，第 1 步……

如何使图像 Retina 就绪?

第 1 步.生成双倍像素的图像
第 2 步.将 Retina 图像提供给 Retina 设备
第 3 步.将 Retina 图片上传到您的网站

第 1 步:您需要为您的网站制作两倍像素尺寸的图片

如果您遵循最佳做法，那么您知道在上传图片之前需要缩放图片到合适的尺寸.要在 WordPress 中为每个像素生成足够数据的 Retina 图像，您需要将上传的每张图像的像素尺寸加倍.

如果您有一个 1600 像素宽和 400 像素高的大型英雄图像，您需要生成一个 3200 像素宽和 800 像素高的图像.如果您的博客宽度为 800 像素，那么您博客文章的图片宽度必须为 1600 像素，依此类推.

您只需将像素尺寸加倍，即可获得您的图像将显示的最大尺寸.您不需要为每种可能的响应尺寸创建具有双尺寸的图像.

您可以在文件扩展名前的文件名中使用@2x 保存图像，但这不是必需的，因为下面的插件会为您执行此操作.

如何为我已经上传的图片制作 Retina 图片?

如果您已经拥有一个包含大量内容的网站，则使您的网站适合 Retina 可能是一个耗时的过程，因为您必须返回从网络或相机下载的原始图像并生成适当的尺寸.你不能简单地下载图像并在 Photoshop 中放大它，否则你会得到同样模糊的结果.

如果您没有缩放图片而是上传了一张巨大的图片，那么如果图片足够大，您可能会很幸运.如果您要为所有图片上传大尺寸图片(2000 像素 x 800 像素)，即使它们只会以 800 像素出现在博客正文中，那么您也不必上传一个大的替代品.你已经有了一个足够数据的图像，即使它有点过大；但是，最好的做法是生成性能优势所需的确切尺寸.

第 2 步:将 Retina 图像提供给 Retina 设备

有很多不同的方法可以做到这一点.我要给你看两个.首先，我将向您展示手动方式，以便您的代码爱好者可以看到发生了什么.然后，我将向所有讨厌代码的人展示快速简便的方法 😉

选项 1:在 WordPress 中手动修改 Srcset

提供 Retina 图像的更好方法之一是使用 srcset 属性.这是它的工作原理.您无需使用 src 属性来共享一个图像，而是为浏览器提供一个可供选择的图像列表.然后浏览器选择下载并显示最适合访问者设备的图像.这不仅适用于 Retina 图片，您还可以使用它来提供不同尺寸或不同格式的图片.

我们将专注于 Retina 图像，因此在我们的 srcset 属性中，我们需要为非 Retina 设备包含一个常规图像和一个用于 Retina 设备的 Retina 图像.您不想浪费时间在非 Retina 屏幕上下载和提供超大图像，因此将两者都包括在内很重要.您还需要为尚不支持 srcset 的浏览器添加常用的 src 标签.

这就是它的样子:

<img srcset="logo_regular.jpg 1x, logo_retina.jpg 2x" src="logo_regular.jpg"/>

看到 1x 和 2x 了吗?这有助于浏览器识别哪个图像是常规版本，哪个是 Retina 版本.如果用户有 Retina 设备，浏览器将提供 2x 图像.如果他们不这样做，它将提供 1x 版本.如果浏览器不支持 srcset，那么它将使用 src 属性中的那个.

简单吧?您只需在插入图像时将 srcset 属性添加到 HTML 代码中，就可以提供 Retina 图像......除了从来没有那么容易.

问题是您没有为较小的设备提供浏览器较小的图像.换句话说，上面的代码不会产生响应式图像.您可以在 4G 的小型 iPhone 上提供一张巨大的 Retina 照片.

这里可能会变得复杂，因为您需要添加更多属性来组织您想要为浏览器提供的所有不同选项.

首先，您需要学习 HTML5 <picture> 元素.

<picture> 元素还有很多事情要做:

<picture>
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="my image" width="100" height="100">
</picture>

看到 <img> 是如何嵌套在 <picture> 元素中的吗?不支持 HTML5 <picture> 元素的浏览器将回退到 <img> 元素中指定的图像.实际上，<img> 是一个要求(否则图像将无法渲染)，并且必须出现在最后.

但是 <picture> 元素最酷的部分是隐藏在里面的 <source> 元素.<source> 元素允许在 media 属性中进行媒体查询.为了给浏览器提供不同的响应式图像选项，您将在 <picture> 元素中插入多个 <source> 元素，并通过 media 属性告诉浏览器何时适合使用它.然后，您将在 <source> 元素的 srcset 属性中添加一个 Retina 图像和一个常规图像.让我们来了解一下要点，因为它很多.

加载要点 d42f64209472c970b30ecfd9af239d14

嗯……情况迅速升级.而且，您甚至不想知道添加 WebP 图像选项后需要多长时间.

我不建议手动修改所有图像以包含所有这些额外代码.你肯定想使用一个工具来帮助自动化这个过程或一个插件来修改你的 HTML.这将我们带到了 WP Retina 2x 插件.

选项 2:安装和配置 WordPress Retina 2x 插件

WP Retina 2x 是 WordPress 存储库中的免费插件，具有专业版.免费版足以满足本教程的需求.

Screenshot of WP Retina 2x plugin on wordpress.org — WP Retina 2x 插件

为什么 WordPress Retina 2x 是最适合这项工作的插件?

您无需手动编辑 HTML 代码即可添加 Retina 图片
与其他一些 Retina 插件不同，WordPress Retina 2x 不需要您使用 @2x 重命名所有图像以将它们识别为 Retina 图像.
WordPress Retina 2x 与缓存插件兼容，并不是所有 Retina 插件都兼容.
它有一个媒体库视图(见下文)，因此您可以跟踪哪些图像需要进行 Retina 处理.如果您的网站包含大量现有图片，这将非常有用.
该插件为您提供了多种在 WordPress 中提供 Retina 图片的选项，因此如果一种方法与您的网站不兼容，您可以切换到另一种方法.
它与 Smush 和 Smush Pro 完美集成

Screenshot of WP Retina 2x media library view — 升级到 WP Retina 2x Pro 将为您提供额外的工具来加快上传和替换大量现有图片

让我们关注最后一个原因，因为在处理 Retina 图像时，图像优化变得更加重要.

通过上面的甲虫照片，您可以看到 Retina 图像文件大小是常规图像的两倍.如果您每页有很多图片，那么这将大大降低您的网站速度.

Smush 可以帮助您优化图像，但 Smush Pro 会给您带来额外的优势.Smush Pro CDN 可以自动将您的图像转换为 WebP 文件，这些文件比可比较的 JPEG 和 PNG 小得多.Smush Pro CDN 还会自动调整您的图像大小，因此如果您的媒体库中的图像过大，Smush Pro CDN 将提供正确的大小.在此处免费试用 Smush Pro.