We all know the theory behind GIF, JPG or PNG. When to use them or how to use them. But there is hardly any literature available of what happens when they are uploaded on to web. When you are working with ad banners you will have to often use photographic images and flat colors as a combination. If you save the files as JPG and upload them to web, the flat colors in the images in the web page get pixellated. Reverse thing happens when image is saved as GIF and uploaded to web. For long we faced this problem at http://www.upto75.com. Then on one fine day we just experimented with PNG format and the images are just working fine. The quality of images has gone up tremendously when seen in a web page. Earlier the quality of images was horrendous. I am not sure if this is common knowledge among the designer and web community. I felt it is worth to share this piece of information. Let me know if you too faced this problem and how did you solve it. Rama Raju http://www.upto75.com
png takes up more space and slow the page load time Properly optimized .jpg or .gif are the way to go... only time we use png is for transparency
@Upto75: I heard that PNG is a format to be used on the Web, but each time I try to use this format I find that image files are greater that the alternatives using GIF or JPG. Could you explain if there is any advantage in using PNG besides what you already said?
But we never faced a big problem in increase of file size. Lot of times we found them to be smaller than JPG.
PNG is great IF you know how to use it - and frankly it's not the be-all end-all solution since it's compression on 24 bit images can quite often be a total joke. I wouldn't brag about that given that your site is a whopping 365k after compression (and an ungodly 641k uncompressed - christ got enough javascript in there?!? of course 116k of markup for 10k of content says it all) in 45 files - as evidenced by the 30 seconds or so it's taking for the page to download when I'm on a 22mbps connection (or is it just your server is being choked out on transmitting and compressing that much stuff?) What you are calling pixelation, at least so far as jpegs are concerned, is called artifacting, the amount of artifacting being ENTIRELY controlled by how much compression you set on the image. When you have 276k of images, something is wrong - and when almost half of that is a single image that only measures 500x200, well - you need to rethink your encodings. http://www.upto75.com/images/uploadimages/juice_500x200_banner220090824112430.PNG That same offending image should be down around 50k as a 5% jpeg, which would have about the same amount of artifacting the original seems to already have http://www.cutcodedown.com/for_others/upTo75/images/juice_500x200_banner220090824112430.jpg or as a 8 bit .png at like 36k, which would have some dithering but not unacceptably so. Unless you are leaning in with yer eyeballs 3 inches from the display, you'd never notice it. http://www.cutcodedown.com/for_others/upTo75/images/juice_500x200_banner_8bit.PNG The 'flat' images - gah, those could really use some work. It's interesting that two of them are .gif, both of which would be more efficient as .png - this one for example: http://www.upto75.com/images/UP-to75_19.gif There are only five primary colors, sixteen shades is usually sufficient for edge dithering with another 16 colors for the shaded yellow "to" text - so there's little reason for that to use the entire 256 color palette. 96 colors would be overkill and shrink the bugger out of the file, especially as .png - let's see... yeah, I could do that as 5k http://www.cutcodedown.com/for_others/upTo75/images/UP-to75_19.png Take this one - http://www.upto75.com/images/uploadimages/vendor_logo_20090804145053Home-Center_logo_thumb.PNG There's maybe eight hues, but I'd double the formula because of the subtle background lines, so 128 colors is all that should really be needed there... resulting in a 2.7k file to the original's 8.9k. http://www.cutcodedown.com/for_others/upTo75/images/Home-Center_logo_thumb.PNG No one file format or encoding is automatically the best answer. It's about learning how the encoding works, setting the encoding levels, and learning how colorspace is handled. You're "Flat" color images for example don't use enough colors to warrant the 32 bit .png, so colorspace reduce them... My rule of thumb for images: truecolor photographs - jpeg hands down. Yes, it has artifacting, but unless you're eagle-eye with your nose stuck to the screen it's not noticeable if you turn the encoding down to 5% or less. 16 colors of more than 32K pixels or 17-256 color - PNG, no question. Provides the greatest compression of images that can fit into that color range. 16 colors or less at less than 32K pixels - GIF. When gif was created 16 colors was "What would you do with such a huge palette?" so it handles 16 color or less images better than most any image format so long as the pixel count is below a certain point. The encoder seems to lose efficiency when more than Transparencies, well... I try not to use alpha transparency as much as possible. It generally is more headache than it's worth and in general makes files larger than are practical. Palettized transparency can using techniques like 'close enough AA' deliver the same effects in 80% of cases, and in the handful of cases where it cannot I just don't use those visual effects - since a page is supposed to be about the content not the goofy graphics you hang around it. But of course, controlling things like color depth and encoding is generally outside the realm of what Photoshop or most other image softwares are designed to do - which is why I use Paint Shop Pro as it's 'options' under the 'save as' dialog are more robust than anything built into any other image editing software.
Thank you for information. I think too, for transparent text image I usually use in .png I think it's work better than .gif for IE7+, FF, Chrome, Safari, Opera.