Transparent image background

[Quinnie11]

I'm pretty sure this isn't possable but I just want to check, is there anyway of saving transparency into an image? For example I'm currently designing a site for a t-shirt company and I want the images of the t-shirts to be "t-shirt shaped". Basically I want the background image on the site to be all round the shirt, not the shirt in a white rectangle and the background image around that.

[Xtazy]

i didn't understand pretty well but if you refer to the opacity of an image, photoshop is the solution...

[reportingsjr]

You will have to use a lot of divs or something and use positioning to put the around the t-shirt as a kind of wall. Just try to image the divs as little blocks or something, then stick them either on or around the t-shirt.

[miles5150]

HI,This is actually very easy.Yes your image will be saved in a rectangular size but you need to save it as a gif or png image. These support transparency ( I think you want gif89a "cant be arsed to double check sorry.). You can do your image/picture of your chosen T-shirt on a single colour background and then in a good photo editing suite (ie photoshop) you can make the background colour transparent.This means no matter where you place it on a web page the background will not be seen, it really will be transparent.Best wishesJustinMaster CIW Designer.

[Quinnie11]

Mate, you're a legend. You've completely managed to solve my problem and in the process have changed the design of my site! I had come to the conclusion I'd have to use a single colour as the background then put that colour around the shirt image using paintshop, which is why my site currently uses images using this technique. Now I'm going to give in to my client's original thought and use a paint shop pro texture as a background.Anyone interested the url is www.ulteriormotifclothing.co.uk I haven't changed the images yet though, too much other site maintainence to do first.TQ

[PrateekSaxena]

You can also try using IrfaView .. it is an open source software for the same ...google it

[justsomeguy]

Also, just so you know, if you happen to save the image as a 24-bit PNG with alpha transparency, which looks great, IE6 and earlier will totally screw it up unless you include some Javascript to force IE to render the alpha transparency correctly. I think if you use an 8-bit PNG with a 1-bit transparency IE will still show it correctly, but that format is about the exact same thing as a GIF. With a GIF or any other 1-bit transparency, pixels are either fully transparent or fully opaque. With alpha transparency, you can get 255 levels of transparency, so a pixel can be 50% transparent, you can have the edges fade out, etc. GIF and 8bit PNG do not support that type of transparency, and IE versions before IE7 will not show it correctly without help.

[LifeInBinary]

Also, just so you know, if you happen to save the image as a 24-bit PNG with alpha transparency, which looks great, IE6 and earlier will totally screw it up unless you include some Javascript to force IE to render the alpha transparency correctly. I think if you use an 8-bit PNG with a 1-bit transparency IE will still show it correctly, but that format is about the exact same thing as a GIF. With a GIF or any other 1-bit transparency, pixels are either fully transparent or fully opaque. With alpha transparency, you can get 255 levels of transparency, so a pixel can be 50% transparent, you can have the edges fade out, etc. GIF and 8bit PNG do not support that type of transparency, and IE versions before IE7 will not show it correctly without help.

Good info, justsomeguy, that actually helped me a lot. I have been toying around with transparencies and .png images myself lately.I have been wandering what the difference is between index and alpha?Also, is there a way to make an image transparent but still retain 100% of the original quality? If not, what is the highest quality format that can achieve transparency?Sorry to intrude on your post *TQ*, but this might help you also.Thanks,LifeInBinary.

[croatiankid]

you can layer GIFs so you have much more than 256 colors, of which any number of them can be transparent.

[roondog]

Sorry to go a bit off topic but on the site it would be nice to see the new t-shirt when you change its colour. I like the kate and pete one but don't want it in white. I'm sure this links to your image problem somehow.

[LifeInBinary]

you can layer GIFs so you have much more than 256 colors, of which any number of them can be transparent.

How would you do that? Could you pm me about that?Thanks,LifeInBinary.

[justsomeguy]

Also, is there a way to make an image transparent but still retain 100% of the original quality?

Yes, there is. Image compression comes in two flavors, lossless and lossy. A great example of lossy compression is the JPEG format. Lossy means that if you decompress the compressed version, you do not end up with the original, some information gets lost during compression. This is the reason why highly compressed jpeg images look blocky. The way jpeg compression works is that it uses pixel blocks, such as 8x8 blocks of pixels, and saves the full color information for one of the pixels, such as the upper-left pixel in each block. The other 63 (or however many) pixels in that block are saved as the difference between that pixel and the "reference" pixel. So, if you have a block that has dramatic color changes between the reference pixel and the rest of the pixels, the saved information is not enough to capture the difference and you get blocks of pixels that look smudged or blurry. You can see a good example of that on this page:http://photo.net/learn/jpeg/If you scroll down about 25% of the way, you'll see some images with 9 pictures side-by-side showing various levels of jpeg compression. You can see how the last, most compressed, image looks blocky and blurry in comparison with the original. Jpeg compression works great for images that do not have a lot of color variation, but the more detailed the image is, the more blocky the compressed version will look. The JPEG format also does not support transparency of any kind.GIF compression is an example of lossless compression, but it has limits. A GIF image can look exactly the same as the original, but only if the original has fewer then 256 unique colors. GIF images are palette-based, where each image has a 256-color (8-bit) palette, and then instead of storing the full red/blue/green info for each pixel, each pixel is an 8-bit number corresponding to the palette entry for that pixel. So this works great, as long as your image is an 8-bit or 256-color image. If you try to save a very colorful image as a GIF image, you will see that a lot of the color differences get lost, pixels just snap to the closest palette entry. So a picture with 10 million unique colors all of a sudden looks much less colorful. The GIF format supports 1-bit transparency (100% transparent or 100% opaque).PNG images are also lossless, and they support transparency. There are 8-bit and 24-bit PNGs. 8-bit PNGs work much the same as GIF images, they are palette-based. 24-bit PNG images have 8 bits for each of the red, blue, and green channels, plus another 8 for the transparency. I'm not sure of the technical background with the PNG format, so I'm not sure how the compression works, but you can't change the compression level like you can with JPEG images. A 24-bit PNG image is a specific format, where with JPEG you can say if it is using 90% compression, or 50% or whatever. PNGs are just PNGs, but they are lossless. Saving an image as a 24-bit PNG image will look exactly the same as the original. You can decompress and compress it over and over with no degradation of quality. 8-bit PNG images support 1-bit transparency, and 24-bit PNGs support 8-bit alpha transparency.People use lossy compression like JPEGs because you can get away with it. Even though a particular image might be only 90% accurate to the original, to the human eye they will look substantially identical, at least enough to justify the compression. There is no one-shot solution that works for all cases. Sometimes a GIF image is the smallest, sometimes a highly compressed JPEG will be smaller and still look good enough to use, and sometimes a PNG will be smallest. It depends a lot on the size of the image and the content of it. It is best to use a program like Photoshop or Paint Shop Pro that lets you have a 2-up or 4-up view where you can see the original image, plus one or more versions in different formats with different compression. In Photoshop, you get this view by going to File -> Save For Web. It's worth it to optimize a banner image or something to get it in the smallest format and still have it look good. If you get 1000 page views per month and save 5k on the size for an image, that image itself will save 50kb of bandwidth per month. Not a lot, but you get the idea. It adds up.

[LifeInBinary]

...Saving an image as a 24-bit PNG image will look exactly the same as the original...

Thank you sooo much justsomeguy - that is some very helpful info.I was just curious... You sound like a Photoshop guy, so you might not know this, but maybe someone else will. I use Fireworks, and I can set transparency to a PNG8 image, but not for a PNG24... I guess I don't really even care about using Fireworks for this. I could make my images in Fireworks, then export the transparent ones with another program. Does anybody know of a small program (preferably free) that can export a transparent PNG24? I really don't want to install Photoshop just to do that - I also don't have the room on my hard drive...Thanks guys,LifeInBinary.

[justsomeguy]

I think you can do it in Fireworks, but you need to use an alpha mask to set up the transparency. Go to the Help for Fireworks and do a search for alpha mask to see some tutorials about how to work with them. It's a little bit complex compared to just defining transparent areas (because of the different levels of transparency), but once you get it down you can do it quickly.