跳到主要内容

当涉及有效的内容营销计划时,视觉影响是最重要的功能之一。欢迎来到全新的系列丛书-WordPress图像管理终极指南。

它旨在为您提供管理WordPress中的图像资产所需的工具-包括技术优化,SEO,CDN集成和库管理。在本多部分指南中,我们将仅推荐我们尝试过或行业专家推荐的方法,教程,插件和主题。

我们还将避免盲目建议WordPress存储库中使用率很高的插件。相反,我们将推荐那些在价值主张和绩效优化之间取得完美平衡的方法。

您可能想知道我们将如何去做。在ThemeForest中,我们的Total – Responsive多用途WordPress主题的24,000多次下载可能不是一个很好的指标。

好吧,我们从行业领先的WordPress托管公司(例如WPEngine和Pagely)中挑选了最好的博客,并了解了他们在为成千上万的知名客户提供数十亿浏览量时学到的知识。我们已将所有这些信息压缩成小段和要点,以确保您的在线成功。现在开始吧,好吗?

Wordpress图像管理终极指南
WordPress图像管理终极指南

WordPress图片的技术和性能优化技巧

WordPress中有很多可用的图像优化选项,它们不会对网络服务器造成不必要的负担。我们将研究每个人都应遵循的一些最常见的图像优化技巧,以及在特殊情况下派上用场的其他一些技巧。

JPG或PNG?使用正确的图像格式

图像优化的第一步是一个好的开始。他们说,良好的开端工作已经完成了一半。当涉及到WordPress中的图像优化时,情况就是这样。这一切都始于选择正确的图像格式。JPG和PNG是内容营销中在线使用的两种最常见的图像格式。

诀窍是要了解为每种图像类型选择哪种格式。选择错误的图像会导致图像尺寸的巨大增加。这是规则。

什么时候使用PNG格式?

对于平面图像(例如矢量,插图,字体,徽标,横幅,形状,横幅等),以矢量格式(例如EPS或Adobe Illustrator(.AI)格式)创建的任何内容,请使用PNG。您将最终获得质量损失几乎为零的优化图像。如果在这种情况下使用JPG,则尺寸不会受到影响,但质量可能会用完。实际上,在更高的分辨率下,PNG会更轻,而不会降低质量。JPG将受到影响。

以他为例。我们将创建一个5000px的平面图像,并将其另存为JPG和PNG。

用于测试的样本图像

平面影像JPG格式233KBPNG42KB

什么时候使用JPG格式?简而言之,在相同分辨率下,JPG图像比PNG高455%。

对于其他所有内容,请使用JPG。除了平面图像或矢量图像外,请使用JPG。人,地点,事物等的照片–使用JPG。此类别下的几乎所有库存照片都使用JPG。如果使用PNG代替JPG,则会遇到一些严重的性能问题。

在这种情况下,您需要格外小心。如果使用JPG代替PNG,则几乎不会或根本不会损坏。但是,如果在使用JPG的情况下使用带有血腥的PNG,则会造成很大的损坏空间。看一下这个例子。

设置:我从Shutterstock下载了这张图片,它的重量约为10.3MB,分辨率为6149×4562,本质上是一张28MP的照片。除非我们准备类似打印就绪的手册之类的东西,否则我们不会在博客中使用照片的完整分辨率。假设我们博客的最大图片固定大小为1600px。

实验:我们将源图像的大小调整为1600px,并创建四个版本 -两个用于PNG格式,两个用于JPG。对于每种格式(JPG / PNG),我们将使用(a)建议的压缩设置和(b)最大压缩设置。

JEPG实验的样本图像

结果:以下是漂亮图表中的结果,供您遵循:

原始图片(KB)

10870目标分辨率1600像素格式设定值大小(KB)减少百分比JPG格式渐进,质量= 8523198%非渐进质量= 8523998%PNG压缩= 0557549%压缩= 6185283%压缩= 9175084%

对于相同的图像和分辨率,JPG版本比PNG轻700%!乍一看,人们可能会认为84%的PNG压缩比JPG中的98%足够好。并非完全如此。如果仔细查看图像尺寸,您会发现PNG的重量略超过1.7MB,而JPG为0.22MB。这意味着,在相同分辨率下,PNG比同一图像的JPG版本重8倍。换句话说,对于相同的图像和分辨率,JPG版本比PNG轻700%!

根据经验,将PNG用于平面图像,将JPG用于其他所有内容。

在博客中上传股票照片的清单

