web图像优化(4)

作者: 技术与健康 | 来源:发表于2018-01-24 12:34 被阅读19次

压缩动画GIF,为什么视频更好

尽管格式非常有限,但动画GIF仍然广泛使用。虽然从社交网络到流行媒体网站的所有内容都大量嵌入了动画GIF,但是这种格式从来就不是为视频存储或动画设计的。

事实上,GIF89a规范注意到“GIF不是作为一个动画平台”。颜色的数量,框架的数量和尺寸都会影响动画的GIF尺寸。

image

动画GIF与视频:
比较不同格式的〜等效质量的文件大小。

提供与MP4视频相同的文件通常可以减少80%以上的文件大小。 GIF不仅经常浪费显着的带宽,而且花费更长的时间来加载,包含更少的颜色,并且通常提供次级用户体验。

您可能已经注意到,上传到Twitter的动画GIF在Twitter上比在其他网站上表现更好。 Twitter上的动画GIF实际上并不是GIF。 为了改善用户体验并减少带宽消耗,上传到Twitter的动画GIF实际上被转换为视频。 同样,Imgur将GIF转换为上传的视频,并将其默默转换为MP4。

为什么GIF要大很多倍? 动画GIF将每一帧存储为无损GIF图像 - 是的,无损。 我们经常遇到的质量下降是由于GIF仅限于256色调色板。 与H.264等视频编解码器不同,它的格式通常很大,因为它不考虑邻居帧进行压缩。 MP4视频将每个关键帧存储为有损JPEG,从而丢弃一些原始数据以实现更好的压缩。

如果你可以切换到视频

  • 使用ffmpeg将您的动画GIF(或来源)转换为H.264 MP4。ffmpeg -i animated.gif -movflags faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.mp4

  • ImageOptim API还支持将动画GIF转换为WebM / H.264视频,从GIF中移除抖动,这可以帮助视频编解码器进一步压缩。

如果你必须用 Gif

  • 像Gifsicle这样的工具可以去除元数据,未使用的调色板条目,并最小化帧之间的变化.
  • 考虑一个有损GIF编码器。 Giflossy的Giflossy支持这个 可以节省〜60-65%的尺寸。还有一个很好的工具,它被称为Gifify。对于非动画GIF,将其转换为PNG或WebP。

相关文章

  • web图像优化(4)

    压缩动画GIF,为什么视频更好 尽管格式非常有限,但动画GIF仍然广泛使用。虽然从社交网络到流行媒体网站的所有内容...

  • Web图像优化(2)

    WebP WebP是Google最近推出的一种图像格式,旨在以可接受的视觉质量提供较低文件大小的无损和有损压缩。它...

  • web图像优化 (1)

    JPEG 对于图片,一般分光栅图和矢量图 这两种图的对比也是很明显的 光栅图:是基于 pixel像素构成的图像。J...

  • web图像优化(3)

    SVG优化 保持SVG精益意味着剥离任何不必要的东西。 用编辑器创建的SVG文件通常包含大量的冗余信息(元数据,注...

  • web图像优化(5)

    避免使用有损编解码器重新压缩图像 建议始终从原始图像压缩。 重新压缩图像有后果。 假设您使用了已经被压缩的质量为6...

  • 撩课-Web大前端每天5道面试题-Day25

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

  • 撩课-Web大前端每天5道面试题-Day22

    1.web前端开发,如何提高页面性能优化? 2.前端开发中,如何优化图像?图像格式的区别? 3.Vue的双向数据绑...

  • Web 性能优化:21种优化CSS和加快网站速度的方法

    这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正...

  • 性能优化

    内容优化 服务器优化 Cookie优化 CSS优化 javascript优化 图像优化

  • 启动优化

    耗电 cpu 网络 定位 图像 优化:1,降低CPU,GPU功耗2,少用定时器3,优化I/O操作4,大数据建议sq...

网友评论

    本文标题:web图像优化(4)

    本文链接:https://www.haomeiwen.com/subject/ppfuaxtx.html