• 切换模式
  • 返回顶部
  • 返回
  • 首页

[转载]为H5页面优化GIF

[原著] 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,确保视频未移至全屏

发表于 : 2018-05-03   ·  3315 人浏览
Hawk
Hawk

Hawk

别固执的认为某事必须 !

热门标签
  • 软件
  • Windows
  • Python
  • PHP
  • centos7
  • centos
  • python3
  • Nginx
  • MySQL
  • IP
  • DNS
  • WordPress
  • django
  • typecho
  • Win10
关于站长
  • 358534040
  • dyhawk@qq.com
  • Github.com/DYH89
2015 - 2025 Hawk. All Rights Reserved.
鄂公网安备42900402000705号 鄂ICP备14018555号-8号