I have a website that I need to make some images that are colored, with a 45% opacity, so you can see through to the background. My problem is that for obvious reasons I cannot use a .png. I have used a gif. When I get it on the site, the opacity has read as far as the color, but you cannot see through it. How do I make this happen
EDIT
I don't want to use an IE6 hack if I don't have to. As far as I have tried, there are no scalable hacks.
GIF does not support alpha transparency. Why is it so obvious that you cannot use PNG?
PNG works in all modern browsers, whereas alpha transparency is not supported in IE6 natively. However, there are many fixes for this available on the good 'ol webernets..
If you absolutely must support "dumb users", force them to use Chrome Frame, the "i'm in ur browser making ur browser another better browser" browser. Chrome Frame is a plugin for IE that renders the page using the Chromium engine from Google.
gif has only 1 bit of opacity, you can't have 45%
GIF transparency is either all on, or all off. It does not support partial transparency. PNG however does have partial transparency support. Unless you have a specific requirement to not use PNG images, I see no reason they could not be used.
Use transparent PNG to gain the full Alpha Channel, and then a fall-back CSS for Internet Explorer 6 that uses GIF, or one of the many workarounds to support transparent PNGs in IE6 (except the "workarounds" using AlphaImageLoader)
As stated above GIF only has 1 bit opacity, meaning On or OFF, nothing in-between. That is the same as 8-bit PNG.
Assuming the reason you can't use .PNG is because you're required to to fall back and work in older version of Internet Explorer. Unforuntately there is no good way to make it work. There are hacks that you can use to get PNGs to work properly in IE6, but if you have to support all the way back to IE5 you're SOL.
After playing around with different transparent GIFs, some are unstable and cause CSS glitches. For example, if you have an <img> and you use the tiniest transparent GIF possible, it works fine, however, if you then want your transparent GIF to have a background-image, then this is impossible. For some reason, some GIFs such as the following prevent CSS backgrounds.
Short but Unstable
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
I would advise using the slightly longer and more stable version as follows:
Stable But Longer
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Related
Icons Are Pretty Right?
I'm working on an UI update in an iOS app, and trying to make things look a bit better with some new icons- but I seem to be incapable of determining how to save an image correctly so that it looks good in the interface!
As you can see from this image, if I include a white background with the image it looks great. If I take those same images and use an alpha background they look terrible! It appears that either the images aren't using the #2x correctly, or something else is going horribly wrong.
These images are either saved with GIMP as a png with alpha, or exported from inkscape, the originals are vector graphics. We get the same results from both avenues. I am using both a base imageName.png and imageName#2x.png for scaling.
Somehow, magically, I changed the a single image to greyscale in gimp, and changed the base size to 25px and it showed up with alpha correctly blended. Stock images from apple are also functioning correctly, so it absolutely seems to be something that I'm doing incorrectly when I'm saving the images.
The Setup in XCode
Basic Questions
Is there a certain bit depth, argb vs rgba format, or some other quirk that I need to know to get these images to show up correctly? Is there any way to verify that the program is loading the correct imageName#2x vs imageName? Is there some document that talks about integrated graphics (the iconography documentation isn't very helpful on technical details)
Actual Images
With Background:
Without Background:
I think you will find success if you just save the image at 4x the size you actually want and specify the size manually.
Delphi 2010's TSpeedButtons did not seem to really support PNG transparency properly, because the Glyph property uses a TBitmap internally, and TBitmap is for bitmaps, and doesn't support PNG transparency properly, and TSpeedButton.Glyph can't support transparency then.. update: But the actual problem was that I had some external stuff (Developer Express components) that was rendering delphi's PNG support non-functional, TImage on the other hand, while it still TPicture, and can support PNG, was also affected by this Developer express bug.
A question was already asked about here, and the answer shows how to use pre-blending so that transparency won't turn into black pixels. I want to know if there is another button control that will use alpha-blended PNGs loaded at designtime, and which does not convert the PNG resources into BMP format discarding the alpha channel and, causing the black border shown here.
In short, this control would not use TBitmap, and would not use the color key transparency feature that is all TBitmap has.
To repeat, I am not asking how to solve the black-around-the-outside issue while still using the out-of-date TBitmap/TSpeedButton based VCL functionality, because it lacks modern PNG transparency functionality, I am asking about replacing it with something else that "just works".
As a secondary drawback, converting a small .png file into a .DFM bitmap resource is essentially wasting space and making my form .DFM content too large. Native .png file format storage within the .dfm should make the resulting forms smaller.
Update: PngComponents look like they should work, but I got an Invalid Graphic format error when I try to load a png into the Png speedbutton. Note that the Png image list component has no such problems. It seems that cxLibrary (a developer express package) is breaking things. Once I removed all developer express stuff, this problem goes away. So although I have selected Pngcomponents as the answer, if you have devex stuff installed, use their buttons instead, and not pngcomponents.
You may have a look at PngComponents. It has a TPngSpeedbutton and some other controls working directly with PngImages.
You could also look into the TMS Software Component called TAdvGlowButton as this supports PNG images with alpha transparency.
Link to site...
It turns out that cxButton that comes in the Developer Express VCL component pack also supports PNG buttons.
I've just put some photos up online and I noticed that they photos appear to be a different colour in Firefox and Safari to IE and Chrome... Any ideas on what the issue could be? Due the browsers interpreter colours spaces differently or something?
Cheers
Anthony
They interpret color spaces differently because some browsers ignore ICC color profiles that are part of the images themselves. Safari and Firefox 3+ don't however, though Firefox needs to be configured to enable it.
Here's a related link: http://www.gballard.net/psd/go_live_page_profile/embeddedJPEGprofiles.html
I've noticed that png format especially differs cross browser wise. When I noticed this, I converted to jpg and it resolved it.
An image is copied from Firefox into the Clipboard. My program gets it from clipboard and saves as a JPEG image. For some reason the image is saved with a black background. If I open the same URL in IE and copy the image into the Clipboard, the image is saved correctly by my program. I am using Delphi 7.
I also tried to copy the image from Firefox into Microsoft Paint and again the black background. Does anyone has a tip in how to handle such problem.
I assume the original image is transparent? If so, you should be aware that JPEGs can't handle transparency. Try switching the output image type and seeing if you program magically goes away.
If you get the same background in your program and Paint, then that tells me this is something to do with Firefox, and thus it is not necessarily your problem to solve.
Since you're concerned about the background color, I guess the image you're copying has transparent elements to it. So tell me: What color should be there? A JPEG image can't have transparent parts, so every pixel must have some color. Firefox apparently chooses to put black there; how is that not a correct choice and Internet Explorer's is?
I wonder what color background you get when you paste into a more capable graphics program than Paint, such as Gimp or Photoshop. I would expect those programs to consider multiple clipboard formats and choose the most appropriate format, so they might choose a format that accommodates transparency when it's available. Your program and Paint, on the other hand, probably just use the cf_Bitmap format, which of course can't have transparent pixels, so they get whatever the copying program opted to use to fill in the blank space.
By the way, both Firefox and Internet Explorer allow you to drag an image directly from the browser to the desktop or other folder window to save the original image. Maybe that makes your program unnecessary?
I know this is a slightly old question, but I've just come across the same issue in Firefox v9.
Use the following workaround: save the image in question to your computer, then copy the file in explorer and paste in the program you want to use (in my case I pasted into word).
I'm looking for software to create PNG8 format transparent images as per this article.
NOTE: I need a Linux solution myself, but please submit answers for other OSes.
pngquant does a good job of converting to PNG8 while preserving full transparency.
If you're size-conscious, you may also be interested in pngcrush, which can usually (losslessly) compress PNG files quite a bit.
I also needed a Linux solution and found pngnq to do a pretty good job. It seems to be designed specifically for creating 8-bit PNG images with alpha channels.
apt-get install pngnq # If on Ubuntu/Debian
For Mac: ImageOptim and ImageAlpha are GUIs that run pngcrush, pngquant, and various other normally command-line compression utilities. http://pngmini.com/
The link you provided references ImageMagick, which is an excellent toolkit for manipulating images on Linux.
Ah, if I remember correctly, when I have read this article some months ago, pngquant hadn't a Windows version. I see it has one now. So I tried it, and pngnq too.
The latter seems to do a slightly better job on the IceAlpha.png test image (from libpng.org), at the cost of a slightly bigger image (it can be post-processed with pngcrush or pngout anyway).
The dithering algorithms (the two of pngquant, the only one of pngnq) are different, and it might be worth having both tools, converting images with all algorithms and see what looks the best.
For the record, on the Windows side, IrfanView (4.10) displays these images very well (using the transparency level on each palette entry) while XnView (1.85.1) and GIMP (2.4) apply only a full transparency/opaque display, à la GIF: the light bulb given as an example in the linked article has a transparent background around it, but the orange part is fully opaque.
And the excellent utility TweakPNG shows we have a PLTE (palette, 222 entries) chunk and a tRNS (alpha values for palette colors, 222 entries) chunk. Even more, it allows to edit each palette entry, color and alpha level. It might be an interesting complementary tool for this format.
Note on IrfanView support: if it handles PNG8 correctly for transparency, it doesn't handle gamma information in PNG files: on the toucan image or the ping-pong image, I had to apply a gamma of 2.4 to get similar (lighter) colors.
Note also that IrfanView does an awful job of converting 32-bit PNG images to 256, allowing only one transparent color, which looks bad if full color was dithered!
I see that the GIMP manual states: "his “PNG8” format, like GIF, uses only one bit for transparency; only two transparency levels are possible, transparent or opaque. "
while the ISO/W3C standard states:
"The tRNS chunk specifies either alpha values that are associated with palette entries (for indexed-colour images) or a single transparent colour (for greyscale and truecolour images).". The PNG specification 1.2 added: "Although simple transparency is not as elegant as the full alpha channel, it requires less storage space and is sufficient for many common cases."
It looks like the unique transparent color is more implemented than the full transparency palette, alas. At least browsers get it right.
It depends on what exactly your original images look like.
If your images already contain 256 or fewer colors (RGBA values), you need only look at pngout (Windows) (Linux/BSD/Mac OS X ports), which you should already be using to optimize your PNG images anyway. It can't quantize images, but it can save them as 8-bit, including alpha transparency. Just pass in the /c3 (or -c3 on Linux et al.) color option to force it to save the image as PNG8.
If your images do contain more than 256 colors, you have a few more, but all less than perfect options:
Adobe Fireworks is probably the best option in terms of the resulting image quality. It will do the job if you only need to convert a few images, or if you don't mind relying on Fireworks to do the batch processing. I did find that it sometimes somehow limits the number of colors in the palette, creating a worse quality image than necessary. I don't know if that's perhaps a bug in CS3 that's been fixed in CS4.
If you're not on Windows or OS X this obviously isn't an option, and buying Fireworks just for this probably isn't worth it either.
The only alternatives I know of are the already mentioned pngquant and pngnq. I've had better luck with pngnq, but that's probably just going to depend on which quantization strategy works best on the files you're working with.
Unfortunately, I've noticed that neither of them work very well with small amounts of transparency (say, an opaque image with transparent, rounded corners).
I recommend "The GIMP" as it is possible to output in PNG8 and supports Linux/Windows. If you want a quick Windows-only solution, I also recommend IrfanView.
Microsoft Windows: Ultimate Paint (freeware and shareware
versions are available).
Both versions can save as an 8 bit transparent PNG image.
It can also save as a 4 bit PNG (16 colours). This cuts the
file size in half compared to 8 bit.
Input formats include BMP, GIF, ICO, JPG/JPEG and PNG.
The freeware edition of Ultimate Paint Standard 2.88 LE can
be downloaded directly from
http://www.ultimatepaint.com/up.zip (1.7 MB).