

Show HN: Gif2sprite – Convert animated GIFs to image sprites and CSS - DigitalSea
http://gif2sprite.com

======
mr_luc
Whoa, cool!

The gif integration would be what appears to separate this from little libs
like Motio[0].

_Question for HN_: is there a reliable cross-browser way to use the sprited
background-image approach with _responsive_ elements?

I'm thinking specifically about responsive images, where you want to fill a
certain amount of space.

Because of IE's lagging support for various background-... css properties, my
impression was that unless you can say goodbye to IE8 it's not an option
(maybe not even for non-sprited bgimage, but actually I think there's a DX
transform that can stand in for css background 'cover').

But in fact I don't believe I've _ever_ actually seen a demo of a responsive,
animated, _sprited_ background-image! I might have just missed it. I've just
been preloading images and animating the src property.

\----

[0] [http://darsa.in/motio/](http://darsa.in/motio/)

------
fletchowns
Neat! I like the minimalism. Might not hurt to have an example of the output
on there. It would be cool if it was an API that was easy to hit from curl.

Ran into an issue with this gif though:
[http://i.imgur.com/5NGvn30.gif](http://i.imgur.com/5NGvn30.gif) \- top of the
page says "Warning: chmod(): No such file or directory in
/var/www/gif2sprite.com/public_html/index.php on line 36".

~~~
DigitalSea
Thank you and sorry about that. The GIF you were uploading was over the 2mb
limit, but error messages as pointed out below weren't showing. I've hopefully
fixed the error messages now, so it should be more clear if your GIF is too
big.

------
Vheissu
This is really cool shame about the lack of style though, but it seems to work
really well. I could see use in this for being able to pause, play and rewind
animated gifs. Seems you also reduce the size of the original gif converting
it which could offer some benefits, I uploaded a 1.5mb gif and it reduced it
to a 700kb sprite. If you supplied a Javascript plugin to be able to use the
sprites as gifs in the zip download, it would make this so much better. Good
job, nice and original idea.

~~~
DigitalSea
The lack of style was intentional, it took me less than the better part of an
hour to build this. I built it because I needed to convert a GIF to a sprite
and didn't want to have to use Photoshop. I am planning on a bundled
JavaScript library with weekend actually so you'll be able to pause, play and
rewind the sprites as if they were videos. I have some code for another
project that does this, but it's not in a form of easy to use drop in code.
And the reduced file size is because I am compressing the JPG images when the
GIF is split, then once the frames are combined, I am compressing further. At
first I thought this would result in poor quality sprites and not make a
difference, but it seems the double compression works really well.

Thanks for the nice words, I hope someone finds it useful. If people find it
of use, I might devote more time to making it a little nicer and more feature-
packed besides the JavaScript library I'll be making for it this weekend.

~~~
super-serial
A javascript library would be extremely useful.

I was thinking of extracting the gif parsing code from this project:
[https://github.com/shachaf/jsgif](https://github.com/shachaf/jsgif)

Then I looked at the code. I've never seen such callback hell in js without
there being a server... so I abandoned that idea and was eventually planning
on writing my own.

~~~
DigitalSea
It's funny you say that, I've been looking at this:
[https://github.com/buzzfeed/libgif-js](https://github.com/buzzfeed/libgif-js)
— it's a fork of jsgif, but doesn't require a server though. You call the
library on the GIF and it handles the rest.

------
madospace
Good job!

I just integrated it with a super simple SpriteSpin
([http://spritespin.ginie.eu/](http://spritespin.ginie.eu/))

[http://jsfiddle.net/madhuvana/PYBDu/1/](http://jsfiddle.net/madhuvana/PYBDu/1/)

~~~
DigitalSea
Ah, nice one. I didn't know about SpriteSpin, really cool library.

------
MiguelJones
This is fantastic. I needed an app like this a couple of months ago, shame it
wasn't around then. Good job!

------
jspc
Hrm, opening the CSS I find ^M chars at the end of every line. Why the windows
linebreaks?

