Showing Small, Looping Animations online?

Moosebish · Jul 2013

I have a handful of props that are for a pre-rendered iOS game. But the ones I'm having trouble with are the ones that are animated. Typically, they're small looping animated for running water or glowing light. But what is the best way to display those?

I've looking into using .gif's but I don't want them to bog down my site or be super crappy quality. I'd prefer to show them at full res and looping.

Any suggestions?

fatihG_ · Jul 2013

Flash, youtube, vimeo? You should not have any noticeable artefacts with gif's though.. I'd just go with gif myself tbh.

Eric Chadwick · Jul 2013

GIFs are pretty good, but they can get big. Did this one recently, it's 8mb.
http://ericchadwick.com/img/volcano_loop.gif
Kind of too big, but it has a lot of gradients, so it doesn't compress well. I did reduce it to 15fps, but the dithering and the frame size make it big.

Photoshop does a pretty good job with GIFs, it's also one of the best at dithering.

I like to use GIF Movie Gear, had a studio purchase it for me when I was making GIFs for them, has good optimization tools and it's cheap.

You could also look into Javascript for animating a list of PNG or JPG files.

StephenVyas · Jul 2013

I agree with Eric, you can get pretty good quality out of gifs.
I used gifs to showcase animations in my portfolio using photoshop. It allows you to set the lossy, transparency other pattern algorithms to reduce size.

Depending on the dimensions, you can get great quality with reasonable file sizes.

Moosebish · Jul 2013

Hmm, alright. I've been using Flash to create my gifs and no matter what setting configurations, it still looks like crap. Especially gradients.

I would prefer to avoid putting flash stuff on my site and I feel like all the animations are small and short, that making a video out of them would be a bit much..

I'll mess around with gifs in photoshop..

Showing Small, Looping Animations online?

Replies