无论您的网站如何优化,图像始终是页面上加载速度最慢的元素之一。如果你想将 WordPress 的速度提高到最大,你需要实施一个专门针对图像的策略——在 WordPress 中也称为图像优化。
今天的帖子分享了六个通过减小文件大小来优化图像的快速技巧——所有这些都是为了速度。如果您想要一个快如闪电的 WordPress 网站,请继续阅读!
WordPress 中的图像优化技巧 #1:选择正确的文件类型
使用 Photoshop 和其他图像编辑软件时,您可以指定要保存的文件类型。绝大多数在线图像分为两种文件格式——JPEG 和 PNG。
那么你应该使用哪一个呢?这得看情况。两种选择各有利弊,选择很大程度上取决于场景。
- JPEG – JPEG 是显示各种颜色的照片和其他图像的最佳选择。它们也可以被压缩,以牺牲质量来减小文件大小。
- PNG – PNG 赢得了图形、绘图、文本和一些屏幕截图。与 JPEG 不同,它们还支持透明度。这种格式使用无损压缩,质量更高,但文件也更大。
一般来说,文件格式是由我们使用的图像类型决定的,如上所述。但是在文件大小方面选择错误的文件格式会有什么后果呢?
好吧,我们来看几个场景来测试一下。
我的 WordPress 仪表板的这个全尺寸屏幕截图是 150kb 的 PNG 格式,但 259kb 的 JPEG 格式。请记住,屏幕截图通常属于 PNG 格式 - JPEG 格式大约占 75%。
(编者按:PNG大多数屏幕截图都很好,但不是全部。如果您有一些使用多种颜色的屏幕截图 - 假设您的屏幕截图包含照片 - 您最好使用 JPG。)
但是,完整的 -我拍摄的这张照片的大小版本返回相反的结果。 JPEG格式的照片为1.26mb;巴布亚新几内亚高达 7.23mb。这意味着 PNG 的重量超过 550%(哎呀!)。
这显示了正确的文件格式对图像大小的重要性。如果有压力,请遵守以下规则:照片和任何多种颜色的照片,JPEG;其他一切,PNG。
2.调整图像大小
当您减小图像的大小时,您可以减小其文件大小。毫无例外。
为了让您的网站保持轻便和灵活,请确保图像的物理尺寸尽可能小——通常是您希望它们显示的尺寸。如果您网站的最大宽度为 1000 像素,则有没有理由上传宽度超过 1000 像素的图片。比必要的大确保图像携带不必要的体积,使您更难在 WordPress 中正确优化图像。
虽然 WordPress 缩略图功能可以以较小的尺寸显示图像,但这不会改变相关图像的基础文件大小。显然,摄影师和其他艺术家可以例外,他们可能希望显示与其全尺寸、高分辨率作品相关联的缩略图。
再次,请允许我向您展示您可以节省的费用。
我之前照片的全尺寸版本尺寸为 2592 x 1456 像素,大小为 1.26mb。但是让我们看看将图像大小调整为几个常见宽度时文件大小会缩小多少。
WordPress中的图片优化示例:
- 1200px宽:394kb
- 1000px宽:298kb
- 800 Pixel Width : 219kb
- 600 像素宽度:154kb
如您所见,尺寸节省确实惊人!
要以节省时间的方式调整图像大小,您可以在 WordPress 网站上安装 Optimole,它会自动执行所有操作。此外,它还可以调整图像大小以获得最佳显示效果,这意味着图像不会以完整尺寸加载,但它们会适合每个用户的视口。换句话说,无论您使用什么设备或屏幕尺寸,Optimole 都会加载完美的图像尺寸。
3.裁剪图像
调整图像大小是减小文件大小的快速方法。它将创建您图像的精确副本,但一切都会变小。
将图像缩小超过某个点意味着某些元素几乎不可见。当图像不再聚焦时,这尤其成问题。
裁剪是调整大小的替代方法。您基本上不需要缩小整个图像,而是修剪边缘——就像在照片上使用剪刀一样。您试图显示的图像部分变得更加突出,您可以消除背景中的所有干扰。
这里演示了如何使用可信赖的 WordPress 屏幕截图来裁剪图像,而不是简单地调整图像大小。
调整后的图片:
p>
裁剪图:
当然,裁剪的好处在于,就像调整大小一样,它可以减小图像大小,减小文件大小,因此这是在 WordPress 中进行图像优化的好方法。
4.降低图像质量(有损压缩)
完成裁剪和调整图像大小后,您可以通过压缩进一步减小文件大小。虽然 PNG 也可以压缩,但这种技术效果特别好,并且在 JPEG 中很流行。
JPEG 现在支持一种称为有损压缩的压缩。这意味着一些图像数据被剥离以减小文件大小。
例如,我们可以让相邻的两个像素,如果它们表现出最细微的颜色差异,我们就可以让它们相同。这种变化肉眼几乎看不出来,但颜色越少文件越小。
当使用图像编辑软件保存 JPEG 文件时,系统会要求您从 0-100 中选择一个质量分数。它本质上是图像质量和文件大小之间的权衡。
- 分数越高:压缩越低;更高的质量;更大的文件大小。
- 分数越低:压缩率越高;质量较低;较小的文件大小。
一般来说,质量得分的微小变化对图像的整体质量影响不大。事实上,您的访问者不太可能分辨出其中的区别。
为了说明这一点,请看下面的两张照片。一个质量得分为 100,一个质量得分为 80。哪个是哪个?
WordPress图片A中的图片优化:
图B:
点击此处显示
照片 B 的质量得分为 100。
很难区分,不是吗?但是,就文件大小而言,差异是白天和黑夜:418kb 与 90kb。
但是,您不能永远降低质量,因为在某些时候,质量会下降。下图的质量得分为 20:
/ p>
当然,它可能只有 28kb,但我不希望它出现在我的网站上,是吗?
现在,没有完美压缩级别的黄金法则。然而,与直觉相反的是,图像越复杂,在通过 WordPress 进行最终图像优化的过程中,质量损失就越大。
5.在 CDN 上提供图像
在线发生的一切都是瞬间发生的,对吧?不,实际上。访问者位置与网站服务器之间的地理距离会影响网站速度——距离越大,等待时间越长。
要解决此延迟问题,请考虑安装 CDN。 CDN 将您的网站存储在分布在世界各地的多台服务器上,然后将您的访问者连接到离他们最近的服务器。延迟问题得到解决,您的网站服务速度更快。
如果您想加速 WordPress,您会很高兴得知 Optimole 插件带有自己的免费 CDN - 仅用于图像。
您需要做的就是安装并激活 Optimole。 Voilà – 您的图像将以创纪录的速度显示。
对于一些更复杂且更好的 CDN 解决方案,请查看我们的其他帖子。
6.延迟加载
默认情况下,WordPress 软件会平等对待所有图像。但是,这显然是资源的低效使用,尤其是当您想在 WordPress 中进行任何图像优化时。
毕竟,页面底部的图像比页面顶部的图像要晚得多 - 第一张图像值得优先考虑吗?
优先考虑图像正是延迟加载所实现的。页面顶部的图像具有优先级,而折叠下方的图像仅在访问者向下滚动页面时加载。这使得延迟加载“及时”等同于网页加载。
如果你想使用延迟加载来提速WordPress,Optimole会再次帮助你。这个插件很酷的一点是它提供了一个低质量图像占位符功能,可以延迟加载中间低质量图像,直到全尺寸图像完全显示。
它也是完全免费的。
给你
最后,我们将介绍六个快速提示,帮助你在 WordPress 中优化图像。正如您所看到的,通过组合其中的几种策略,您可以大大节省图像文件的大小。您的访问者会喜欢这个——您的网站加载速度会明显加快!
如果您使用像 Optimole 这样的插件,优化图像实际上非常容易,它会自动为您完成所有工作(而且大部分是免费的)。
如果您有任何图像优化问题,请在下面的评论部分分享!
想让您的网站更快?不要忘记我们关于如何加速 WordPress 的免费电子邮件课程: