Azmeen posted an interesting topic on choosing the right images for your page that caught my attention. Since designing is one of my hobby, I’d like to post something in response to his post. I hope he don’t mind. 
There are three popular image format. JPG, GIF and PNG. Each format has it’s own weaknesses and strength.
Let me show you some example:
Format: JPG
Result: Distorted pixels (this is fugly!!!)
File size: 39.5KB
Format: GIF
Result: Gradient-like image
File size: 24.7KB
Format: PNG
Result: Beautiful, crispy image
File size: 78.5KB
Obviously, PNG format is the prettiest, non-distorted looking image for your blog/web. However, if you noticed, PNG format is also the biggest file size compared to the JPG and GIF.
Remember: large size image slows down the loading time of a page.
It also takes a lot of image hosting space and bandwidth (for the famous blog).
So which format should you go for?
Fast loading ugly image or a slow loading pretty image?
I’d go for a fast loading, pretty JPG image, because frankly speaking, I CANNOT STAND seeing distorted-pixel header. It’s like putting chillies on my eyes! (How could some web designer claim to be a “web designer” when the images on their designs are totally DISTORTED?! I really don’t understand..)
Check out the header image designed by one blog designer (who charges at least $30 per blog design):
Would you pay $30 to have this image for your blog header, or would you rather have a prettier one?
How to achieve a non-distorted JPG image?
Always save your file in a “web-safe” format.
In Photoshop: File > Save for Web & Devices and use this setting:
The result will be a pretty looking image with no distorted pixels, like this:
And the result of the header?
Format: JPG
Result: Pretty, pretty, WOW!
File size: 73.7KB
So what do you think?
Are you going for a fast loading ugly header or a slower loading prettier one? Your choice really.
12 Responses so far
said
on 10.03.07 @ 10:54 pm
Hi! Those are really good tips, nice article! I really enjoyed reading it. I’ll be checking your site more often
Limitless
said
on 10.03.07 @ 11:21 pm
owhhh.. now i knowww.. thanks for the info!!
said
on 10.04.07 @ 12:21 am
Cindy: Eiii.. bukan terer ni. Saya budak baru belajar juga.. self-taught that is.
said
on 10.04.07 @ 12:46 am
Agree.. I really cannot stand distorted pic quality.. mcm kurap da! Usually I go for both .jpg and .png, depending very much on the pic size , done some unsharp mask on photoshop first then go for save for web will be better result.
Ya la! Terer lah c cindy nih! aku ingat aku satu urang ja terer.. He! He!
said
on 10.04.07 @ 1:10 am
Oh…like that…
said
on 10.04.07 @ 6:56 am
i dun mind if the image turn out pretty XD
medium fast pretty image XD kekekeke
said
on 10.04.07 @ 8:06 am
Cindy…your ‘offer’ still on kah?
Cindy: Sure, any color in particular? Bila sia free, I’ll see what I can do, kio?
said
on 10.04.07 @ 11:17 am
Thanks for the elaboration Cindy, mucho appreciatas!
However, I noticed that PNGs would be smaller if the image is of limited colours, like logos and emblems.
However, IE renders PNG slightly off-coloured when compared to other browsers.
said
on 10.04.07 @ 1:14 pm
i go for medium.. something still friendly for friends on 56K.
said
on 10.04.07 @ 4:06 pm
Cool tips Cindy, I’m more of a fast loading image person myself. I can’t stand slow loads and besides sometimes the monitors (or browsers) we use and what the viewers use are totally different so one really cannot be assured of a wysiwyg image. But I have to agree with you, I hate distorted images!!!!!
said
on 10.05.07 @ 12:00 am
Great tips! Will take note of that.
$30 for that distorted image! Alamak!
said
on 10.05.07 @ 6:01 pm
good education programme there. the other aspect is limit the number of blog posting to as little as yrs but yet cld upload max pictures so that downloading of blog wont be affected
Feel like saying something? Say lah.. :P