Show HN: Gif2sprite – Convert animated GIFs to image sprites and CSS | Hacker News Reader

Show HN: Gif2sprite – Convert animated GIFs to image sprites and CSS

gif2sprite.com

26 pointsDigitalSea13 comments

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/

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 - top of the page says "Warning: chmod(): No such file or directory in /var/www/gif2sprite.com/public_html/index.php on line 36".

That gif is too large. Should have a clearer error message.

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.

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.

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.

> it took me less than the better part of an hour to build this

Under half an hour. Less than 30 minutes. :)

Love the little project BTW.

A javascript library would be extremely useful.

I was thinking of extracting the gif parsing code from this project: 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.

It's funny you say that, I've been looking at this: 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.

Good job!

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

http://jsfiddle.net/madhuvana/PYBDu/1/

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

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

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

Reply on news.ycombinator.com