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

我网站上的图片看起来不错,加载速度很快.我以为这就够了.然后我花了一些时间让它们支持 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
Photograph Beetle on Succulent
150 DPI,149KB
Photograph Beetle on Succulent
300 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 屏幕上的常规图像看起来如此模糊的原因.又是这个错误.

Photograph Beetle on Succulent
Retina, 398KB
Photograph Beetle on Succulent
Not Retina obvi

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"/>

看到 1x2x 了吗?这有助于浏览器识别哪个图像是常规版本,哪个是 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 是最适合这项工作的插件?

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

如何配置 WordPress Retina 2x 插件以制作 Retina 显示图像

让我们看看 WordPress Retina 2x 插件中的一些可用设置.

基本设置

Screenshot of WP Retina 2x basic settings

Disabled Sizes 允许您避免将某些图像尺寸转换为 Retina 以节省磁盘空间.

Retina Quality 允许您设置 JPEG 的压缩质量.

此页面上的重要设置是方法.提供 Retina 图像有多种选择.

Screenshot Retina Settings Method Dropdown
如果一种方法无法纠正,请选择另一种.

图片填充
PictureFill 是提供 Retina 图像的推荐方法.它使用 JS polyfill 加载图像或重写 HTML 以使用 WordPress 中的 srcset 属性.

响应式图片
要使用 Responsive Images 方法,您必须使用 WordPress 4.4 或更高版本,它会自动使用 WordPress 中的 srcset 属性.该插件将 Retina 图像添加到源集.

Retina.js
此方法完全依赖于 JavaScript.HTML 会同时加载普通图片,如果检测到 Retina 支持,它还会加载 Retina 图片,因此会下载两个图片文件.

HTML 重写
HTML 重写 会在检测到 Retina 设备时更改 src 标签,但与某些缓存插件一起使用时可能会出现问题.

视网膜图像
Retina images 方法将修改您的.htaccess 文件以提供适当的文件.如果您使用的是 Smush Pro CDN 等 CDN,此方法将不起作用.

高级设置

高级设置部分,您需要启用自动生成,以便新上传的内容自动创建 Retina 文件.然后按下蓝色按钮保存您的设置.

Screenshot WP Retina 2x Advanced Settings
自动生成是这里的重要设置

第 3 步:将您的 Retina 图片上传到 WordPress 并在您的网站上使用它们

创建 Retina 图像并配置插件后,就可以将它们上传到您的网站了.上传过程是相同的,但您可能需要调整网站设置,以便将大文件上传到媒体库.

Screenshot of media library
图片宽度为1200px,但我需要使用版本即 600px 以获得 Retina 质量

当您要在您的网站上使用图片时,您需要使用宽度和高度为全尺寸一半的图片变体.

该插件仅识别通过媒体库创建的图像.对于插件无法识别的图像,例如主题图标和徽标,您必须在.png 或.jpeg 扩展名之前将@2x 添加到文件名中.然后将文件上传到与原始文件相同的位置,以便 WP Retina 2x 插件将其识别为 Retina 文件并在兼容设备上提供.

例如,如果您有一个 200 x 200 像素的站点图标,文件名为 icon.png,您将创建一个 400 x 400 像素的版本并将其命名为 [email protected]通过 FTP 或 SFTP 上传 到与原始 icon.png 相同的文件夹.该插件将负责其余的工作.

正如我之前提到的,如果您在一个包含大量现有图像的网站上工作,那么 WP Retina 2x Pro 插件有一些 省时工具,使上传和替换现有图像的过程变得简单.

WP Retina 2x 可能存在的问题

请注意,如果您使用某些幻灯片插件或不兼容的 CDN,您可能会在使用 WP Retina 2x 插件时遇到问题.例如,已知 WP 引擎 CDN 会导致问题,因此您必须在 WP 引擎设置中修改重写规则,这里的说明.如果您使用的是 Amazon S3,则根本不应该使用 WP Retina 2x.

如果您正在寻找仅适用于 WP Retina 2x 且不会降低 WordPress 速度的 CDN,我建议您试试 Smush 吗?您可以使用免费版本进行优化并改善您的图像,但为了访问 CDN 并真正减轻那些沉重的 Retina 图像的重量,Smush Pro 将为您提供所需的东西.您可以在此处注册免费试用 Smush Pro.

要激活 Smush Pro CDN,请安装 Smush Pro 插件.然后在 Smush 设置中,转到 CDN 部分并按下 Get Started 按钮.

Screenshot of Smush Pro settings
Smush CDN 包含在 Smush Pro 中

激活 CDN 后,我建议启用 WebP 转换.WebP 图像文件要小得多,因此转换图像将使您的页面加载速度更快.您可以在此处获得福利的完整细分.

Screenshot of Smush Pro settings
使用 Smush Pro 可以轻松将图像转换为更高效的文件类型

您还需要启用自动调整图像大小.这样,如果您有超大的图像,您将不会占用太多的文件空间来提供比您需要的更大的图像.只需翻转 Smush Pro CDN 设置中的启用我的图像的自动调整大小开关.

Screenshot Smush Pro resize images CDN
翻转启用我的图像自动调整大小开关以加快 WordPress

Smush CDN 将允许您提供最高效的 Retina 图像,这样您就可以获得所需的质量,而不会因臃肿而减慢您的网站速度.

就是这样

虽然使用 Smush Pro CDN 和 WP Retina 2x 插件是在 WordPress 中提供大多数 Retina 图像的最佳方式,但 SVG 图像也是平面徽标和图标等简单图形的一种选择.您可以在此处了解有关此棘手文件类型的更多信息.

Retina 图片仅提供给使用功能强大的设备的访问者,其他访问者不会体验到性能变化.使用 WP Retina 2x 插件,他们仍将获得与以往相同的图像,也就是说,直到他们升级为止.

Retina 设备正变得越来越流行,因此您应该开始升级您的网站.最好的起点是确保您添加到网站的所有新图像都支持 Retina.然后,通过创建 Retina 版本并替换现有图像来修改您网站上最大、最令人印象深刻的图像.然后,浏览并缩放留在博客文章正文中的所有超大图像,等等.在不知不觉中,您将拥有一个包含精美照片的华丽网站.

标签:

5

发表回复