jpg and transparent backgrounds

Sam

I know this has been discussed before, but I need to ask this question again.

I have a client who wants to have about 30 product shots taken. He wants to use them on his web site, and in print. He states he won’t be printing any larger than 4”X6”.

He would also like to have the products extracted from the white background and put on a transparent background.

I have no problem doing any of this. My question is with the image format. While not a web guy at all, I believe all the photos used on web sites are jpg. The issue is, I can’t save an image in jpg and maintain the transparent background.

I can of course save the transparent background in tiff for printing.

Is there any way to provide the client with product on a transparent background for web use?

Is my only option to give him a jpg with a white background for web use, and a tiff file with a transparent background for print use? How do you deal with this issue?

Thanks for any insight you can provide.

Sam

ChrisJ

I don't believe JPGs offer transparency at all. GIFs do, but they have much more limited colors. PNGs do, but they are less supported in browsers.

AZsnapper

Web
Only options for web transparencies are either gif, or png. Gif is indexed color. Usualy not very good for photographic images. PNG is lossless, was supposed to be better than gif, but in my use, never really worked that well.

Another issue is how you'll use the image with the transparent background. The image needs to be transparent to a certain color, otherwise, you'll get somesort of odd looking halo effect, and/or jagged outlines.

So, I guess my qustion is how you'll be using these transparent images on his website - there may be other solutions you can use other than making the image transparent.

Sam wrote:

I know this has been discussed before, but I need to ask this question again.

I have a client who wants to have about 30 product shots taken. He wants to use them on his web site, and in print. He states he won’t be printing any larger than 4”X6”.

He would also like to have the products extracted from the white background and put on a transparent background.

I have no problem doing any of this. My question is with the image format. While not a web guy at all, I believe all the photos used on web sites are jpg. The issue is, I can’t save an image in jpg and maintain the transparent background.

I can of course save the transparent background in tiff for printing.

Is there any way to provide the client with product on a transparent background for web use?

Is my only option to give him a jpg with a white background for web use, and a tiff file with a transparent background for print use? How do you deal with this issue?

Thanks for any insight you can provide.

Sam

Malte

AZsnapper wrote:

...PNG is lossless, was supposed to be better than gif, but in my use, never really worked that well.

...The image needs to be transparent to a certain color, otherwise, you'll get somesort of odd looking halo effect, and/or jagged outlines.

I've had troubles with this too. What does it mean for an image to be transparent to a certain color?

Transparent GIF/PNG in IE:



Malte

LAB.rat

It's for the in-between colored pixels that the anti-aliasing produces. You define the bg color in the Save for Web Matte field.

I think that if all your edges are straight it will look good on all backgrounds if you set Matte to "none."

There are workarounds for all those browser problems, but they're a bit of a hassle and you'd have to look it up somewhere.

David_S85

GIF will work for all browsers but comes with a handicap -- it is limited to only 256 colors. You can selectively dither it with any good image editor and it might appear OK, but it isn't up to the 16M-color image quality JPEG or PNG can provide.

PNG use can get tricky. Not too many browsers support it completely, and those that don't won't deliver the transparent background. There are some complicated methods around the issue (Smugmug uses a script to display one shot on a page with a pseudo transparent background that can be adjusted for transparency percentage), and it even works in the now-ancient IE5 and 6. But its a bitch to get scripts like that tuned properly.

IE7 and FF both do PNG's well, but only about 20% of users run those.

LuckyBob

IE 5 & 6 are the only recent browsers which do not have full support for transparent PNGs, and in fairly recent history it's become fairly easy to work around the issue with a bit of code. Mind you these fixes only work with <img> tags, although from what you said about the PNG's usage it should work fine.

This page has a fairly simple solution: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
A non-developer overview of the usage of the above script (as it's written for CSS and JavaScript geeks):
1) Copy the code block near the middle of the page starting with "<public:component>" into a file in the document root of the webserver (or where ever you choose, the modifications I mention below assume it's in the main directory) called "pngbehavior.htc".
2) Create a 1x1px, transparent GIF image called "blank.gif" and copy it to the same directory as the .htc file above (document root unless you decide to change it).
3) Near the bottom of the page there's another code block starting with "<style type='text/css'>"; either add the contents within the <style> tags to the existing CSS code or copy that whole code block into the <head> section of the pages which will be displaying the transparent PNG images.

Personally, I'd make two minor modifications to the code above. In the .htc file, I'd change the line that says 'var blankSrc = "blank.gif";', adding a forward slash so it reads 'var blankSrc = "/blank.gif";'. Also, in the <style> block (or in your existing CSS files), I'd add in another forward slash before "pngbehavior.htc", just as above. These two minor modifications allow the script to work from any file within the site, not just files residing in the same folder as the script itself.


More detail on the subject: http://www.alistapart.com/articles/pngopacity/
PNG browser compatability: http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support