在互联网的早期，动图是标准的图像格式。今天，你会发现png和jpg是主要的文件类型。尽管动图不再是网络图片的首选格式，因为它们的质量较低，且缺乏可访问性，但动图仍然存在。

让我们仔细看看。

gif格式的诞生

在1987年,计算机服务是一家主要的互联网服务提供商。那是拨号上网的时代，数据传输速率受限于电话线的处理能力。互联网很慢，但我们不知道有什么更好的。

CompuServe想为他们的客户提供下载全彩照片的功能，但在文件大小上，这将足够小，所以不会花几个小时。

计算机科学家史蒂夫-威尔特在CompuServe领导了一个团队，开发了一种图像文件格式，可以在更压缩的文件大小下提供全色调色板。

因此，他们基于LZW算法开发了图形交换格式(gif)。最初的迭代，也被称为gif87a，提供每像素8位和256个索引颜色。第一张出现在网上的彩色图片是一张像素化的飞机飞过动画云背景。以今天的标准来看，它看起来很不错，但在当时，这是一个巨大的创新。

动图的没落

动图是标准的网页开发者用于静态图像，直到20世纪90年代中期不再受欢迎。

1994年，专利持有者LZW算法他们不再为自己的技术被免费使用而感到高兴。Unisys做出了一个商业决定，向那些在商业软件和应用程序中使用动图的人收取许可费，人们对此并不满意。

电脑和互联网也变得越来越好。当动图发布时，其基于24位RBG的颜色是当时技术的标准。但由于256种颜色的调色板很窄，缺乏透明的背景，以及像照片这样复杂图像的像素渲染，动图也有其局限性．

一种新的文件格式——便携式网络图形，或称png——开始崭露头角。它提供无损压缩和更好的色彩功能，并具有开放的格式，没有任何版权所有者收取版税。

gif死灰复燃

虽然它们不再适合高分辨率的视觉效果，但你会发现gif图像在基于网络的交流中占据了一席之地。

办公室里的表情包是你和同事交流的主要方式吗?那些是gif。在短信和社交媒体平台上表达情感的另一种形式——动画贴图也是动图。

其基本原理是——当你可以直接发送一个简短的视频剪辑来传达你的感受时，为什么要输入一个冗长的文本呢?用动图说出来，别人马上就能听懂了。

动画动图是如何工作的

动图通常是将视频剪辑压缩成循环动画。动图是由独立的帧组成的，很像老式电影。这种将动画或视频转换成连续同步帧的过程最终比一个mp4文件大5到10倍。

虽然它们可能会大很多，但动画动图可以在现代网站中以多种方式使用，包括:

• 视频文件预览
• 屏幕录像
• 动画背景
• 应用工作流的示威游行
• 加载状态的动画
• 不自然的复古的图形

gif和可访问性

虽然动图被广泛使用，但它们并不总是对用户友好。那些有视觉或其他障碍的人在浏览网页浏览器时可能会有问题。

首先是无限循环的问题。一般规则是，5秒钟后，视频应该停止播放，或者访客应该可以选择停止或暂停播放。此外，如果一个gif动画文件有频闪或强烈的闪烁，这对癫痫患者来说是一个巨大的风险。建议画面每秒不超过三次。

Webflow的高级软件工程师Nick Gard给了我们以下在Webflow上构建时使用动图的建议:

• 当用户在他们的设置中启用了首选减少运动时，动图应该被隐藏。对于这些用户，可以用gif本身的静态图像来替换它。
• 总是包括替代文本-特别是当有文本在实际的gif。这有助于使用屏幕阅读器的用户理解图像所代表的内容或所传达的信息。这也将有助于搜索引擎优化。
• 要处理所有这些，你可以使用元素:

<图片>
<源
srcset = " moving.gif "
媒体= " (prefers-reduced-motion没有偏好):“>
< img
src = " still.jpg "
Alt ="将应用于渲染的任何图像的文本" />
< /图片>

动图会一直存在吗?

尽管已经出现了诸如WebM、MP4和Theora等格式，gif仍然是运行时间最长的文件类型之一，使网页、社交媒体平台和即时通讯应用程序上的动画成为可能。令人惊讶的是，1987年推出的一项技术发展至今仍在使用——但我们就在这里。

动图可以在特定的时间和地点使用，但它对大量的人来说是不可访问的，加上它惊人的庞大和笨拙的格式——这使得它在我们选择图形或图像时排名靠后。

如果你确实选择使用gif，那么一定要遵循一般的指导方针:在5秒后停止gif，或者让用户选择暂停，避免每秒闪现三次的视觉效果，并始终在gif中添加alt文本，以使屏幕阅读器能够理解它们。