[原著] https://bitsofco.de/optimising-gifs/
像很多人一样，我喜欢GIF。我喜欢在我的文章中使用它们来说明功能。
然而，与此有关的一个问题是，GIF很沉重。
最近，我发现我的一些GIF文章的文章往往会变得非常慢。原因是GIF中的每个帧都存储为GIF图像，该图像使用无损压缩算法。这意味着，在压缩过程中，根本不会丢失图像中的任何信息，这当然会导致较大的文件大小。
为了解决网络上GIF的性能问题，我们可以做一些事情。
使用HTML5视频
令人惊讶的是，GIF上使用的无损压缩算法未经优化，MP4或WebM等视频格式将提供比GIF图像更小的文件大小。正因为如此，GIF性能问题的一个解决方案是根本不使用GIF，并用自动播放，循环，HTML5视频来替代它们。
通过对元素应用某些属性，我们可以模拟GIF的行为，但文件大小更小。我们需要的属性是 -
- autoplay：立即开始播放视频，无需用户按“播放”
- loop：无限循环播放视频
- muted：虽然GIF上没有音轨，但iOS Safari需要说明此属性才能自动播放视频
- playsinline ：对于iOS Safari，确保视频未移至全屏模式
- poster：指定下载视频时要显示的图像
要从本文的介绍中替换GIF，我们可以使用以下视频元素 -
<video autoplay loop muted playsinline poster="original.jpg">
<source type="video/webm" src="original.webm">
<img src="original.gif">
</video>这会给我们一个尺寸更小的视频
要将GIF转换为WebM，我们可以使用CloudConvert。或者，如果您使用Cloudinary，则可以将文件扩展名从.gif更改为.webm以获取视频格式。
有损优化
在某些情况下，由于HTML5 Video无法在任何地方使用，因此我们无法避免使用实际的GIF。例如，当这篇博文作为HTML电子邮件发布时，必须使用实际的GIF。因此，我们可以对GIF本身做出一些优化，使其更具性能。
正如我所提到的，GIF压缩算法是无损的。但是，有损压缩的选项也是如此。虽然这听起来像我们会得到明显较低质量的GIF，但完成有损压缩不应明显降低图像的质量。
有许多工具可以用于有损GIF压缩。一种用于优化GIF的流行工具是gifsicle和giflossy。Gifsicle是用于处理GIF图像文件的CLI，giflossy是提供有损压缩选项的gifsicle的一个分支（--lossy）。
要使用giflossy将有损压缩应用于GIF图像，我们可以使用以下命令 -
gifsicle -O3 --lossy=80 -o compressed.gif original.gif
我直接使用这个gifsicle的一个分支lossygif->有损GIF压缩器
该-03选项告诉gifsicle尝试多种优化方法以找到最适合的方法。该--lossy=80选项指定应用有损压缩的程度。根据您的需要，您可以调整此号码。该-o compressed.gif选项指定应该调用输出GIF的内容。最后，我们定义到原始GIF的路径。
使用之前的GIF示例，我们从11.4MB GIF变为6MB GIF，尺寸减小了47％！
通过将这两种方法相结合，我们可以以不会如此剧烈降低性能的方式使用GIF。
