How to get better transparency with GIFs? - image

Is there any software, plugin or technique that would allow creating/exporting PNG-like GIFs with smooth transparent edges, at least for smaller images like bullets or buttons.
I really have to use GIFs sometimes for IE6 so it'd would be great to know if such a tool exists?
Thanks

No, the GIF format does not support alpha-channel transparency like PNG does. You can only select one out of the 256 possible colors in a GIF to be transparent.
If you know roughly what color the background will be, the best you can do is create the GIF with the same background you plan to use it on, then select the background color as transparent. The smooth edges will look smooth against that specific background, but horrible against other colors.

The edges in a PNG are smooth because of anti-aliasing, and thus, variable opacity. The GIF format doesn't support this, so unfortunately no there isn't a way to do it.

GIF doesn't have an alpha channel like PNG, so you can't get smooth transparent edges. The alpha channel specifies how transparent each pixel is, so you could have half-transparent pixels for example. GIF on the other hand is limited to 8 bit colors and one of them is designated as the transparent color.

yes, a GIF can be transparent, just use png transparent frames and when embedded in css it would have a transparent background.
background: url(../images/mundog.gif) no-repeat;

As far as I recall (I've not used GIFs for quite some time), a GIF doesn't have a variable transparency - a pixel is either transparent or not.
You could simulate transparency by blending with the background image, but that would rely on having a static, defined background.

The modern solution for this is using WebP instead of GIF.
WebP supports both animation and an alpha channel, as well as lossless compression.
It's well-suported by browsers nowadays.

Related

Image with transparent background in Flutter

I have image of object with transparent background for my Flutter app.
But Flutter shows this image with transparent background, as it is.
How do i hide transparent background of the image in Flutter?
The image you are using is not a proper transparent PNG file. It's a JPEG. So, please use a proper transparent PNG file. Here are some difference between a JPEG and PNG:
Both support true color or a palette of 16 million colors, PNG also
supports 256 color and monochrome images.
JPEG uses a lossy algorithm, PNG uses the ubiquitous lossless
algorithm which we all know as ZIP.
PNG supports alpha as well as single color transparency. JPEGS are
opaque.
Compression ratio of images can be upto 50x for a JPEG but maybe at
most 4:1 in PNGs for most images with many colors

[Image Processing]Thresholding Not Ignoring the transparent pixels

Currently I am trying to crop the face along with hairs by the help of image segmentation methods, and then I have set all the non color pixels to be transparent, Then I am trying to apply Binary Threshold technique and Adaptive Threshold. But I am getting non-desirable results. Unfortunately the OpenCV methods are not ignoring the transparent pixels, and in documentation it is not defined how to handle this case, Any experienced help is appreciated (However I can replace the transparent pixels by a color value, provided I get the desired results)
Image 1.png(original Image with transparent background)
Image2.png(Image after applying simple binary threshold)
Image3.png(Image after adaptive threshold)
Clearly some image distortion/Noise is seen in the transparent areas of the image ?
And I was able to solve this issue , I am posting this answer to help other fellow people for the educational purposes, and due to limited clarification about this thing, So the hack is to change the background color to be white(it worked in my case but you can surely choose some other background color), So now I colored all the pixels with alpha value 0 as while colored opaque pixels and then applied the required operations, And the outputs were as per expectation:
Then applied some more image processing features to create this image out of this:

Only PNG supports transparency, is that true?

I found JPG does not support transparency, the alpha value is always 255. I am wondering only png supports transparency?
png-32 supports different levels of transparency. Each pixel can have an opacity between 0 and 255, with 0 as completely transparent.
png-24 supports setting one color as fully transparent. Everything else will be opaque.
gif uses a color palette. You can specify that one color in the palette is fully transparent.
png-8 also uses a color palette but each color in the palette has its own opacity value, so it supports varying levels of transparency too.
jpg does not support transparency.
JPEG 2000 supports full transparency. See JPEG 2000 Side channel spatial information.
JPEG XR (not the same as JPEG 2000) also supports transparency.
However it is not a useful format for the web as only Internet Explorer and Edge support it.
WebP is another emerging image format with support for transparency.
However, Internet Explorer lacks support for it.
From Transparency (graphic) - Wikipedia:
Raster file formats that support transparency include GIF, PNG, BMP, TIFF, TGA and JPEG 2000, through either a transparent color or an alpha channel.

White frame around images in WoW Addon

I am having some trouble with my World of Warcraft addon. Whenever I display my TGA files in the addon, there is a thin white frame around them. The same happens when I convert them to BLPs.
When I look at the images themselves with Preview, there's no white frame, but WoW decides to display one.
How do I resolve this?
I'm guessing you are using TGA files with an alpha channel and the "thin white frame" is about a pixel or less.
This is usually the effect of a matte that is placed under the opaque edges of the artwork prior to calculating the alpha channel. The solution is to generate your own alpha channel and feather the edges in by a pixel or so thus masking the matte.
The explanation is actually a tad more complex than this, but the method works.

How to make icon with pink background transparent?

I'm using Visual Studio icon library (VS2008ImageLibrary), there are some BMP files with a pink background. How can I make the pink background become transparent? What software can I use to do this? Any free one?
Thanks
I used IrfanView's batch conversion tool. It's still some work, because you have to click the pink area on every single icon instead of just specifying pink as transparent color, but it worked. It would be easy to write a simple conversion tool using GDI+ though, which I considered as well.
Note that even though you can use them then as transparent images, many of them unfortunately still have ugly edges when you render them on a dark background or use them as overlay. If you just want very few of them, consider tweaking them individually if you think you'll not always have a bright background.
You can try it online provided you can transform your bmp into a gif first.
Or you can grab PAINT.Net (freeware), and apply a transparent background by following this video instructions.
You can do it by using ImageMagick convert:
convert input.png -transparent magenta output.png
By the way, it is not pink, its magenta colour.
While I don't know the modern .NET answer to your question, it's worth noting the historical reason for these bitmaps with magenta backgrounds:
Back in the Win32-only days, there were some Common Controls (like the Toolbar, and ListView) that took these bitmaps and a colour to be treated as transparent, and then rendered that colour as transparent. I imagine that, behind the scenes, they used functions like TransparentBtl.
I know it's something related to Form.TransparencyKey
but I donno what is exactly that pink, you have to know the exact RGB / system or Web color.
if you know please share us

Resources