原文地址

那一天，我收到设计姐提供的图片

立志成为一位优秀工程师的我，看图深思..

为了节省流量（流量就是金钱）
为了让图片更快加载（更好的体验）

对，图片多余部分应该要被裁剪掉！

于是我，手动裁剪后，发现图片大小从 2.1kb 降至 1.9 kb，减少 10%！

于是我告诉了设计姐，请她帮忙裁剪一下图片

设计姐不辞辛苦地为我裁剪...

当我收到裁剪后的图片的时候，十分感动

应该怎么把每一帧图片位置还原呢？？！

有 CSS transform ！
可以使用 transform:translate(x,y) 移动到图片原来位置上！

于是我，在 chrome 上调整位置拿具体参数

在我快放弃的时候，我看到了一个叫 gka 的开源工具

我看了一下 gka 的介绍

gka 是一款简单的、高效的帧动画生成工具。

通过对图片集进行处理，一键式生成序列帧动画文件，并内置相关优化。

• 一键式 : 图片文件批量序列化重命名，生成帧动画文件，支持预览
• 性能佳 : 支持合图模式✓，相同帧图片复用✓，图片空白裁剪✓，图片压缩✓

GitHub 地址：https://github.com/joeyguo/gka

于是，我使用了 gka 的一行命令

没等我反应过来，gka 就帮我裁剪好图片，而且自动生成了帧动画文件，还可以预览！还可以有更多优化！

天呐，早点发现的话，设计姐也不用一张张裁图了，我也不用移了这么久了！

有了 gka 一键式生成帧动画，我先下班了！

大家一起早下班吧！

本故事纯属虚构，但 gka 是真的好用，试试！

GitHub: https://github.com/joeyguo/gka

欢迎试用，欢迎任何意见或建议，谢谢 ：D