• .PNG versus .JPG versus .BMP- a guide
    101 replies, posted
Welcome to Elecbullet's guide on the different image formats! If you're a tech-savvy person you probably won't have to use this. If you're impatient, skip to the end. This guide utilizes thumbnails. Click 'em to view them full size! [highlight][U]Table of Contents[/U][/highlight] [indent][list=1] [*][B]Introduction[/B][list] [*][B]F.A.Q.[/B][/list] [*][B]The Formats:[/B][list] [*][B].JPG[/B][list] [*][B]When to Use[/B][/list] [*][B].PNG[/B][list] [*][B]When to Use[/B][/list] [*][B].BMP[/B][list] [*][B]When to Use[/B][/list][/list] [*][B]Comparison images[/B][list] [*][B]Simple[/B][list] [*][B].JPG [*].PNG [*].BMP[/B][/list] [*][B]Photographic[/B][list] [*][B].JPG [*].PNG [*].BMP[/B][/list][/list] [*][B]In Conclusion[/B][/list][/indent] [highlight][U]1. Introduction[/U][/highlight] [indent]So a lot of you don't seem to know the difference between your file formats. I realize that the more tech-savvy of you probably will, but I know a lot of you won't. That's why I created this guide, to explain three of the most common image formats, and tell you why, in short, you need to use .PNG! [highlight][U]1.1. F.A.Q.[/U][/highlight] [indent][indent][B][I]BUT ELECBULLET, WHO GIVES TWO SHITS?[/I][/B][/indent] If you're a videophile like me, you will. [indent][B][I]BUT ELECBULLET, I'M NOT A VIDEOPHILE![/I][/B][/indent] Well screw you then. Let's continue regardless.[/indent][/indent] [highlight][U]2. The formats[/U][/highlight] [indent]These are the three image formats we're going to discuss. There are many more formats, but these are the important ones. [IMG]http://img43.imageshack.us/img43/8521/table3.png[/IMG] [highlight][U]2.1. .JPG[/U][/highlight] [indent]Now we will discuss the .JPG format. [release].JPG files use lossy compression. This means that the file size goes down, but with it does quality. Example. [IMG]http://img43.imageshack.us/img43/7774/tablem.png[/IMG] [IMG]http://img43.imageshack.us/img43/3933/table2.jpg[/IMG] In the image on [I]top[/I], the image uses [B]no lossy compression.[/B] With the image on the [I]bottom[/i] a large amount of lossy .JPG compression was used. Notice the difference. You can see visible compression artifacts- things that the .JPG format uses to reduce file size. But they also reduce the quality of the image. Here, I used a [I]very[/I] high compression level to make the artifacts obvious. .JPG files can use different levels of compression. In images with fewer colors, you can actually [I]raise[/I] the file size by using .JPG compression.[/release] [highlight][U]2.1.1. When to Use[/U][/highlight] [indent]But .JPG compression isn't all bad. [release]You should use .JPG compression for photographic images, or images with hundreds of colors. Take for example, this screenshot from Assassin's Creed: [img_thumb]http://images1.wikia.nocookie.net/assassinscreed/images/3/30/Animus.png[/img_thumb] [I](Click to view full size)[/I] Jesus fuck that's large, 462 KB! But with some .JPG compression, we reduce the size to 69 KB: [img_thumb]http://images2.wikia.nocookie.net/assassinscreed/images/b/b9/Animus.jpg[/img_thumb] Open the images in 2 tabs to see the difference. There's hardly any! So, when size is an issue, use .JPG compression. .JPG files can be compressed at different levels. This picture uses lossier and lossier .JPG compression, going from left to right: [img]http://upload.wikimedia.org/wikipedia/commons/3/3e/Phalaenopsis_JPEG.png[/img] Do not use .JPG compression in image with simple colors. Doing so can actually [I]increase[/I] the file size, [I]and[/I] reduce quality! Use .PNG instead. [/release][/indent][/indent] [highlight][U]2.2. .PNG[/U][/highlight] [indent]My favorite image format! [release].PNG files are compressed. But in a different way from .JPG files. They utilize [I]lossless[/I] compression, meaning that they [B]do not reduce quality[/B], but still reduce file size. .JPG files also use lossless compression, but in addition, they use lossy compression. In general, .PNG files are larger than .JPGs, with better quality.[/release] [highlight][U]2.2.1. When to Use[/U][/highlight] [indent][release]Use .PNG files when you are saving an image with [I]few[/I] colors (i.e. one made from scratch in MS Paint), or when size does not matter and quality does. [IMG]http://img43.imageshack.us/img43/7774/tablem.png[/IMG] [IMG]http://img43.imageshack.us/img43/3933/table2.jpg[/IMG] The image on the top is an uncompressed .PNG file. On the bottom: a heavily-compressed .JPG file. I mentioned before that .JPG compression can actually reduce the quality of images with few colors. In this case, the .JPG [I]does[/I] have a smaller filesize, but this is because I used [I]very[/I] heavy compression.[/release][/indent][/indent] [highlight][U]2.3. .BMP[/U][/highlight] [indent]The .BMP file format is my least favorite. [release]The .BMP file format is [U]uncompressed.[/U] It uses neither lossy NOR lossless compression. So .BMP files are tremendous. Like 200 times as large as simple .PNGs. Instead of using .BMP files, use .PNG files. [U]They are the same quality,[/U] but .PNG files use lossless compression for a [I]much[/I] smaller image. See comparison images for... comparison.[/release] [highlight][U]2.3.1. When to Use[/U][/highlight] [indent].BMP sucks but it has some use. [release]The simplicity of the BMP file format, and its widespread familiarity in Windows and elsewhere, as well as the fact that this format is relatively well documented and free of patents, makes it a very common format that image processing programs from many operating systems can read and write. While most BMP files have a relatively large file size due to lack of any compression, many BMP files can be considerably compressed with lossless data compression algorithms such as ZIP (up to 0.1% of original size) because they contain redundant data.[/release][/indent][/indent][/indent] [highlight][U]3. Comparison images[/U][/highlight] [indent]These are [U]the same image[/U] encoded in different formats. See next section for sizes. [highlight][U]3.1. Simple image[/U][/highlight] [indent][highlight][U]3.1.1. Simple .JPG[/U][/highlight] [indent][IMG_thumb]http://img24.imageshack.us/img24/6030/pngversusbmpversus.jpg[/IMG_thumb][/indent] [highlight][U]3.1.2. Simple .PNG[/U][/highlight] [indent][IMG_thumb]http://img24.imageshack.us/img24/3585/jpgversusbmpversus.png[/IMG_thumb][/indent] [highlight][U]3.1.3. Simple .BMP[/U][/highlight] [indent]Because .BMP files suck so much ass, if you upload them to Imageshack they are immediately converted to .PNG files. This is because, again, .BMP files are the same quality as .PNG files, but [B]many, many[/B] times larger. I had to upload the .BMP to Megaupload. If you want, you can find it [url=http://www.megaupload.com/?d=SH9OMKUP][u]here[/u][/url].[/indent][/indent] [highlight][U]3.2. Photographic image[/U][/highlight] [indent][highlight][U]3.2.1. Photographic .JPG[/U][/highlight] [indent][img_thumb]http://images1.wikia.nocookie.net/assassinscreed/images/3/30/Animus.png[/img_thumb][/indent] [highlight][U]3.2.2. Photographic .PNG[/U][/highlight] [indent] [img_thumb]http://images2.wikia.nocookie.net/assassinscreed/images/b/b9/Animus.jpg[/img_thumb][/indent] [highlight][U]3.2.3. Photographic .BMP[/U][/highlight] [indent]Are you bullshitting me? That would be tremendous. Fuck it. [B]EDIT:[/B] Fine, I made a .BMP file of it. The photographic .BMP turned out to be 2.6 MB, compared to the 1.1 MB .PNG file.[/indent][/indent][/indent] [highlight][U]4. In Conclusion[/U][/highlight] [indent]So how did the comparison pics fare up? I'll show you! [IMG]http://img31.imageshack.us/img31/5296/table4.png[/IMG] [B]EDIT:[/B] The photographic .BMP turned out to be 2.6 MB, compared to the 1.1 MB .PNG file. In the future:[list] [*][B]Use .JPG for photographic images, or ones with many, many colors[/B] [*][B]Use .PNG if size doesn't matter, or with simple images[/B] [*][B]You will probably never have to use .BMP like ever[/B][/list][/indent] Enjoy! Hope I helped. :smile: Feel free to correct me if you find something wrong.
i gave u a blue 'I' thingy
You only covered bit map images, what about vector images?
.png 4 lyfe.
[QUOTE=ReAnimator;16231978]You only covered bit map images, what about vector images?[/QUOTE] Well those are radically different. This guide is because I rage whenever I see a shit quality .JPG avatar, and when people post .BMP screenshots. Nobody uses .SVG files on forums.
I'm a good ol' PNG boy.
I learned something new today. :sax:
snip
fuck jpeg fuck bmp you only need png this thread is useless
Regardless of how big the BMP file may be, I think it's more helpful to say how large it is. [QUOTE=ReAnimator;16231978]You only covered bit map images, what about vector images?[/QUOTE] Vector images aren't exactly comparable because they work off a completely different system. It is shape and line based.
You should never use BMP for christ's sake.
This is very informative. Now, I have an odd question. Are there any photoshop plugins to mimic the jpg artifacts?
What about tiff? :(
[QUOTE=ReAnimator;16231978]You only covered bit map images, what about vector images?[/QUOTE] Vectoring is an art style, I believe. All vectors are converted into a mainstream viewable format where they cannot be freely resized without loss. Kill me if I'm wrong, I don't have a lot of knowledge on the subject.
PNG for life. People bitch about universal compatibility. If someone's browser/phone/email client doesn't support PNG, then it's their problem, not yours. PNG is now the standard in quality since most people have high speed internet and the larger file size isn't really a problem. Larger, of course, in relation to JPG. It's still amazingly compressed and tiny when compared to raw formats.
[QUOTE=dgjsk3;16232061]fuck jpeg fuck bmp you only need png this thread is useless[/QUOTE] Your avatar is perfect for the quote. [QUOTE=Pepin;16232072]Regardless of how big the BMP file may be, I think it's more helpful to say how large it is.[/QUOTE] I never got around to making the .BMP file. I suppose I should have. You see, I edit the Wikia Assassin's Creed Wiki and this guy uploaded a .PNG file of the Animus. But it was reduced in resolution from the original version, because the original was like 1 MB and the uploader apparently didn't know how to use .JPG compression. I guess I'll go make the .PNG into a BMP and see what I get. [B]EDIT:[/B] The PNG was 1.1 MB. The BMP was 2.6 MB. I'll edit that into the OP.
But PNG is the only one of the three that supports transparency. Don't even bring in .gif - it's shit.
[QUOTE=KingLouis;16232126]Vectoring is an art style, I believe. All vectors are converted into a mainstream viewable format where they cannot be freely resized without loss. Kill me if I'm wrong, I don't have a lot of knowledge on the subject.[/QUOTE] What? No, the whole point of a vector image is that you can resize it to any size losslessly. Perhaps you saved a vector image as a .PNG which can't be resized without loss?
Thread is helpful to the max.
[QUOTE=Master117;16232111]This is very informative. Now, I have an odd question. Are there any photoshop plugins to mimic the jpg artifacts?[/QUOTE] ...and why can't you just save it as a .JPG file? You can adjust the .JPG compression in Photoshop to get ridiculous compression like that in my image.
[QUOTE=KingLouis;16232126]Vectoring is an art style, I believe. All vectors are converted into a mainstream viewable format where they cannot be freely resized without loss. Kill me if I'm wrong, I don't have a lot of knowledge on the subject.[/QUOTE]Vectoring is a way of converting an image into a mathematical series of points which are relative to each other. No matter how big or small the image is made, the points are always the same distance from each other proportionately, and shapes are made by filling in colors between 3 or more points. It's for large scale signs, but doesn't have the ability to work with complex things like shadows or rough textures.
TIFF is incredible, but the files are super fucking big. I saved a gigantic picture (~5000x~4000) and it was 56 Mb.
coool do .gif, .tga, and .tiff next
[QUOTE=Master117;16232111]This is very informative. Now, I have an odd question. Are there any photoshop plugins to mimic the jpg artifacts?[/QUOTE] Once its a jpg, opening it and then re-saving it as a PNG will not remove the artifacts.
[QUOTE=PvtCupcakes;16232114]What about tiff? :([/QUOTE] :froggonk: Ive forgotten .tiff
[QUOTE=KingLouis;16232126]Vectoring is an art style, I believe. All vectors are converted into a mainstream viewable format where they cannot be freely resized without loss. Kill me if I'm wrong, I don't have a lot of knowledge on the subject.[/QUOTE] Well, most people who make vectors export them as a png. But the most common vectors found on the web are from SWF files. Vector graphics get a lot bigger when they have complex curves and stuff.
[QUOTE=Urog;16232242].tga[/QUOTE] Fucking hate .tga
[QUOTE=Elecbullet;16232174]What? No, the whole point of a vector image is that you can resize it to any size losslessly. Perhaps you saved a vector image as a .PNG which can't be resized without loss?[/QUOTE] Vectors are good for certain art styles like logos, but they posted on websites as PNGs. ;)
To be honest I really don't know much about GIF or TGA or TIFF so I would fuck up epically if I wrote about them.
I use: DDS Targa PNG TIF Except nobody uses them, and the format is never used :(
Sorry, you need to Log In to post a reply to this thread.