如何为您的网站优化图像并使它们在所有设备上都能正常工作(用于移动设备,台式机和平板电脑的响应图像)

为什么要麻烦优化图像?让我问你一下;您上次看到没有任何图片的网站的时间是什么时候? "决不" 将会是正确的答案。图像太重要了。而且这甚至与那张令人毛骨悚然的股票照片都没有关系 "10在线营销技巧" 发布。图像可用于多种用途。考虑布局,设计元素,徽标,个人资料图片,也是博客图片.


坦白说,如果您不使用网站上的少量图片,就无法在2020年建立网站。话虽这么说,对于网站所有者来说,图片并不是那么容易理解的。即使撇开使用什么图像以及在哪里使用图像的挑战,也存在纯粹从技术角度显示这些图像的问题:

  • 如何在多个设备上传递响应图像?
  • 如何使它们在所有这些设备上看起来都很棒?
  • 而且,最重要的是,如何确保它们在适当的时间内加载?

这些是我们今天要回答的问题。这是您的最终指南 如何为您的网站优化图像并使其在所有设备上看起来都很棒:

如何为您的网站优化图像并使它们在所有设备上都能正常工作

hy为什么听我们?

最近,图像一直是我们的重要话题,这是因为我们家族中的一种较新工具– 擎天柱.

Optimole是一项“设置后忘记”的图像优化服务 & 工具。我们认为它是网络上最好的此类解决方案,我们可以证明这一点!但这是另一回事。无论哪种方式,多年来,我们都学到了很多有关如何正确优化图像的知识。我们今天想与您分享一些知识.

W为什么要优化网站上的图片

除了美观外,映像还占用大量磁盘空间和带宽。更具体地说,图片占标准网页大小的30%-85%.

速度测试

这是巨大的–而不是选择删除映像–因此,我们能做的最好的事情是学习如何以仅占用更少磁盘空间的方式来优化映像.

收益是巨大的,尤其是在处理重复的图像时-需要将图像加载到每个单独的网页上。这些是背景,设计元素,徽标,图标等内容。有时仅优化一张背景图片可能会导致页面尺寸减少70%+.

请参阅以下示例:

优化图像前后的页面大小比较

但是,等等,情况变得更糟!如果仅仅进行一般的图像性能斗争还不够,那就还有移动领域��,这带来了一系列全新的挑战:

首先,您可能不应该向桌面访问者和移动访问者显示相同的图像集。上下文有很大的不同–这包括屏幕尺寸,方向(通常为纵向),甚至是阅读者的心态.

此外, 数据表明 图像较少的移动设计在转换方面往往表现更好.

综上所述,在跨多个设备交付响应图像时,我们需要注意以下几点:

  • 首先,针对该特定设备优化图片
  • 确保将图像压缩到最大可接受水平,以确保最快的加载时间
  • 根据设备和屏幕显示最佳图像数量

How‍♂️如何优化图像并将其交付给所有设备类型

对图像进行最佳处理,然后尽快将其交付给访问者,这有几个方面。在本指南中,我们将全面介绍它们:

��选择正确的格式

让我们从一个古老的问题开始: PNG或JPG?

多数人说 "一直都是JPG!" 但这并不是真的正确:

PNG和JPG

是的,在大多数情况下,或者至少在最常见的情况下,我们可能需要图像,JPG占用的磁盘空间较少,因此带宽也较小.

但是这里的关键词是 "最常见的情况." 实际上,如果您拥有的是一张具有很多颜色和颜色过渡(也就是很多 "颜色信息"),那么JPG确实会更好。考虑标准照片。那些作为JPG更好地工作.

但是,如果您的图片比较简单,那么PNG会一直赢.

考虑以下示例。这是四个图像:

图片-1-a图片1-a:JPG

图-1-b图片1-b:PNG

图-2-a图片2-a:JPG

图2-b图片2-b:PNG

  • 图像1-a是312 KB
  • 图像2-a是196 KB

尝试猜测其他两个图像的大小…

你的答案:

