Search on Super User… Log In Sign Up

Questions Tags Users Badges Unanswered Ask Question

JPEG vs PNG vs BMP vs GIF vs SVG

I would like to know which one of these formats requires less memory for the same quality of the asked 8 years, 6 months ago
picture, and what are the main differences between these formats.
viewed 103,723 times
38
images jpeg png svg bmp active 9 months ago

share improve this question edited Oct 29 '15 at 11:23 asked Oct 10 '09 at 9:36
Django Reinhardt Narek Linked
2,988 8 42 78 599 5 15 29
20
15 Is there still any reason to prefer GIF over
PNG when creating images for web pages?
15 Btw, JPG and JPEG both refer to the same thing (see e.g. en.wikipedia.org/wiki/JPEG) so the title could be
simplified a little. – Jonik Oct 10 '09 at 10:22 2 How do I avoid my picture gets too blurry
when compressed?
1 Not sure how my answer doesn't answer your original question, and how your chosen answer does...? :-/ –
Django Reinhardt Dec 11 '11 at 21:26
4 Automating the choice between JPEG and
3 > which one of these formats requires less memory Um, define “less memory”. Do you mean it takes up PNG with a script
less disk space? (JPEG for photos, PNG and/or GIF for screenshots.) Do you mean the compressed file takes
less space in memory? (Same as disk space.) Do you mean the decoded image takes less space in memory Related
(None; they are all essentially the same when decoded to raw.) – Synetech Feb 17 '12 at 3:52
1 SVG to JPEG/BMP conversion
add a comment
10 Is there any quality difference between
8 Answers active oldest votes
PNG vs BMP image formats?

2 Vector graphics formats: SVG , EPS or

PDF
From What is the difference between TIFF, GIF, JPG, JPEG, PNG, and a BMP file? 8 Progressive JPEG quality compare to
normal JPEG?
BMP - Bitmap. This was probably the first type of digital image format that I can remember. Every
50 Automating the choice between JPEG and
picture on a computer seemed those days to be a BMP. In Windows XP the Paint program saves its 4
images automatically in BMP. However, in Windows Vista and later images are now saved to JPEG. PNG with a script
BMP is the basis platform for many other file types. 20 What is the largest size of a 640x480
JPEG?
JPG / JPEG - (Joint Photographic Experts Group) Jpeg format is used for color photographs, or any
pictures with many blends or gradients. It is not good with sharp edges and tends to blur them a bit 0 SVG exported to EMF loses precision, but
unless stored at high quality. This format became popular with the invention of the digital camera. exported as PNG looks fine
Most, if not all, digital cameras download photos to your computer as a Jpeg file. Obviously the JPEG images are pixelated on browsers
1
digital camera manufacturers see the value in high quality images that ultimately take up less space. (websites)

GIF - (Graphics Interchange Format) Gif format is best used for text, line drawings, screenshots, 3 PNG or JPEG for an X-Ray without visible
cartoons, and animations. Gif is limited to a total number of 256 colors or less, so Gif images are artifacts
relatively small. It is commonly used for fast loading web pages. It also makes a great banner or logo
2 Is it possible to convert JPEG to a lossless
for your web-page. Animated pictures can also be saved in GIF format as a sequence of static format and convert it back without losing
images. For example, a flashing banner would be saved as a Gif file. quality?

PNG - (Portable Networks Graphic) This lossless formats is one of the best image formats. It was
Hot Network Questions
not always compatible with all web browsers or image software, but nowadays it is the best image
format to use for website. I use .png for logos and screenshots. One of its most astonishing abilities Why is t-SNE not used as a dimensionality
is being able to compress images losslessly (without loss of pixels), although the final compressed reduction technique for clustering or classification?
size varies between image editors. Why do the pyramids show less erosion than the
Sphinx?
TIFF - (Tagged Image File Format) This file format has not been updated since 1992 and is now
Why does an aircraft take off earlier than the
owned by Adobe. It can store an image and data (tags) in the one file. TIFF can be compressed, but
planned departure time?
it is rather its ability to store image data in a lossless format that makes a TIFF file a useful image
archive, because unlike standard JPEG files, a TIFF file using lossless compression (or none) may Why were early computers named "Mark"?
be edited and re-saved without losing image quality. This file is commonly used for scanning, faxing, Is D&D a suitable tool for fleshing out my own
word processing, and so on. It is no longer a common file format to use with your digital photos, as fictional world?
jpeg is great quality and takes up less space. Using Special Pleading to invalidate first-cause
argument regarding existence of God
share improve this answer edited Nov 20 '15 at 21:10 answered Oct 10 '09 at 9:46
What is "pendant natural" in this UN report?
harrymc
224k 8 223 488 Should I prepare new homework exercises each
year, 20% of the final grade is homework?

