Return to site

如何在使用GIF时提高网站的性能

GIF(G raphics I nterchange F ormat)格式最初是在1987年开发的。由Compuserve的Steve Wilhite发布,GIF通过允许使用256种颜色同时保持压缩,改善了在此期间使用的黑白图像仍然可以由使用慢速调制解调器的人加载的格式。此外,Web开发人员和设计人员可以通过定时延迟创建动画。到目前为止,关于GIF的情况几乎没有变化。

由于其简单性,对这种格式的广泛支持以及它可以轻松地用于流式传输视频剪辑,GIF格式是目前仍然常用的最古老的文件格式。尽管JPEG和PNG图像有所增加,但GIF的这种帧动画功能可确保格式保持流行。

尽管它们在互联网上的普及和普及(特别是关于动画GIF),但GIF并不是图像选项中性能最高的。如果您在自己的网站上使用GIF,请务必优化GIF,以免造成太多开销。

本文将介绍优化静态和动画GIF的方法,并提供一个很好的替代方案,您可以使用它来消除因使用GIF作为动画而导致的页面膨胀。

为什么要优化你的GIF?

在设计网页时,性能很重要,而GIF并不是最高性能的图像选项。虽然它们非常适合吸引用户的注意力,并且以娱乐方式提供短时间的信息而受到普遍欢迎,但GIF 并非专为动画设计(尽管它们通常用于此类)。因此,由于页面加载速度慢,GIF的使用导致较大的页面权重和较差的用户体验。

如何在使用GIF时提高网站的效果

在本节中,我们将介绍几种可以提高网站性能的方法,包括使用GIF。我们将首先探讨处理静态GIF的方法,最后我们将讨论如何最大限度地减少动画GIF产生的开销。

压缩图像有两种方法:

优化GIF的主要方法之一是压缩它们。有两种常用的压缩方法:

  1. 有损压缩:有损压缩会从原始文件中删除一些数据,从而导致文件大小减小。但是,每次在压缩后保存文件时,图形的质量会有所下降,这会导致图像随时间变化出现模糊的像素化。
  2. 无损压缩:无损压缩保留原始文件中的所有数据,这意味着压缩文件可以解压缩以获得原始文件。虽然您的文件大小仍然大于使用有损压缩的文件大小,但您的图像质量不会随着时间的推移而降低。

稍后在本文中,我们将介绍两种类型的优化对GIF的影响。

通过转换为PNG来提高使用静态GIF的网站的性能。

提高网站性能的最简单方法是使用PNG格式而不是GIF格式渲染图像。虽然这两种格式在显示简单图形的良好选择方面非常相似,但PNG文件的优势在于能够压缩到比同等GIF文件小5-25%的尺寸。最初创建GIF是为了使用称为Lempel-Ziv-Welch(LZW)算法的无损压缩技术,该算法在20世纪70年代定义。但是,现代压缩技术比LZW性能更高,您可以通过使用这些技术(如PNG)来利用这一点。

这种文件格式转换非常简单,您可以选择丰富的软件选项,包括免费的基于Web的实用程序,例如Pic.io和Convertio中的实用程序。

使用动画GIF的网站之一提高其性能:

动画GIF虽然非常流行,但可能是需要很长时间加载的大文件。例如,只有几秒钟的GIF可以是几兆字节。要提高站点的性能,请使用以下技术之一:

  1. 有损优化
  2. 将动画GIF转换为HTML5视频
动画GIF的有损优化

由于绝大多数包含动画GIF的数据都是图形数据,并且由于无损优化无法修改图形数据,因此在优化动画GIF时,您只有一个可行的选择:有损优化技术。

有损优化是有效的,因为人眼在区分颜色的细微变化方面做得不好。例如,图像可能包含数千种颜色的阴影,其中一个像素与其旁边的像素略有不同。由于您的眼睛无法区分两种色调,因此可以轻松操作图像文件:其中一种颜色替换另一种颜色,使文件更小。

由于动画GIF本质上是一系列单独的GIF,因此您可以利用这些技术来减小动画文件的大小。通过使每个单独的文件更小,您的整体文件也更小。一种方法是使用一个可以自动执行此类压缩的简单软件套件(例如gifsicle的修改版本)。

将动画GIF转换为HTML5视频

虽然您可以最小化动画GIF的大小,但您最终可能会得到一个比它需要的文件更大的文件。GIF从未打算存储视频,而现在被认为是动画的实际上是试图减少存储和传输共享相同元数据的多个图像的开销的结果。但是,今天我们还有另一个选项,可以让您的GIF缩小95%:将动画GIF转换为HTML5视频。

HTML5视频是现代网络浏览器使用<video>标签播放视频内容而无需使用外部插件的能力。当这个功能于2009年首次发布时,关于如何存储这些视频以及如何对其进行编码存在很多争论。然而,今天,接受的标准是存储在MP4容器文件中的H.264编码视频(为简单起见,我们将从这里开始称为MP4视频)。由于其设计用于流视频,除了看起来更好之外,MP4文件也小得多:

超过90%的现代网络浏览器支持MP4视频。

有很多方法可以将动画GIF转换为MP4,例如流行的开源命令行工具ffmpeg和基于Web的实用程序Cloud Convert。使用后者,您可以通过进行转换来查看可能节省的文件大小。

这是原始动画GIF:

这是从GIF创建的MP4视频:

查看文件的大小,我们看到原始文件是100 KB。通过将GIF转换为MP4,我们最终得到的文件只有23 KB,小了75%:

结论

GIF是目前仍然使用的最古老的文件格式,因为它们简单,近乎通用的支持以及用作动画的能力。尽管有这些积极的功能,GIF往往是大文件,导致页面膨胀,可能会对您的网页性能产生负面影响,并导致糟糕的用户体验。因此,您应该考虑严格优化静态GIF,远离动画GIF,并使用更现代的技术(如HTML5 / MP4视频)实现视频剪辑。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly