Pixel Joint Forum: Gif: transparency and animation

Author

Message

Zizka
Commander

Joined: 07 May 2021
Online Status: Offline
Posts: 143

Topic: Gif: transparency and animation
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?

IP Logged

jalonso
Admiral
Admiral

Joined: 29 November 2022
Online Status: Offline
Posts: 13537

Posted: 03 April 2013 at 10:55am

.gifs have always supported animation and transparency. Check your software output options.

PJs FAQ <•> Sticky Reads

IP Logged

Zizka
Commander

Joined: 07 May 2021
Online Status: Offline
Posts: 143

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.

IP Logged

yrizoud
Commander

Joined: 03 May 2021
Location: France
Online Status: Offline
Posts: 343

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 (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: Excellent article by Humpy77 (from 2007, but situation hasn't improved much since.)

IP Logged

Zizka
Commander

Joined: 07 May 2021
Online Status: Offline
Posts: 143

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 !

IP Logged

neota
Commander

Joined: 27 November 2018
Online Status: Offline
Posts: 158

Posted: 07 April 2013 at 2:04am

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 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.

IP Logged

Resources and Support
Pixel Joint Forum : The Lounge : Resources and Support

Author	Message
Zizka Commander Joined: 07 May 2021 Online Status: Offline Posts: 143	Topic: Gif: transparency and animation 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?
	IP Logged

jalonso Admiral Joined: 29 November 2022 Online Status: Offline Posts: 13537	Posted: 03 April 2013 at 10:55am
	.gifs have always supported animation and transparency. Check your software output options.
	PJs FAQ <•> Sticky Reads
	IP Logged

Zizka Commander Joined: 07 May 2021 Online Status: Offline Posts: 143	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.
	IP Logged

yrizoud Commander Joined: 03 May 2021 Location: France Online Status: Offline Posts: 343	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 (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: Excellent article by Humpy77 (from 2007, but situation hasn't improved much since.)
	IP Logged

Zizka Commander Joined: 07 May 2021 Online Status: Offline Posts: 143	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 !
	IP Logged

neota Commander Joined: 27 November 2018 Online Status: Offline Posts: 158	Posted: 07 April 2013 at 2:04am
	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 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.
	IP Logged