错误!

  • 图片1-b为1.3 MB(您可能已经猜到了)
  • 图像2-b是106 KB(等待,什么?!)

如您所见,PNG赢得简单的低色彩信息图像.

考虑界面截图,简单插图等内容.

�� 第1课:

不一定总是使用JPG。根据其内容预测图像的大小,然后使用正确的图像类型.

现在有一个更及时的问题: SVG? WebP?

SVG和WebP

SVG和WebP在网络上是不太常见的图像类型,但是只要您要使用它们,它们就都很棒。让我澄清一下:

  • SVG是基于XML的矢量图像格式。图像的内容可以在一个简单的XML文件中定义-与您用于其他基本数据处理目的的XML文件相同。只要您处理的是简单的矢量图像,SVG就是一种很好的格式.
  • WebP是Google的一种新格式. 他们吹嘘WebP的大小比同类JPEG小25-34%,比同类PNG小26%.

那有什么收获呢?您能否通过将图像全部转换为SVG和WebP来优化图像?

第一, SVG. 基本上,只有在以下情况下才使用SVG: (一个) 图像可以有效地保存为SVG,并且 (b) 如果您不介意人们采用该SVG并对其进行修改.

就像我说的那样,SVG是基于XML的,这意味着修改SVG图形非常容易。这并不总是您想要的,尤其是在处理品牌徽标或其他关键图形时.

在大多数情况下,SVG并不是您经常使用的格式.

现在,到 WebP. 这种格式很棒,并且在大多数情况下,确实确实如承诺的那样节省了大量磁盘空间。查看以下两个示例图像:

jpg图片示例

webp图片示例

  • 原始的JPG版本是204 KB
  • WebP为58 KB

诀窍在于,并非所有浏览器都支持WebP。实际上,您甚至可能看不到我上面使用的WebP图像。在撰写本文时,WebP可在Google Chrome,Firefox,Edge和Opera中使用。当然,旧版本不支持该格式.

实际上,这意味着添加WebP图像并不像添加JPG或PNG那样简单.

我的意思是,从技术上讲,您可以使用如下代码:

…但是,如果用户的浏览器不支持该格式,则他们会看到熟悉的残破图像图标.

为了有效地使用WebP,您应该提供后备图像。例如:

这意味着要做更多的工作。想象一下,每次要向博客文章或页面添加WebP图像时都必须构建一个类似的标签。并且让我在这里阻止您,不,WordPress本身不支持WebP,因此您确实必须手动完成此操作.

尽管如此,我还是建议您在处理站点中多个页面上出现的图像或图像很大时需要使用一些复杂的手动WebP路线,并且您需要使用各种工具来以某种方式减小该尺寸.

您可以在Photoshop中将图像另存为WebP,或使用诸如 Xn转换 (自由).

�� 第2课:

如果您想快速优化图像,请不要使用SVG。您浪费在创建它们上的时间将无法获得回报(尽管可以不同意;这是一个很好的选择 另类)。 PNG使用起来会更快,并且在磁盘空间消耗方面也不会差很多.

处理出现在多个页面上的图像或足够大的图像时,请使用WebP。除非您可以自动处理WebP处理,否则可以使用一些其他工具来完成。在这种情况下,请在各处使用WebP。我们将在稍后讨论.

Compress️压缩图像

图像压缩就像魔术一样。让我给你演示:

这是同一张JPG图像,只是以不同的压缩级别(通常称为质量级别)保存:

浣熊100%100%质量

浣熊95%95%的品质

浣熊85%85%的质量

浣熊50%50%的质量

如果您像大多数人一样,那么前三个对您来说看起来是一样的。第四个开始寻找 "差一点." (右键单击并 "在新标签页中打开图像")

这是每个图像占用的磁盘空间:

  • 100%质量:969 KB
  • 95%:439 KB
  • 85%:186 KB
  • 50%:102 KB

巨大吧?只需将压缩率从100%更改为95%,您就可以从〜1 MB扩展到〜500 KB,而根本没有质量上的损失.

