GIF添加3D加速

简介: 由于浏览器内核对Gif格式的图片会产生卡的情况,所以我们需要告诉浏览器,开启一下加速,方法很简单,就是利用css3的特性,强制告诉浏览器,这是个元素,需要3D转换,请务必开启加速效果方法1给gif开启3D独立层渲染,就是给图片一个0度角3D旋转,使动画图片只渲染最小区域,就是给gif添加样式transform: translate3d(0,0,0),gif动画会引起全屏重新渲染,开启3d动画目的是让git动画独立渲染方法2如果gif没有高保真的图片你可以按桢导入ai,然后导成矢量,github上有一个叫svgo的东西好像可以优化svg动画差值。

由于浏览器内核对Gif格式的图片会产生卡的情况,所以我们需要告诉浏览器,开启一下加速,方法很简单,就是利用css3的特性,强制告诉浏览器,这是个元素,需要3D转换,请务必开启加速效果

方法1

给gif开启3D独立层渲染,就是给图片一个0度角3D旋转,使动画图片只渲染最小区域,就是给gif添加样式transform: translate3d(0,0,0),gif动画会引起全屏重新渲染,开启3d动画目的是让git动画独立渲染

方法2

如果gif没有高保真的图片你可以按桢导入ai,然后导成矢量,github上有一个叫svgo的东西好像可以优化svg动画差值。好久没用过了,矢量导出svg格式

方法3

别用gif.用css动画或者canvas动画

目录
相关文章
|
数据处理 对象存储
如何利用 OSS 转换 webp 文件为jpeg
如何利用 OSS 转换 webp 文件为jpeg,OSS 样式使用
1817 1
|
28天前
|
存储 编解码 UED
网站图片JPG、PNG、GIF哪个好,该选择谁
网站图片JPG、PNG、GIF哪个好,该选择谁
26 0
|
6月前
|
编解码 Rust 前端开发
纯前端也能实现在线GIF压缩
纯前端也能实现在线GIF压缩
|
11月前
DPG图片压缩技术和webp图片格式
DPG图片压缩技术和webp图片格式
|
存储 XML 编解码
探索现代图片格式:从GIF到HEIF,优势与适用场景一览-2
使用场景: JPEG适用于各种需要高度压缩、广泛兼容性以及不需要透明背景的场景。它特别适用于摄影、照片、艺术品等复杂图像的存储和展示。
411 0
|
存储 编解码 算法
探索现代图片格式:从GIF到HEIF,优势与适用场景一览
引言 最近在掘金看到很多动图头像,但都失真了,好奇就研究了下前端各种图片格式
252 0
|
计算机视觉 异构计算
|
存储 算法 Android开发
聊一聊几种常用web图片格式:gif、jpg、png、webp
在大多数的web页面中,图片占到了页面大小的60%-70%。因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多,本文仅针对几种web应用中常用的图片格式:gif、png、jpg、webp进行一个基本的总结。
|
编解码 弹性计算 Serverless
FGAP加速图片和视频转码
场景1:图片转码 移动互联网早已进入读图时代,目前的图片都是JPEG格式,尺寸太大,导致传输占用更多的网络带宽,花费更多的传输时间并占用更多的存储空间。JPEG图片转码为WebP/HEIF需要消耗大量的计算能力。使用阿里云FaaS加速图片转码解决方案将使客户TCO降低约40%。 场景2:视频转码 到2022年,82%的IP流量都将来自于视频的录制、上传和播放。HEVC/H.265无论从画质还是码率,都比H.264有明显的优势,但是将视频将H.264编码为H.265将消耗巨大的算力。使用阿里云FaaS加速视频转码将显著降低视频大小,节省网络流量,降低成本。
637 0
FGAP加速图片和视频转码