Skip to content

[高效开发]与设计姐的图片二三事

郭林烁 edited this page Jul 20, 2017 · 4 revisions

原文地址

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

big 1

ganjuebudui 1

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

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

对,图片多余部分应该要被裁剪掉!

3 1

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

44

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

441 1

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

3332 1

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

jihe 1

ganjuebudui 1

应该怎么把每一帧图片位置还原呢??!

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

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

6667

wenzi 1

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

kenan-gka22 1

我看了一下 gka 的介绍

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

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

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

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


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

gka E:\img -t c

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

662267

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

有了 gka 一键式生成帧动画,我先下班了!

大家一起早下班吧!

tuijian

havefun 1

本故事纯属虚构,但 gka 是真的好用,试试!

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

欢迎试用,欢迎任何意见或建议,谢谢 :D