tiny green screen files

[anon125]

with blender software i can make 500kb files of animation. one can set the background as green.
when i try and convert the green to transparent with pinnacle studio 12 it ends up a humongous 79MB!

what software ( preferably free) can do this green screen conversion but leave the file tiny for use on a website?
at present the blender file is 500px x 500 pix. (hope to make it smaller when i get all this to work.)

i need what was green to be transparent
thanks all

[jagabo]

Select a codec and compress the video.

[smrpix]

Please describe in more detail how you are planning to use the transparent version. What is the reason you cannot leave it green and simply chroma key during actual use? Files with alpha channels, tend to be larger, though 79MB doesn't sound particularly onerous.

[anon125]

the website folks say i have to convert the green to transparent before i put it on my website.
Here is the file if you wish to convert it to transparent

thanks

[poisondeathray]

Are they embedding it directly? Did they specify what format (FLV, GIF etc...)?

Is it a "modern" HTML5 website , or "old school" flash ? Because there are "tricks" you can use with HTML5, but old style websites require VP6A (FLV) . But many browsers / client setups STILL cannot view HTML5 properly

If you were exporting out of blender, it's better to export with alpha channel (transparency) directly . You usually never want to "chroma key" anything; not only does it take more time, the quality is almost always worse, and more potential for problems

[smrpix]

The green appears to surround the active image. Why export the green portion, either as green or transparent, at all?
(Sorry to keep answering your questions with questions.)

[jagabo]

You'd be better off taking the advice others have given here. But attached is a lagarith AVI with an alpha channel.

[anon125]

if blender could render an alpha transparency then i would have done that.
the website is webstarts - dunno what kind it is.
i exported the green hoping to use a green screen convertor.
windows could not play the lag file.
"You'd be better off taking the advice others have given here." what did i miss?
thanks all

[poisondeathray]

smrpix is right - if it's a square or "rectangular" graphic or animation, you don't need green screen or transparency at all. You only need transparency if you want to layer a non rectangular foreground over a background . A common website "video" example would be when you have a person talking and walking (which was shot on greenscreen) in front of a website background. So in your example you could just crop the green areas off and be left with the "square" central portion

To reiterate the questions - 1) why do you need transparency in the first place ? 2) How are you using this animation ?

The most compatible web format would be a gif, but the quality is lower, only 256 colors. For small simple graphics like your example it might be suitable

[poisondeathray]

gif examples

100x100 with trans border 210kb



51x61 cropped no border 211kb



The transparent borders take up physical space, so the first is actually 100x100

If you have longer animations, or more diverse colors, then gif becomes less appealing. Besides 256 color limit, it doesn't provide temporal compression - so low quality, massive filesizes . In those cases, actual "video" embedded becomes more appealing. But they (video) usually don't loop, and they are not as widely compatible across all platforms. There are gif variants called gifv and giphy - but they are actually VP8/VP9 video

[jagabo]

windows could not play the lag file.

You need the lagarith codec. Attached is an uncompressed ARGB AVI that shouldn't require installing a codec. It's bigger, of course.

[anon125]

To reiterate the questions - 1) why do you need transparency in the first place ? 2) How are you using this animation ?
not all of the shapes will be neat squares - some will be say oval, hence need the transparency.
the animation will be one of many on a website. just decoration if you like alltho they will be links to other websites.
they will be all in the region of 125x125px
dunno what to do with the codec!

thanks all

[poisondeathray]

Blender can render out transparency eg. PNG image sequence with alpha. Or quicktime animation codec. Use google, there are many tutorials and posts about blender and transparency (alpha channel) exporting. Even if you don't encode the final format with blender, you can still take that RGBA export from blender as import into the final encoding

I already laid out the options . In those cases where you truly need alpha channel:

1) GIF . It's really an image format, but "benefits" are wide support (even ancient browsers 20 years old support it), can be tiny in filesize if optimized - suitable for short animations with limited color palette . "negatives" are larger dimensions and longer duration will become massive in filesize compared to "video" . Low quality when using lots of color . If your sample is typical of what you would be using, this is the format I would use

2) VP6A . Supported by flash, but it's being phased out. No free or opensource methods of encoding

3) HTML5 magic . There is a way to use a separate matte layer to generate transparency (black and white define areas that are transparent, where 100% white shows 100% foreground object) making use of HTML5 canvas. All modern browsers should be able to utilize this method.
http://www.sciencelifeny.com/transparency/transparency.html#

4) (I don't really call this a viable choice) VP9 actually officially supports alpha channel. But only beta builds of certain browsers actually support it this is like <0.0001% of users

[anon125]

thanks
i was hoping to make the video in blender but it only produces images with transparent parts then i have to compile them in say PSE5 to make the video.
so i guess animated gifs it is.

[smrpix]

thanks
i was hoping to make the video in blender but it only produces images with transparent parts then i have to compile them in say PSE5 to make the video.
so i guess animated gifs it is.

Are you adding the logo in your browser or in your PE timeline before rendering? (another question!) If you're adding it in the timeline, filesize isn't very important.

[poisondeathray]

Blender can export gif directly with addons

spritify
https://wiki.blender.org/index.php/Extensions:2.6/Py/Scripts/Render/Spritify

bligify
https://github.com/doakey3/bligify

But sometimes you want to use other gif options and optimization techniques in other programs. Rendering out a higher quality , higher resolution intermediate gives you more options (and if you change your mind down the road and wanted to use video)

Blender can export "video" with alpha, but none of those formats are compatible with web embedding

[anon125]

Blender can export "video" with alpha, but none of those formats are compatible with web embedding THANKS
I have a video conversion software.
what should blender export it as and what should i convert it to?
will the files likely be bigger than the animated gifs ?
thanks

[poisondeathray]

Personally I would use PNG with alpha image sequence. It's the most compatible. I always use image sequences because if something crashes all your work isn't wasted (ok, maybe it's not a big deal with a small animation, but try complex animations where it might take hours/ frame to encode) . If you use a "video" the entire video will be corrupt if you crash. But you can try quicktime animation codec (MOV)

All "video" exports from blender will be much much larger than the final GIF. 8bit RGBA will have >16.3 million colors possible. GIF only has 256 (!)

[anon125]

thanks
back to animated gifs!