JPG压缩可以由各种工具自动地自动处理,这是个好消息。但是,并非所有图像都是相同的,因此即使经过相同的压缩过程,有时您也会在看起来不好的图像旁边得到看起来不错的图像.

总体而言,您可以在这里大步向前,并大幅降低JPG的质量。事实是,您的网站访问者不在乎各处的清晰图像.

好吧,我应该澄清一下;是的,如果您想向他们展示一些东西(例如,图片是某些内容的关键,例如产品图片,酒店客房照片),那么可以肯定,这些图片应该清晰.

但是在其他方面,您可以稍微放松一些。例如,背景不需要100%清晰。通常,访客未直接参与的所有图像的画质可能较低.

我最喜欢这里的两个工具可以为您提供帮助:

图像优化 在Mac上进行桌面压缩。您只需从桌面上抓取图像,将其拖放到ImageOptim上,然后该工具就会发挥其魔力,并在完成后覆盖源图像.

然后,您可以获取该图像并将其正常上传到您的网站.

ImageOptim-优化桌面图像的强大工具

第二个工具是 擎天柱. 该工具几乎重新定义了如何在网站上处理图像。出于讨论的目的,我们只说它在优化媒体库中的图像时非常有效.

optimole-在云中优化图像的出色工具

现在到PNG。就像JPG一样,PNG也可以压缩。但是这一次,在质量上没有损失。使用无损算法可以有效地压缩PNG.

换句话说,请始终压缩您的PNG!

查看以下三个图像:

KW-1
KW-2

KW-3

它们看起来一样,但实际上占用了:

  • 346 KB
  • 215 KB
  • 100 KB

尝试猜测哪个是哪个.

三种工具可以压缩图像并缩小图像:

  • 图像优化 再次。但是使用PNG会花费很多时间,因此,如果您要处理许多PNG,则可能需要在工具运行时让自己喝杯咖啡.
  • ImageAlpha. 比ImageOptim快得多。这是我的PNG桌面解决方案.
  • 擎天柱. 毫不奇怪,Optimole还可以处理PNG压缩。一切都发生在自动驾驶仪上.

�� 第3课:

压缩JPG以达到可接受的质量(相对于磁盘空间).

始终压缩您的PNG.

��提供正确尺寸的图像

这也许是整体上最关键的方面 "响应图像" 谜语。我们知道,这里有数十种(如果不是数百种)不同的屏幕尺寸,我们必须以某种方式确保我们的图像在所有屏幕上看起来都很棒.

简单的解决方案?服务大图…总可以按比例缩小,对吧?嗯,从技术上讲,这是正确的,但是实际上,这将浪费大量带宽,并使您的网站在大多数设备上的加载速度非常缓慢.

更好的解决方案是将所有图像缩放到最常见设备所需的正确大小,然后相应地为它们提供服务.

如您所料,您确实需要使用同一图像的不同版本来实现此目的.

解决此问题的方法之一是从设计的基本宽度和可以使用的最大图像大小开始,然后从此处缩小一些常见的设备和断点.

例如,大多数网站的内容块宽度都不会超过1100像素标记,因此您可以假定在这种情况下可以显示的最大图片的宽度也为1100像素.

然后,您可以为800 px和550 px(常用值)创建断点,以涵盖平板电脑和移动设备的情况。虽然这不能在所有设备上为您提供100%完美的效果,但您至少要在合理的范围内进行优化并保持图片可控.

有了这之后,您现在必须为要在网站上使用的每个图像创建几个不同版本.

这是一个如何处理实际显示代码的示例:

srcset属性的神奇之处在于,浏览器会查看其中的内容,然后根据所使用的设备选择最佳图像.

您可以在上面看到的另一种自定义是sizes属性。告诉浏览器图像在某些屏幕上的行为。在这种情况下,在大于1100 px的视口中查看时,图像将为1100 px,而在较小的设备上,它将占据整个视口.

这种解决方案可确保图像不会占用整个3840px宽的4K屏幕。但是,在移动设备上观看时,它仍然会占据整个屏幕.