1 Be aware that without a "hack" of sorts, IE6 still does not support alpha transparency in PNG files i.e. areas of Saying for "Bomb proof"
transparency that are semi opaque – Josh Comley Oct 15 '09 at 11:53
Is this integral possible to evaluate?
2 ...and a surprising amount of people still use IE6 (tinyurl.com/56kp). And MS want to support it until 2014! :(
Remove characters to right of first space in Bash
(tinyurl.com/qvdyn5) – Josh Comley Oct 15 '09 at 12:05
How can I be more persuasive when assuring
9 BMP: This is not the basis for other file formats. As far as I know the BMP header and file structure are not people that I am perfectly fine and healthy?
shared with other formats (contrary to TIFF, for example). JPEG: It was created and existed on the web way
before digital cameras became prevalent. Also many digital cameras allow for saving a "raw" format which Why do we use trig functions in Fourier
usually is a TIFF, albeit with vendor-specific contents. GIF: Not restricted to 256 colors per image, only to 256 transforms, and not other periodic functions?
colors per frame (see en.wikipedia.org/wiki/Graphics_Interchange_Format#True_color). – Joey Oct 18 '09 at How to control DifferenceOrder in NDEigenvalue
20:57 for an ODE?

4 TIFF: The prevalent file and container format for raw images from digital cameras (the non-point-and-shoot How can you disbelieve in god?
ones). TIFF allows for nearly arbitrary data (hence tagged) in it which also means that it supports arbitrary
compression methods from LZW (GIF), LZ77 (PNG) to JPEG and others. Also TIFF allows for multiple images Finding the first N roots of transcendental equation
(pages) in one file. – Joey Oct 18 '09 at 21:01
How can I give out my telephone number to my
4 While the answer is good at answering the difference of the picture formats in terms of history and general neighbors without implying anything?
usage, the original answer asked about relative sizes and quality too... – camster342 Jun 13 '11 at 11:26 How much movement is needed to climb up a
spiral staircase?
show 12 more comments
Does C++11, 14, 17 or 20 introduce a standard
constant for pi?

If you're overwhelmed at work, how do you choose

In xkcd style from lbrandy.com: what takes precedence?

Why did Lucius interrupt Bruce during their

72 Sonar/Submarine discussion?

Can someone decide to be hit?

If a logo implies movement, should that movement

be mirrored to match the movement of a vehicle
+50
it's placed on?

What can I do to get models to take my small

camera more seriously?

question feed

share improve this answer edited Jan 17 '12 at 16:19 answered Oct 15 '09 at 11:16
music2myear Robert MacLean
27.3k 5 51 91 1,356 1 14 27

4 Illustrates the point nicely :) (even if I've never seen anyone advocate such 'Always JPEG!' policy) – Jonik Oct
15 '09 at 11:47

6 +1 Since this picture illustrates the jpeg problem so well... – Johan Oct 15 '09 at 11:53

4 I wish I could double upvote! I send this to everybody who sends me crappy jpegs! – Tim Büthe Oct 15 '09 at
12:00

3 © 2008 Louis Brandy. All Rights Reserved....? – Arjan Oct 15 '09 at 12:29

2 Facebook has for example this 'Always JPEG' policy. I upload a nice 99 KB lossless PNG image and Facebook
converts it to an ugly 175 KB JPEG. – Paul Aug 27 '14 at 11:37

show 6 more comments

You should be aware of a few key factors...

First, there are two types of compression: Lossless and Lossy.

58
Lossless means that the image is made smaller, but at no detriment to the quality.
Lossy means the image is made (even) smaller, but at a detriment to the quality. If you saved
an image in a Lossy format over and over, the image quality would get progressively worse and
worse.

There are also different colour depths (palettes): Indexed color and Direct color.

Indexed means that the image can only store a limited number of colours (usually 256),
controlled by the author, in something called a Color Map
Direct means that you can store many thousands of colours that have not been directly chosen
by the author

BMP - Lossless / Indexed and Direct

This is an old format. It is Lossless (no image data is lost on save) but there's also little to no
compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of
both Indexed and Direct, but that's a small consolation. The file sizes are so unnecessarily large that
nobody ever really uses this format.

Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.

GIF - Lossless / Indexed only

GIF uses lossless compression, meaning that you can save the image over and over and never lose
any data. The file sizes are much smaller than BMP, because good compression is actually used,
but it can only store an Indexed palette. This means that for most use cases, there can only be a
maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.

GIF images can also be animated and have transparency.

Good for: Logos, line drawings, and other simple images that need to be small. Only really used for
websites.

JPEG - Lossy / Direct

JPEGs images were designed to make detailed photographic images as small as possible by
removing information that the human eye won't notice. As a result it's a Lossy format, and saving the
same file over and over will result in more data being lost over time. It has a palette of thousands of
colours and so is great for photographs, but the lossy compression means it's bad for logos and line
drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to
GIFs!

Good for: Photographs. Also, gradients.

PNG-8 - Lossless / Indexed

PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for
GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it
can, but only Firefox seems to support it, unlike GIF animation which is supported by every
browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important
software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8
can only store 256 colours, like GIFs.

Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha
Transparency.

Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you,
Photoshop!) There are ways to convert Photoshop PNG-24 to PNG-8 files while retaining their
transparency, though. One method is PNGQuant, another is to save your files with Fireworks.

PNG-24 - Lossless / Direct

PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours,
just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses
images, so it results in much smaller files. Unfortunately PNG-24 files will still be much bigger than
JPEGs, GIFs and PNG-8s, so you still need to consider if you really want to use one.

Even though PNG-24s allow thousands of colours while having compression, they are not intended
to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than
a equivalent JPEG image, with very little improvement in visible quality. (Of course, this may be a
desirable outcome if you're not concerned about filesize, and want to get the best quality image you
can.)

Just like PNG-8, PNG-24 supports alpha-transparency, too.

SVG - Lossless / Vector

A filetype that is currently growing in popularity is SVG, which is different than all the above in that
it's a vector file format (the above are all raster). This means that it's actually comprised of lines and
curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When
you zoom in on a raster image, you will see pixels.

For example:

This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at
different sizes.

Additionally, SVG files are written using XML, and so can be opened and edited in a text editor, that
it can be manipulated on the fly, if you wish. For example, you could use JavaScript to change the
colour of an SVG icon on a website much like you would some text (ie. no need for a second
image).

I hope that helps!

share improve this answer edited Apr 13 '17 at 12:33 answered Jun 13 '11 at 11:00
Community ♦ Django Reinhardt
1 2,988 8 42 78

Good illustration. Watch out for artifacts caused by compression. I think JPEG like video compression formats
has the problem where solid red zones will tend to "bleed" on the edges. – James P. Jun 13 '11 at 12:16

1 You're wrong about PNG not supporting animation. PNG can do it fine, most viewers and browsers don't
support it. en.wikipedia.org/wiki/APNG Firefox supports it pretty well, it seems.
people.mozilla.com/~dolske/apng/demo.html – Rob Jan 17 '12 at 17:19

1 @DjangoReinhardt I know you included an example in your answer, but as far as SVGs vs PNGs are
concerned, under what circumstances might we see a bigger SVG (in file size) vs a PNG? – Johannes Nov 4
'15 at 20:12

1 @Johannes Great question. There are some downsides to SVG, especially if they're particularly complicated
(or badly saved -- but that's the author's fault, not the file format's). I'll try and add something that answers this -
- although I suspect that an SVG will always be smaller (or equal in size) to a PNG. – Django Reinhardt Nov 5
'15 at 12:21

1 Another fun factoid: BMP files have a size similar to PNG if you zip them. – jiggunjer Dec 24 '15 at 4:29

show 4 more comments

The existing answers include very little technical data, so I'll include that here.

JPEG: up to 24-bit color (possibly more?), variable (usually high) compression, lossy, no alpha
27
support
PNG: up to 48-bit color, moderate compression, lossless, alpha support
BMP: up to 24-bit color, very little compression, lossless, alpha support
GIF: up to 8-bit color, little compression, lossless, transparency support, animation support

Color Depth

8-bit color == 256 colors

24-bit color == 16,777,216 colors
48-bit color == 281,474,976,710,656 colors

Most computer monitors run at 24-bit color depth. The human eye can distinguish about that many
colors. Additional color depth is mostly to be able to retain information from a sensor so that
manipulation of a photograph has more data to work with. Trying to represent a photograph in 8-bit
color is going to result in graininess.

Compression

This basically refers to how large the final file will be. More compression equals a smaller file.
However, JPEG attains small file sizes by throwing data away. This is referred to as "lossy"
compression, because you can never get the original uncompressed data back. Its compression is
also optimized for photographs where high-contrast edges are uncommon. As stated in other
answers, it's a bad choice for anything other than photographs.

Alpha/Transparency

Alpha refers to transparency, but it implies that there's more than one level of transparency. GIF has
the ability to define transparent pixels, but it's either opaque or 100% transparent, and "transparent"
gets used as one of the 256 colors. PNG and BMP have the ability to mark each pixel as opaque,
transparent, or partially transparent, like a piece of colored glass. Most commonly, there are 256
levels of transparency, though PNG can actually have up to 65,536 levels. JPEG has no support for
transparency.

Animation

Effectively, of these formats, only GIF has any support for animation. There are specifications for
animation with PNG (MNG, APNG) and JPEG (MJPEG), but they are not widely supported. (APNG
works in recent versions of Firefox and Opera.) In practice, most animations you see on web pages
are implemented in Flash.

share improve this answer edited Oct 10 '09 at 17:00 answered Oct 10 '09 at 15:31
wfaulk
4,942 4 27 44

APNG is gaining a lot of support. – Phoshi Oct 10 '09 at 16:37

Sure enough. I hadn't noticed. – wfaulk Oct 10 '09 at 17:00

Well, most modern browsers support it, but it's little known. IE8 doesn't support it, I don't think (but can read it as
PNG, so displays the first frame) – Phoshi Oct 10 '09 at 19:05

Great thought processing .. – InfantPro'Aravind' Dec 17 '09 at 4:18

add a comment

Use GIF if the image has few colors (like icons). Can also be used for animated images (like ad
banners).
24 Use JPG if the image has many colors (like photos). JPEG is the same thing.
Use BMP if you want to save the image without compression. Much larger filesize!
Use PNG if you want to publish the image on the web and be up-to-date on modern standards.
Pros: Suitable as modern replacement for both GIF and JPG, and is an open standard, and
allows transparency. Cons: Not supported by older software, and file size can be larger than
comparable GIF or JPG.

share improve this answer answered Oct 10 '09 at 9:44

Torben Gundtofte-Bruun
11.1k 30 86 125

3 +1 for practical considerations of when to use each. – Andrew Coleson Oct 10 '09 at 17:42

4 Be careful about using PNGs. As a lossless format, they're generally unsuited to photographs and the like, due
to file size. Definitely not a "modern replacement" for all purposes. Transcoding from JPG to PNG would be
really stupid. – Paul McMillan Oct 10 '09 at 18:47

@Paul - I agree, it's certainly not useful for all purposes and in particular not for photos, but when used for web
graphics it does replace JPG. – Torben Gundtofte-Bruun Oct 10 '09 at 22:40

2 I don't think there's ever a need for BPM nowadays. – Arjan Oct 15 '09 at 11:22

1 PNG is almost always smaller than GIF. It has superior compression scheme. When it's larger than same-
looking GIF, it's usually fault of lousy software (e.g. Photoshop before CS2). Use paletted (not 24-bit!) PNG and
fix them with PNG optimizer: imageoptim.pornel.net and you'll never want to waste bandwidth on GIFs again. –
Kornel Dec 27 '09 at 13:55

show 2 more comments

12

BMP:

Old format. No loss of data.

Not compressed - Stores value of each pixel. Hence pictures of the same dimensions have
same filesize (kilobytes/megabytes). E.g., 800×600 BMP images are always 1.37 MiB like the
popular WinXP wallpaper "Bliss" rolling hills.
Transparency/translucency not supported
Not recommended for anything

JPG:

Lossy compression.
Loss amount can be set, e.g., while creating a graphic & saving in Photoshop.
Saving as higher quality means less loss of colours/depth and high filesize, and vice versa.
Transparency/translucency not supported
Recommended for photographs, not for graphics/icons

PNG:

Lossless compression (yeah, best of both WORDS/worlds)

Supports transparency AND translucency, both are different
Recommended for static graphics/icons, not for photographs

GIF:

Supports transparency but not translucency

Recommended for ANIMATED graphics/icons only
Maybe the moving photographs in frames in Harry Potter are GIFs :D

share improve this answer edited Oct 17 '14 at 21:54 answered Jan 11 '13 at 6:09
Shumon Saha
412 2 10 28

1 Nice overview. But why is BMP marked as "lossless: false" in the table? In the text you state IMHO correctly
that BMP is indeed lossless. – mpy Oct 15 '14 at 18:46

@mpy, thank you! I have corrected the table. – Shumon Saha Oct 17 '14 at 21:55

2 I know this is an old thread, and thank you for the answer, but note that BMP is optionally compressed with a
very simplistic, lossless, RLE compression. – ysap Dec 17 '15 at 13:01

add a comment

BMP uses either raw bits with a small header, or Run-length Encoding. JPEG uses Discrete Cosine
Transform. See the block at the bottoms of the Wikipedia articles for other compression/encoding
4 algorithms.

share improve this answer answered Apr 13 '10 at 16:58

Ignacio Vazquez-Abrams
91.7k 6 140 200

Me likey the PCX. Way back when decide to learn assembler, for my first program, I wrote a PCX viewer. It was
quite educational. (I did not write a JPG viewer). :-D – Synetech Feb 17 '12 at 3:58

add a comment

Simple guid:

For photographs, use:

2
Camera-specific raw formats if you have professional equipment and want to do a lot of
post-processing
JPEG otherwise (for publishing photos on the web, you'll have to convert the raw formats to
JPEG as well)
For anything with sharp edges, fine lines and few colors (such as screenshots or logos) use:
GIF if you're doing a webpage that has to support very old browsers (IE 6 mainly), or if you
want to do simple animations
PNG otherwise
There is no good reason to use BMP, unless a specific program does not accept other formats.

share improve this answer answered Oct 15 '09 at 11:42

Michael Borgwardt
2,964 12 20

1 IE has supported PNG since some version 4.x (5 on Mac), but just not transparent PNG. – Arjan Oct 15 '09 at
11:49

1 IE6 actually even supports transparent PNG if it has GIF-like transparency. Only PNG with full alpha isn't
supported. – Kornel Dec 27 '09 at 13:51

1 Actually Alpha Transparency IS supported, provided it's an 8-bit PNG. Weird, but true. – Django Reinhardt Jun
13 '11 at 20:13

add a comment

Your Answer

Sign up or log in Post as a guest

Sign up using Google Name

Sign up using Facebook Email

required, but never shown

Sign up using Email and Password

Post Your Answer

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged images jpeg png svg bmp or
ask your own question.

SUPER USER COMPANY STACK EXCHANGE Blog Facebook Twitter LinkedIn

NETWORK
Tour Stack Overflow
Technology
Help Stack Overflow Business
Life / Arts
Chat Developer Jobs
Culture / Recreation
Contact About
Science
Feedback Press
Other
Mobile Legal site design / logo © 2018 Stack Exchange Inc; user
contributions licensed under cc by-sa 3.0 with attribution
Privacy Policy required. rev 2018.4.12.29829