A group about Web Design & Development. Ask and Learn everything related to web design and development.

Report article RSS Feed Comparison of 4 image file formats

A comparison of .bmp, .gif, .jpg, and .png image file types.

Posted by feillyne on Apr 28th, 2010
Basic Other.

Long story short:
.bmp: excellent quality, takes a lot of diskspace
.gif: the worst regular quality (of all 4 types), although the lightest one
.jpg: high quality, takes little diskspace
.png: high quality, takes less space than BMPs (and sometimes less diskspace than jpg's)

Formats supporting transparent backgrounds:
.png
.gif
PNGs are chosen as HQ images with transparent backgrounds or any transparent areas. (JPGs and BMPs don't support transparency.)

* * *

.bmp
Files in the .bmp format tend to take a huge amount of diskspace, but they are the best ones quality-wise.
Some of BMP types:
16 bits
R5 G6 B5
A1 R5 G5 B5
X1 R5 G5 B5 <- worse quality, takes less diskspace
24 bits
R8 G8 B8 <- the most common (normally used) one
32 bits
A8 R8 G8 B8
X8 R8 G8 B8

.gif
GIFs can be easily used as animated pictures, plus they support transparency. The problem is that almost all .gif's are worse than any of above filetypes.

.jpg
HQ and cheap. Warning, there is a HUGE quality loss when saving with MS Paint. You need to use Photoshop, GIMP, Paint.NET or any program supporting JPG quality levels to save them w/o losing any quality of pictures.

.png
Supports transparency, there is no quality loss when saving with e.g. Paint. Generally HQ pics. Takes a reasonable amount of diskspace, although a deal greater than jpg's.
PNGs can have different compression levels.

* * *

Illustrated

The picture that we'll examine:
100% JPG

.bmp (3,75MB - the regular one)
16 bits R5 G6 B5: 2,50MB
16 bits X1 R5 G5 B5: 2,50MB
24 bits R8 G8 B8: 3,75MB (the regular one)
32 bits X8 R8 G8 B8: 5,00MB

.gif: 443KB
GIF

.jpg

100% 446KB
100% JPG

90% 154KB
90% JPG

80% 101KB
80% JPG

70% 79,1KB
70% JPG

60% 65,2KB
60% JPG

50% 56,5KB
50% JPG

40% 48,5KB
40% JPG

30% 40,6KB
30% JPG

20% 30,7KB
20% JPG

10% 19,1KB
10% JPG

.png: 968KB
PNG (compression level: 9)


Take a careful look at enlarged pictures. You'll see the difference between 100/90% JPG and 80/70/60% JPG.

You can download these pics here:
Moddb.com

So the best one is 90% JPG, it doesn't show any loss of quality, and cuts the file weight of 100% JPG by about 65%.
You need to use better graphics editors than MS Paint to obtain the best results of file conversion (Photoshop, GIMP, Paint.NET, and so forth).

Post comment Comments
jjawinte
jjawinte Apr 28 2010, 2:55pm says:

Very informative Feillyne. Thanks for taking the time. :)

+2 votes     reply to comment
Vikestart
Vikestart Jul 8 2010, 9:02pm says:

Very good tutorial :) Be aware that no version of Internet Explorer supports transparent .PNGs properly ;)

+2 votes     reply to comment
Guest
Guest Oct 16 2014, 10:59am says:

This comment is currently awaiting admin approval, join now to view.

Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Established
Nov 13, 2007
Privacy
Public
Subscription
Open to all members
Contact
Send Message
Email
Members Only
Membership
Join this group
Group Watch
Track this group
Tutorial
Browse
Tutorials
Report Abuse
Report article
Related Groups
Inside the Page
Inside the Page Hobbies & Interests group with 54 members
Web devs & web game devs
Web devs & web game devs Hobbies & Interests group with 35 members