How to choose between image formats.

How to choose Right Image Format for your sites.

Sometimes people just don't care what format their images are. They try too much to optimize their site but just forget the basics of image formats. So choosing the appropriate web-based format for your images is the first step towards optimized web graphics. Mostly there are two kind of image formats used. They are GIF's And JPEG's, PNG format is not used as widely as much as Gif's and JPEG's. So we will skip PNG here.

Now let me give you some base tips first.

1) If your image is small in dimensions and uses less colors then GIF is the best option.

2) If your image is say more than 100x100 then Go with JPEG

3) Your image is a landscape or wallpaper cutting then use JPEG don't even think about GIF here.

4) Experiment new things. Try exporting the images in both format and then check the results. It will only take 10 minutes but it will stay there for a lifetime of your site.

Benchmark Test: You won't believe it but I was also using GIF for all my images as it was exported from Photoshop. First month my Bandwidth exceeded to 12 GB. It is too huge for a small site like mine.

My Host rewarded me with a 3-dollar fine per extra GB of bandwidth that my site used.

Also he told me to go someplace else rather then hosting my site on his little shared server. I was using a starter plan and I had no idea of upgrading it for next one year. Upgrading my plan would also cost me an extra $120 per year. I could save that and use it for advertisements for my site. Nice idea, what do you think?

Okay again at optimizations.

In general, palette-based or index-color formats like GIF or PNG are best for flat-color art like buttons, logos, or cartoons. For smooth-toned images like photographs JPEGs are usually the best choice.

Here is an example from my site:

GIF - 19.3 KB

____________________________________________________


JPEG - 7.6 KB


So I think now you would get an idea of what kind of mistake I was making over there.

This is just one image and that also I have just changed the format not even applied the optimizations.

Other Month my Bandwidth usage was 5.8 GB compared to 12 GB for previous month. Even when I was getting more visitors this month than the previous one.

So my little shared server was able to fulfill all the requests that were coming to it.

And Users were also happy with lightning fast surfing at my site.

Written By: Admin of http://www.Ruuz.com Which is me

And sorry if I missed anything. Just trying to give a general idea to fellow webmasters so that they save bandwidth and even their visitors can enjoy speedy surfing on the sites.

 

Good points there. But I would have thought people would automatically save it as a JPG anyway, it seems the best option all round.

 

wow, thanks a lot. I have wondered for ages about which format was better,

Ricky

 

I've been in the business of image editing for quite sometime. For the keen eye, the jpeg may look ok but it lost the details. The Peg may have been saved on a lower quality, compressing the pixels to distort while the Gif file may have either be saved under 128 colors or higher to get that quality.

gif = web elements (borders, cartoon images, vectors)
jpeg = photos for use for web

Regardless of size or resolution, the age of the internet has grown up already. We used to have a webpage with 16kb filesize under a 32colors compression in gif format. But today, we still use gif but with a higher matting of 64 colors since loading a 50kb website is not a problem anymore for most people.

Quality versus Quantity. I would go for quality to satisfy my clients. Pay a higher hosting bandwidth to accomodate my needs. If you choose quantity, then you compromise quality.

 

I am not giving any advice to lose quality.

Plus if you maintain your qulaity then the visitor is not going to wait for more then 15 seconds to load that page. Maximum someone will wait is 30 seconds.

And only you might be seeing your own quality.

 

Quality versus Integrity now? Can't sell something you're not impressed with and bet your career, correct?

I maintain my quality to attract the type of people I want to love my work. Proper use of image may be a good highlight at some point. But that's another story.

Did you optimize the images on your example? Not to start a debate, just my two cents.

 

By the way, I never said that your tut was negative or anything.

 

No probs friend. No offense taken here.

I know that some niche might need the quality. But I was generally talking about webmasters who have 50 or so sites running and that can waste enough money that it might be noticable.

Thanks a lot for your comments.

 

Why skipping it? There are only few things that must be said about it. Use PNG instead of GIF for web elements, PNGs are generally smaller, the only exceptions to this rule is when the element in question is animated or transparency comes into play, and then it gets complicated because IE doesn't support PNG24 alpha transparency. But for generic web elements PNG is the one you should use.

Now for PNG24 vs JPG, JPG is a lossy format, meaning it will not keep all the colour information intact, whereas PNG24 is a lossless format so all the colour information is still there, this though means that PNG24 images are quite a bit bigger than JPGs. So if you want quality, you go with PNG24, but be ready to take quite a speed hit, if quality isn't top priority(JPGs don't look that bad) or if speed is top priority then go with JPGs.

 

very well written for sure, proper graphics implementation could be crucial for bandwidth usage, ultimately saving hosting costs.

 

crazybjorn, the new IE7 seems to support PNG24 alpha transparencies, but it still will take some time for IE6 to fully die down. Atleast an year more.

 

I know it does, hence why my personal portfolio site doesn't revert to GIFs for IE7, only for IE6 and lower. I just hope they fixed that colour rendering issue as well, I really should get around to installing IE7 on one of my PCs for proper testing.

 

I must say that the above documentation is very apt.

I use the follow. techniques...

1. Small images - GIF
2. LARGE images (>100kb) - JPG
3. For bring the images from the developers terminal to my terminal - PNG

(DOn't know where else to use PNG)

 

See Post #9, PNG-8 can/should be used instead of GIFs in most cases, and PNG-24 should be used instead of JPGs when you want no loss of colour information to happen.