有成千上万的博客,编辑者可以在其博客文章中直接上传图像的完整分辨率版本。这里是将照片上传到博客的一些提示。我使用一个名为IrfanView的免费软件,它具有很多很棒的功能。我会为您说明每个。

1.调整图片大小

首先,您需要为WordPress网站中的所有图片确定最大分辨率。超出该尺寸的任何图像都将被调整大小,除非它当然较小。

IrfanView具有批处理转换功能(启动应用程序后按B),可以一次性将一系列功能应用于一堆图像。就我们的目的而言,功能包括调整大小,裁剪,添加水印等。

2.删除EXIF数据

在常规相机上单击的照片具有很多嵌入的元数据 –只是关于图像的少量(但有用)信息。此类信息的示例包括点击图片的地方的GPS坐标,ISO设置,相机型号等。

我的iPhone上点击了随机照片的EXIF信息

除非我们是照片博客,否则我们通常不希望在博客文章的图像中包含此类信息。在IrfanView中保存或批量转换图像时,通常会删除EXIF数据。这有助于保护您的隐私,尤其是您的实际位置。大多数照片的大小差异约为每张图像200-300 KB。

3.另存为渐进式JPG

IrfanView默认将JEPG保存为渐进式

渐进式JPG图像逐层加载图像-从而加快了加载时间。诸如KeyCDN之类的内容交付网络已经开始自动将 JPG 转换为逐行JPG,以加快图像交付并优化存储。

4.将DPI设置为72

DPI或每英寸点数是图像质量的度量。高DPI值用于打印材料。对于网络,完美的值为72。

好的,总结一下,以下是我的设置。在为博客文章编译完所有图像后,我便运行此功能,然后再将图像上传到WordPress。

IrfanView中典型WordPress博客的批量转换设置

5.优化您的图像

无论您使用的是JPG还是PNG,都需要优化图像。有很多非常出色的在线工具,可以帮助您优化图像并节省大量空间。

我说的是诸如TinyPNG或TinyJPG之类的服务,这些服务仅使用一些高级算法来优化您的PNG / JPG图像。

在TinyPNG中优化图像

老实说,我不知道算法是如何工作的,但是无论如何,无论我如何保存,我一直能够减少50-70%。

您还可以以$ 50 USD的价格将服务的专业版作为Photoshop插件购买。Windows和Mac版本均可用。就我而言,在线版本(结合“ 保存到Dropbox”功能)效果最佳。

WordPress中的图像优化插件

到目前为止,我们已经学会的入门步骤启动权。如果您现在偶然发现了此帖子,并且已经上传了数百张图片怎么办?好吧,这里有一些插件可以帮助您:

EWWW云映像优化器

该插件是原始的且广受欢迎的EWWW Image Optimizer插件的分支。这个图片优化插件的下载量超过500,000,可让您在将图片上传到WordPress时对其进行优化。

它在竞争中的与众不同之处在于其优化数据库中现有图像的能力,从而导致巨大的性能提升。由于您的大部分流量都来自旧文章,因此还节省了大量带宽成本。您还可以选择启用有损图像压缩(肉眼几乎看不到),但可以节省大量空间和带宽。在优化技术方面,它可以使用TinyPNG或TinyJPG的API来优化新图像和现有图像。

但这就是问题所在。许多主机(包括WPEngine)不允许使用EWWW图像优化插件,因为它在服务器上增加了很多额外的负载。如果设法以某种方式绕过服务器限制,则可能会因违反政策而使帐户被暂停。

这是EWWW Cloud Optimizer插件发挥作用的地方。它会将优化图像所需的所有计算工作转移到云中,并仅用优化图像替换未优化的图像。由于压缩实际上使用了零CPU资源,因此服务器上没有额外的负载。这对WordPress网站中的所有新图像转换和现有图像转换均有效。

计划和定价:正如人们所期望的那样,该插件不是免费的,因为开发人员必须支付云计算账单。但是,定价非常合理,对于预付费订阅的3000个图像优化,费用为9美元。

EWWW Cloud Optimizer插件设计精美。介质扫描仪告诉您购买前需要优化多少张图像。根据服务器的图像,您可以购买相关的预付费计划。

TinyPNG WordPress插件

这是另一个出色的图像优化插件,可直接与TinyPNG / JPG服务集成。它会自动将新的和现有的图像上传到WordPress媒体库。该插件提供了每月100次图像优化的免费计划。

弗雷迪(Freddy)不久前已经编制了一张图像优化插件列表 –如果您想进一步了解该主题,请阅读。

回到顶部