有效利用尺寸属性是使图像真正响应的方式.

⭐专业窍门:选择尺寸比所需尺寸小10%的图像,然后让浏览器将其放大。这将为您节省一些额外的空间和带宽。例如,如果您需要500×500 px的图像,则可以将图像缩放到450×450 px,然后让浏览器将其缩放到500。这确实取决于图像,但是在大多数情况下,用户不会注意到.

�� 第4课:

为您的设计使用正确的图像尺寸.

创建断点.

创建同一图像的多个版本以覆盖断点.

显示图像时使用srcset和size属性.

��优化Retina和HiDPI屏幕的图像

图像尺寸范围的另一端是关于HiDPI友好图像.

故事是,台式机屏幕越来越大,像素越来越密集。这些天来有一个 4K 屏幕装在15英寸笔记本电脑中。 4K分辨率为3840×2160 px,因此每个像素必须非常小.

这给网站带来了问题。基本上,如果您的网站被定义为1100像素宽,那么在正常情况下,它将仅占据4K屏幕可用屏幕空间的大约25%。这不是最佳的。幸运的是,事情并非如此.

为了避免出现此问题,这些高分辨率屏幕的作用就好像是尺寸的一半一样(我过于简化了,但请听我说)。因此,您的1100 px宽的网站不会占据HiDPI屏幕的一小部分,而是会放大到原来的两倍,占据2200 px并更好地填充屏幕.

此过程使屏幕变得越来越清晰,而不会在此过程中使一切看起来很小.

但是,这种做法并非没有缺点。首先,您的图像受到很大的冲击。文本易于放大而不会损失质量。字体不受缩放的影响。图像不是。直接的结果是,每张尚未准备好用于HiDPI屏幕的图像都会显得模糊,严重!

要解决此问题,您必须为每个缩放比例提供缩放后的图像。这是一些简单的代码:

(如果浏览器不支持srcset,则将使用标准src。)

现在,当我说 "缩放图像," 实际上,我的意思是您应该从另一端开始。从大图像开始(将其标记为3倍),然后将其缩小并缩小(缩小至2倍),最后使其变为1倍并将其用作默认图像.

�� 第5课:

确保您的徽标,品牌图像以及帖子和页面中使用的所有图像均已准备好用于HiDPI屏幕.

⌛延迟图像加载

原则上这很简单;折页上方的所有图像都应立即加载(页面加载时)。其他一切都可以推迟到以后,甚至 "懒加载."

延迟加载是按需加载图像。也就是说,在用户需要图像之前,仅在一秒钟内就加载了图像-很快就会加载。然后 "不早不晚" 这是关键.

在理想情况下,应在将图像滚动到视口之前加载图像。意思是,用户在图像出现之前不必看到占位符。如果发生这种情况,他们可能会滚动通过图像而无法及时加载图像–这不是优化图像的好方法.

话虽这么说,延迟加载是在WordPress网站上很容易做到的事情。您可以使用JavaScript / jQuery进行延迟加载,如果愿意,您甚至可以自己编写代码。或者,您可以获得类似的插件 a3延迟加载, 或者你可以使用 擎天柱, 其中包含一个延迟加载模块.

�� 第6课:

折叠以下的延迟加载图像.

via通过CDN传送图像

内容交付网络就像是网站速度的作弊代码。您之所以作弊,是因为您并没有让网站更快,而是在告诉其他人承担负载并将网站的数据传递给访问者.

here我们在这里更深入地讨论了CDN,请查看.

TL; DR是CDN利用服务器网络的一个优点,这些服务器都拥有您站点的副本,然后将其从最近的可用位置传递给访问者。这总是比从主服务器交付更快.

图像CDN的工作原理几乎相同,但它们只专注于图像(您猜对了).

