四种优化网站图片提高网站的性能的方法

前言 图片是当今网站最重要的元素之一。 主题图片,目录,画廊,网上商店,投资组合,张贴有特色的图片,公司团队的照片(其中可能包括一只顽皮的狗),照片背景,插图等 […]

2018年6月25日

前言

图片是当今网站最重要的元素之一。

主题图片,目录,画廊,网上商店,投资组合,张贴有特色的图片,公司团队的照片(其中可能包括一只顽皮的狗),照片背景,插图等等……图片遍布在我们生活周围。这很棒,因为它们实际上有很多优点:

  1. 它们有较强的视觉冲击力。
  2. 它们有助于传达一个想法。
  3. 它们可以讲述一个故事。
  4. 它们创造了一种情绪。
  5. 它们会产生认同和共鸣。
  6. 它们维持了一个品牌的个性。
  7. 它们有助于让事情感受起来更真实。

但这是有代价的。

图片通常有很大的尺寸,你上传到你的网站的每个图像都会影响网站的加载时间。简单地说,如果你的网站有更多的字节要加载,那么加载时间就会更长。

对此你能做些什么呢?

如果你的网站有很多图片,那么你的网站需要很长的时间加载,如果你打算建立一个包含很多图片的网站,如果你不知道图片优化意味着什么……

如果你是那些为你的产品拍照并直接将原图上传到网站上的人之一,如果你是那些甚至在上传之前都不看图片细节的人之一……

如果当wordpress(一个使用PHP语言开发的博客平台)告诉你你上传的文件超过了限制,你会感到惊讶……

为此你可以做很多事情。

进行图像优化

你在你的网站上使用的每一张图片都应该做优化处理。这意味着,它应该有一个最佳的大小,这样你的站点的加载就不会受到图片的影响,或者是最小的影响。

优化的好处

使网站更简洁,占用更少的服务器空间和更少的带宽

优化你的网站意味着让它们简洁。当图片尺寸不那么大时,整个网站加载的就会变得更快。

优化后的图像在服务器上占用的空间也更小,并减少访问者浏览您的网站时传输的数据。

因此…

更好的性能

当你的网站优化得很好时,加载速度就会变得很快。如果您的网站在优化图像之前需要几秒钟才能加载,现在可能只需要几毫秒。

因此…

更好的用户体验

更好的性能意味着更好的用户体验。如果用户需要等待内容加载出来,她可能会放弃查看。

而且,更优化的网站在用户眼中看起来更专业。

想象一下那些从移动设备上浏览的访问者。等待网站的加载会影响他们查看网站信息,因为用户不仅仅希望得到答案,而且他们还希望在需要时及时给予答案。

并且…

SEO改进

由于更快的网站会使Google的搜索结果排名靠前,更好的整体性能能也会改善您的网站搜索引擎优化。

4种优化图像的方式

现在,这个列表将会告诉你:

从简单到复杂的方式,

从必须到更可选任务,

在一个复合逻辑每个项目的补充和增加。

根据你的网站需要,在列表中执行第1项可能就足够了。但是,如果你负责有大量图片和大流量的网站,则可能需要完成第3项或第4项。

1.上传前减小文件大小

图像文件大小主要受其尺寸、质量和文件格式的影响。 通过修改这些,你将能够显著减少图像的大小。

外形尺寸

您要做的第一件事就是确保您即将使用的图片尽可能靠近它将使用的大小。

您可能不想上传质量小的图像,因为放大后它会变得模糊。而你并不需要上传一个更大的图像,因为你可以缩减它的尺寸进行保存。

专业照片的宽度通常在5000像素左右。在网站上这是很大的。

目前常用的较大屏幕尺寸为1920px宽,而1366 x 768才是最常见的屏幕尺寸。(来源:浏览器显示统计– W3Schools)。

如果你打算使用一个全宽度图片,我认为将其调整到14001600像素之间可以既保持较大尺寸,也得到更好的加载。

只要缩小图像的尺寸,就可以减轻它的比重。

看看这个例子:

这个图像的原始大小是4964×3309,占用2.3MB,这是很大的。

如果我们将它缩小到1400 x 933,它的重量会自动降低到140KB,大约是原始大小的6%。

140KB与之前相比有很大的不同,但它还是不够小。

质量

调整图像的尺寸后,你需要降低其质量,以使其变得更小。

你会担心降低图片质量会不会让它看起来丑陋或廉价。不会的,这会更利于降低我们在网站上使用的数据量。

在主要设计或照片编辑中,图像的质量可以从100%降至0%。实际减少多少将取决于:

  • 图像本身- 如果图像具有许多细节和颜色,或者图像信息较少。在降低质量值的同时,一个有很多细节的图像会比不那么详细的图像看起来更糟糕。
  • 图片的目的- 如果您打算在摄影师的网站上使用它来宣传其婚纱照,您可能需要图片高质量低尺寸。或者,如果您要在大型英雄版块上使用该图片,质量可能比使用较小尺寸使用图片更为重要。

我通常使用约40– 50%的质量值。

以下是调整后的图像质量:现在它只有56KB

文件格式

网络上最常见的图像格式是JPEG(或JPG)、PNGGIF

在大多数情况下,JPEG是可以使图像更轻的格式。正如我之前解释的那样,它可以压缩图像并允许您选择质量度数。

当您需要图像具有透明背景时,PNG最常用,这是JPEG不能做到的。就像使用徽标,插图等一样。它会创建更高质量的图像(因为它不会像JPEG那样压缩图像),但也会产生较大的文件。因此,它主要用于较小的数量和较小的图像。

