Print Page | Close Window

Gif: transparency and animation

Printed From: Pixel Joint
Category: The Lounge
Forum Name: Resources and Support
Forum Discription: Help your fellow pixel artists out with links to good tutorials, other forums, software, fonts, etc. Bugs and support issues should go here as well.
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=16100
Printed Date: 11 September 2025 at 7:42am


Topic: Gif: transparency and animation
Posted By: Zizka
Subject: Gif: transparency and animation
Date Posted: 03 April 2013 at 10:40am
Hello!
I wish to make an animated logo for my brother for his company. The thing is that I think transparency (alpha channel?) is not supported in animated gifs… I wish to have elements which fade in and out of view so I need to have transparency enabled.

Is there such a thing as a file format which supports both animation and transparency? I would imagine that in 2013 such a thing would exist but I find nothing. As far as I know, I animated .png don’t exist so I don’t know what to do.

Could someone help me out please?



Replies:
Posted By: jalonso
Date Posted: 03 April 2013 at 10:55am
.gifs have always supported animation and transparency. Check your software output options.

-------------
http://www.pixeljoint.com/forum/forum_posts.asp?TID=9378&FID=6&PR=3 - PJs FAQ <•> http://www.pixeljoint.com/forum/forum_topics.asp?FID=6 - Sticky Reads


Posted By: Zizka
Date Posted: 03 April 2013 at 11:05am
I use graphic gale. While it does support animation it does not support transparency.

Here's an example:


The movement lines are transparent under the .gal format but lose their transparency when saved as an animated gif.

Also, for some reason, the frame custom speeds are lost when the .gif conversion is done.


Posted By: yrizoud
Date Posted: 04 April 2013 at 2:45am
GIF,  animated or not, only supports "all-or-nothing" transparency : A pixel is either fully opaque or fully transparent.
Animated PNG exists but not recommented for web usage, it's not supported by IE or Safari ( http://en.wikipedia.org/wiki/Animated_Portable_Network_Graphics - ref )

About the timing issue, it's because web browser don't render the timing of animated GIFs faithfully.
Short story: For web use, don't use timings below 6/100s (your image has some 1/100s frames)
Long story: http://humpy77.deviantart.com/journal/Frame-Delay-Times-for-Animated-GIFs-214150546 - Excellent article by Humpy77 (from 2007, but situation hasn't improved much since.)


Posted By: Zizka
Date Posted: 04 April 2013 at 9:33am
Thank you for the explanations. I figured as much but I guess I was hoping that was a way to circumvent that.

I think you were probably referring to apng but like you said, it doesn't sound all that well supported.

Thanks again !


Posted By: neota
Date Posted: 07 April 2013 at 2:04am
http://https://developers.google.com/speed/webp - WebP is a relatively new format created by Google developers that has more support than APNG has; It combines the virtues of GIF (indexed color, lossless) with PNG (truecolor, alpha channel supported, lossless) and JPEG (truecolor, lossy), while providing size savings for both lossy and lossless modes. Also, it's free of IP/patent worries, unlike GIF and (somewhat) JPEG.

It's currently supported by Google Chrome and Opera, as well as a http://en.wikipedia.org/wiki/WebP - large range of common image editing software and graphics  platforms. Support in Firefox is planned.
If you want to see the animated-images-on-web situation improve, WebP is the format to back.

For now, you can:
  • use alpha-dithering to emulate opacity changes.
  • Or, you can 'semi-flatten' the frames, if they have a known flat-color background.(semi-flatten is what it's called in GIMP; it takes the layer and whereever opacity is not 0, it blends with the chosen color according to the opacity level. The result is a 'binary' transparency that appears to be partially transparent over that color of background.
  • Finally, if you are CSS-savvy, you have the option to make the frames into a PNG spritesheet and use CSS animation to perform the animation. This is the most flexible, but also is somewhat fiddly. Common on commercial websites.


-------------
absolutely.



Print Page | Close Window