在大多数情况下,从您的角度来看,该操作是无缝的。您网站上的所有图片都将替换为其CDN托管的版本(这意味着图片网址会更改).

  • 喷气背包 内置有流行的CDN图片。您可以免费使用它,这很棒。主要限制是它仅适用于帖子,页面和特色图像中的图像。它不适用于构成设计的任何图像(主题,布局的一部分等)。这些是可以真正使用某些CDN-ing的图像.
  • 擎天柱 内置CDN作为主要图像优化功能的一部分。这不仅限于您的帖子和页面.

�� 第7课:

将您的站点连接到映像CDN(Jetpack或Optimole)或常规CDN(MaxCDN / StackPath).

on在速度较慢的连接上为用户提供较小的图像

在决定用户应看到哪种图像时,不仅屏幕大小很重要。甚至更重要的是,如果他们的互联网连接速度很慢,他们真的不想等待10秒钟来加载图片.

在这种情况下,最好降低图片质量以换取加载时间。连接速度较慢的用户将欣赏到他们可以完全看到图像.

您可以利用Network Information API来实现这一目标. 这是一个很棒的教程 有关如何手动执行的所有工作原理.

如果您希望通过自动驾驶仪进行处理,请再次, 擎天柱!

�� 第8课:

在速度较慢的Internet连接上为用户提供较小和压缩程度更大的图像.

��工具工具!

在此过程中,我提到了许多工具,可用于使网站的图像传递更加有效。以下是这些内容的摘要:

  • 擎天柱 –可让您自动优化图像,压缩图像,为访问者的视口选择合适的图像大小,通过CDN提供图像,延迟加载图像,以较低的连接速度工作.
  • 图像优化ImageAlpha –在Mac上处理桌面图像压缩。您可以使用 小小PNG 在赢。在将图像上传到您的网站之前执行此操作.
  • Xn转换 –让您将图像转换为WebP.
  • a3延迟加载 插件–延迟加载所有图像.
  • 喷气背包 插件–随附免费的CDN图片.
  • MaxCDN / StackPath –普通CDN不仅可以处理图片,还可以处理整个网站.

优化图像的工具

�� 进一步阅读:

  • 想像vs WP Smush vs ShortPixel vs Optimole:哪个最适合优化WordPress图像?头对头比较
  • 博客的免费图片-如何获取它们 & 有效使用它们(警告!非明显建议,有数据支持)
  • 加快WordPress性能的11种方法
  • 网站速度优化:如何在2019年做到
  • 最快的WordPress托管-寻找新手的指南

‍♂️ TL; DR:

以下是上面共享的所有课程的摘要:

第1课:

不一定总是使用JPG。根据其内容预测图像的大小,然后使用正确的图像类型.

第2课:

如果您想快速优化图像,请不要使用SVG。您浪费在创建它们上的时间是没有回报的(尽管可以不同意)。 PNG使用起来会更快,并且在磁盘空间消耗方面也不会差很多.

处理出现在多个页面上的图像或足够大的图像时,请使用WebP。除非您可以自动处理WebP处理,否则可以使用一些其他工具来完成。在这种情况下,请在各处使用WebP。我们将在稍后讨论.

第3课:

压缩JPG以达到可接受的质量(相对于磁盘空间).

始终压缩您的PNG.

第4课:

为您的设计使用正确的图像尺寸.

创建断点.

创建同一图像的多个版本以覆盖断点.

显示图像时使用srcset和size属性.

第5课:

确保您的徽标,品牌图像以及帖子和页面中使用的所有图像均已准备好用于HiDPI屏幕.

第6课:

折叠以下的延迟加载图像.

第7课:

将您的站点连接到映像CDN(Jetpack或Optimole)或常规CDN(MaxCDN / StackPath).

第8课:

在速度较慢的Internet连接上为用户提供较小和压缩程度更大的图像.

让我知道您如何看待尽可能优化网络图像的整个挑战。另外,您正在处理图像以使其更快地加载?分享评论.

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

布局,演示和编辑,Karol K.

*这篇文章包含会员链接,这意味着,如果您单击其中一个产品链接然后购买产品,我们将收取一小笔费用。不用担心,您仍然需要支付标准金额,因此您无需承担任何费用.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map