最后,GIF推荐用于动画图像。

总之,在大多数情况下使用JPEG将是最佳选择。当你需要图像有透明背景时使用PNG

来做这一切的工具

既然我们已经介绍了涉及的三个因素,下面介绍如何实现它,基本上有两种管理尺寸,质量和文件格式的方法:

a.使用Photoshop / Illustrator / Sketch等软件

根据您的情况选择使用软件,但它们基本上都采用相同的逻辑运行的。

在其中一个应用程序(或任何其他设计或照片编辑软件)中打开您的图像。找到保存为Web或导出命令。

然后您应该看到一个具有多种导出选项的窗口,包括尺寸、质量和格式。

选择JPG格式,将尺寸减小到1400px宽,最后调整质量等级,直到它符合您的要求。

保存或导出,就这些了。

现在检查你的图像的大小。

 b.使用 Reduce Images等在线工具

有许多在线工具可让您上传图像并下载其优化版本。我尝试了很多,这是我发现最有用的一个。

Reduce Images是一款免费工具,可让您修改上传的任何图片的尺寸,质量和文件格式。

它非常易于使用。只需上传原始图片并选择您的偏好。

一旦优化的图像准备就绪,您可以下载它。你甚至可以在没有再次上传的情况下制作同一图像的新版本。

 

2.使用像ShortPixelImagify这样的图像优化器

除了手动调整图像大小之外,你还可以使用优化工具使它们更小。

ShortPixelImagify是在线可以在线压缩和优化您网站上的图片的服务。它们在保持尽可能高的质量的同时进一步缩小图像尺寸。

他们是如何工作的?基本上,他们将原始图像发送到他们被压缩的cloud(云)中。然后他们下载优化好的图像,替换你的网站上的原始图像。

它们会存储原始的照片,这样你就可以在需要的时侯以恢复原始版本的图片。

他们都有专门的WordPress插件,这非常棒。并且他们都提供不同的定价计划,其中包括免费定价计划。

在使用优化工具时,您可以根据您的网站需求在不同的优化级别中进行选择。从硬压缩将使您的图像更轻,质量更低(大多数时间实际上并不被人眼注意到),从而使压缩级别更柔和,使图像的质量保持更高一点。

如果你是一名摄影师,你可能想要选择较柔和的压缩级别,但如果你正在运行一个普通的商业网站或一个网上商店,其中优先考虑的是性能,那么小的压缩将是最好的选择。

如果出于任何原因的影响,您没有手动压缩图像(如果您跳过此列表中的项目1,并且所有图像已上传到您的站点),您仍然可以在这里使用这样的优化工具。它也会做得很棒。

重要提示:

值得一提的是,这种工具通常提供不同的购买计划,包括特定数量的图像进行压缩。像每月100张图像,或每月5000张图像。

您可能会认为您上传到您网站的某张图像等于要压缩的图像,但并不完全如此。

当您将图片上传到您的WordPress网站时,您的图片将裁剪并调整为不同的尺寸。这意味着单个图像将有多个版本,图片将在整个网站中使用。

这些版本中的每一个版本都被您的优化工具视为单独的图片,因为它必须对其中的每一个进行优化。因此,如果您的主题制作了单个图像的4个版本,您上传的一张图片将代表压缩计划中的5张图片。

3.CDN上寄存您的图像

CDN内容传送至网络。将您的图像寄存在CDN上意味着设置CDN来为它们提供服务,而不是让自己的服务器执行此操作。

CDN是位于世界各地的网络,具有功能强大的网络服务器,负责将网站的文件加载到访问者使用最接近的服务器。

例如,如果来自南美的访问者到达您的站点,CDN将使用位于访问者附近的服务器向他提供服务,而不是在欧洲使用。这样你的网站的数据会传播更短的距离,这会影响加载速度。

CDN承担了服务器的重载。它不是您的托管服务的替代品,而是一种添加优化服务器的方式,可加速您的网站。

有几个CDN提供商。他们通常会提供按月或按数据使用量计费的不同计划。

StackPath(以前称为MaxCDN)是最受欢迎的服务之一。

CDN服务通常会提供一个WordPress插件,因此您可以轻松将其整合到您的网站中。如果没有,像WP Rocket或像CDN Enabler这样的插件缓存插件,让你连接你的CDN服务到你的WordPress站点。

4.添加一个惰性加载插件

延迟加载技术背后的逻辑是,在它们必须出现在浏览器的视口之前,将图像加载到站点上。或者,更简单地说就是在用户看到他们之前。

通过延迟加载时,一旦用户靠近网站的底部,而不是网站加载时,网站底部的图像就会加载。

如果同时加载较少的图像,这意味着节省了巨大的带宽和性能。只有在需要时才会加载图像。

将惰性加载应用到您的网站有很多种方法。如果您使用的是我们的WordPress主题之一,那么他们已经在很多地方做到了这一点,比如博客,杂志和展示模块上的精选图片。

WordPress中添加懒惰加载的最简单方法是,不用触及一行代码,就可以使用像WP RocketLazy Load这样的插件。

如果您的网站包含充满图像的网页,例如目录,图库等。只需安装它并按照他们的指示操作。

总结

如果你在你的网站上使用图像——我敢肯定,你一定要注意,优化它们是必须的。

它会改善您的网站的性能,搜索引擎优化,并产生更好的用户体验。

你会尝试哪一种技术?

译文来自:四种优化网站图片提高网站的性能的方法

责编:张玲      编辑:闫麒麟

发表评论

电子邮件地址不会被公开。 必填项已用*标注