Although CSS can do lot’s of stuff by itself, it also relies a lot on images. Websites without bullets, icons and backgrounds aren’t that lovely to see.
When we slice and dice our designs in order to create a website, optimizing the images is a key factor when we are focusing in our site’s response time.
Be clever with image file formats and you’ll go a step further in optimizing your site.
The image file types
In web, there are three image file types we can use:
- .gif (Graphic interchange format)
- .jpg (Joint photographic experts group)
- .png (Portable network graphics)
.GIF
Gif are lighter compared to jpgs or pngs.
This file type is great for:
- Solid colors
- Simple and small icons
- Typography
- Basic transparency (Simple shapes over a solid color)
.JPG
In my opinion .jpg files need at least a 80% quality to look good in web. More quality means really more weight, so be careful.
This file type is great for:
- Photographs
- Simple gradients
Why only simple gradients? Because the .jpg files with complex gradients start too look blurry and with low definition.
.PNG
There are three types of pngs: 8, 24 and 32 bits. More number = more quality.
Personally I find that 8 bit has extremely poor quality. I also find the weight difference between 24 and 32 bits very slim, but with a significant difference in quality.
Due to all this, I commonly use 32 bit .pngs
This file type is great for:
- High detailed icons and illustrations
- Complex gradients
- Great fidelity in transparency (24 or 32 bits)
IE6 and transparent PNGs
IE6 doesn’t support png transparency. The transparency in the browser is replaced with a light blue background instead.
There are many techniques to fix this, and they are usually related with javascript.
An example of this kind of fix is the Unit PNG Fix.
There are lot of others out there. Each one has it’s pros and cons. Google ‘png fix’ and try them out. I still haven’t found THE BEST one.
About the images in this post
The little icons are a part of the Diagona Pack by Pinvoke.
The beautiful colored field is a great photograph by Allard One in Flickr.
The cool sweet icons belong to Kluke from Deviantart.
Final Thoughts
I hope this post helps you understand that you can choose different file types depending on the case and that each one has it’s strengths. Not everything needs to be .png! Especially if you are interested in optimizing your file’s size/weight.
“Personally I find that 8 bit sucks because it’s quality is extremely poor and doesn’t support transparency.”
That’s not true.
In facts, PNG file format support in 8 bits support index and alpha transparency. The problem is that no every browser supports this capability yet.
And, in the other side 8 bits PNGs are almost equal in weight than a GIF.
Little glitch there. Thanks for the correction.
The weight chart was taking into consideration 24/32 bits pngs. I corrected that as well.
8 bits pngs have nearly the same quality of a gif image, personally I don’t think they are worth using.
You’re wrong. First 8bit png is smaller in the most cases, especially when it comes to larger sprites. Second 8bit png can also handle alpha transparency (http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/), so in many cases you save much overhead using 8bit png also for transparent images.
I always use PNG’s, ’cause they combine the advantages of JPG & GIF: 16 mio. colors, transparency and well compressed!
Does anyone know a good tutorial or guidelines for the use of the UNIT png fix. I find it breaks my layouts for some reason in IE6.
Great article. I have a question though.
I recently was working on a project with sprites in main navigation. Because of the complexity of the layout I had to use transparency and apply a FIX for IE6 but it messes up the background positioning so that my navigation doesn’t work in IE6 e.g. entire site is useless in IE6.
Is there any cure to that problem?
I actually don’t use png fix for that reason. What I do, is replace the sprite image for IE6. Open your .png sprite and export it as a .gif.
Then add this line for IE6 in your stylesheet:
* html .sprite {background-image:url();}
IE6 will keep all the positions, but the image will be a .gif. There will be a little quality loss, but well, it’s the browser’s deficiency.
Ever heard of DD_belatedPNG? It’s the best png fix around. No more background position problems.
http://www.dillerdesign.com/experiment/DD_belatedPNG/
Yeah, this is the best solution for IE headache. But now work well in IE8, am i right? Because i’m only using IEtester
http://www.my-debugbar.com/wiki/IETester/HomePage
Yeah. Png transparency works from IE7+
Your information is a bit misleading. You can get great looking JPGs at around 40-50% compression, and PNGs , when processed correctly, can be smaller than GIFs.
Check out my post about opmtimizing PNGs:
http://www.friskdesign.com/2008/03/19/optimizing-png-for-the-web/
Why is this comment box so darn small?
I wonder if you actually read the post. The scales are related with 80% jpgs, and 24 and 32 bits pngs…
Does anyone know of a tutorial for saving gif in PS
I find it a tricky thing to do becoz when i am doing a dark background website, gif transparent images have a white margin around the image (for instance, some on a dark background and you want the text as an image) , if u know what I mean.
I know there is something to do with the gif differ option, but I never get that right
I have found that PNGs can compete favorably with GIFs and JPGs at the low end of the file size spectrum. For the most part, unless the GIF is just dramatically different in size, I will usually stick with PNG and JPG only.
So many things wrong with this post.
1) Like others have said 8-bit PNGs beat out GIFs in smaller file size. I never use GIFs anymore.
2) The quality of an 8-bit PNG is wonderful if it’s an image that can stand 8-bit quality (256 colors). Which means, yeah, the quality is going to suck if you try to save a photo as an 8-bit PNG, but it would suck just as much as a GIF which is also 8-bit.
3) PNG-24 does support alpha transparency. Where’ve you been?
4) Most photos can be encoded as JPGs with 51% quality and still look nearly identical (surprisingly there’s a *world* of difference between 50% and 51%). 60% would satisfy even the biggest quality nuts. 80% is just excessive, and you’re lying to yourself if you thinks there’s that much of a difference between 60% and 80% to warrant the exponential increase in size.
5) PNG-24+ should only be used for alpha transparency. It’s file size is much larger than a comparable quality JPG, so a JPG should be used unless you need the transparency.
I decided to remove the weight chart because it’s really controversial. It deeply depends on how you export the images.
Agree with Jonnotie.
DD_BelatedPNG FTW! Really, the best ever. No need for blank.gif and stuff like that. Love it, and use it all the time.
http://www.dillerdesign.com/experiment/DD_belatedPNG/
Another thing that should be noted about PNGs is that the color doesn’t match up exactly in IE7 with its hex color, which can screw up some layouts.
Smashingmagazine has a great article about “Clever PNG Optimization Techniques”. I learned some new bits and pieces and I recommend reading it
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
your post is helpful and informative
great post!
I normally use .gif 256 colours – but I never tried to use png32!
based on your post … I´d use this … depending on the situation…
thanks for your tips : )
I’ve noticed that pngs seem to be much larger in size than jpgs. Although, I rarely consider using gifs for anything other than necessary small animations like ajax loading icons.
Smashingmagazine has a great article about “Clever PNG Optimization Techniques”. I learned some new bits and pieces and I recommend reading it
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/