Image Formats and How to Use Them

AD

If you have been blogging or working with graphics of any kind, you would know that there are many Image Formats in which you can save a digital photo, such as

  • JPG
  • GIF
  • PNG etc.

Students of Graphic Designing often ask that which format is the best one. It’s not about the best or worst, they all comprise different specifications, so one could be suitable at one place but not at the other. Today I’m describing the functionality and suitability of the famous and most used image formats out of 44 available file extensions.

Formats

different picture file size test

image courtesy The eMailing Experience

BMP: Bitmap

This format does not allow compression, so the images volume is high but the quality is first-class.  This format is use by Microsoft Windows graphics subsystem (GDI).

TIFF: Tagged Image File Format

This format was developed by a company called Aldus in collaboration with Microsoft. Tiff is a very “printing friendly” format, it is widely used for desktop printing, faxing and OCR (Optical Character Recovery, the method of digitally retrieving text from an image). One thing I like about this format is that we can preserve layers while saving from Photoshop.

PNG: Portable Network Graphic (also known as PING)

It allows data compression, but ‘lossless’, so the image quality is great, but volume is quite slender compared to BMP. This format was created as an answer to the GIF License.

There was a license that if you make a software that supports GIF, you had to pay them $5000. After PNG, the license has expired. What I like about this is that this format supports Transparency, your images can be transparent from some part, or absolutely background-less.

GIF: Graphics Interchange Format

It only supports 256 colors. Lack of color detail makes this format low in volume but it becomes unsuitable for scenery and portraits. The thing I like about this is that it supports metadata, or in simple English, this format can carry animations, and even sounds.

Raw File

Raw files are unprocessed information (data) from your camera, so no in-camera effects will be visible in this type. This format can be considered as a starting point for digital editing of your photos.

JPG or JPEG: (Joint Photographic Experts Group)

It is named after the group that invented this format. JPG is the most used digital image format. It supports customized amount of compression. High compression and full range of colors makes it the most popular format amongst everybody, especially for web related tasks, such as blogging. High compression makes the image ‘lossy’, but what I like about this is the middle-ground between volume and quality.

How to Use Different Image Types and Hit Bulls-eye

how to use image types

Desktop Publishing

Use PNG and TIFF files for any kind of printing. TIFF is a better choice for printing whereas PNG’s low volume makes it a better choice to send over the internet.

Web Standards

PNG, GIF and JPG works great for online previews. PNGs are relatively high in volume, but quality is the best you can get. GIFs are only good if you need an animation. JPG is the winner, providing little volume yet reasonable quality. If you are a blogger, go for JPG.

As ever, I’m trying to make this article easy to understand, rather than being technically precise. Kindly comment and tell what do you think about these kind short and easy-to-understand articles.

Raw

As ever, I’m trying to make this article easy to understand, rather than being technically precise. Kindly comment and tell what do you think about these kind short and easy-to-understand articles.files are the unprocessed information (data) from your camera.

create free website wix below post

Further Related Readings

Comments
  1. mubashir January 16, 2011 at 12:21 am

    Nice Post Tayyab really informative for students and bloggers thanks. 🙂

  2. Mahmoud January 16, 2011 at 5:19 am

    I like it

  3. Egon January 16, 2011 at 5:30 am

    This overview is quite lacking. I would not recommend bloggers to always use JPG, that’s a really bad advice. Same thing for print, don’t always go for TIFF or PNG unless that’s whay your professional printing service demands to use.

    It all boils down to one thing: is the format you are using made to be used with the image you are storing.

    JPEG is made for photographs: it’s lossy but it’s really great for photographs (almost the best you can do, without going to wavelets (JPEG2000)). On the other hand it performs really badly on images with really sharp edges (diagrams, charts, text, …). There you will get blocking artifacts which look very unprofessional to any trained eye.

    My advice: JPEG for photographs, the occasional picture with a lot of gradients but nothing else.

    PNG nowadays is indeed the successor to GIF and I really like it, it has an extension (MNG) to provide animation. Lossless so it’s really great for anything JPEG is bad at. For any kind of diagram, chart or something filled with text: use PNG if it’s for web use.

    GIF, well, the only reasong for using GIF is if you want to make an dirt-cheap animation. 256 colors is so 1993.

    Also metadata is not sound or animation (I seriously doubt that GIF supports sound); metadata is data about your data. PNG has metadata, JPEG has metadata, almost any format has metadata. E.g. in JPEG most of the metadata stored is EXIF metadata, that contains the settings your camera used to acquire that picture (shutter speed, camera model, flash settings, time of the photo, …).

    If you really need high quality diagrams or charts or anything with really sharp edges and text, take a look at the various vector formats. Bitmap formats (JPEG, BMP, PNG, TIFF, …) represent images as a number of pixels, vector formats represent pictures as a number of shapes (lines, points, rectangles, circles, you name it). By doing so you can zoom in on such image without losing any quality. The most common format for vector files is SVG or EPS (i.e. WikiPedia uses a lot of SVG files, that’s the format you’ll want to use for web), but on the Windows desktop (mainly Office) EMF and WMF are used most commonly. Also: don’t even try to store photographs in vectorized format, there is no such thing as an infinite enhance for photos. Also PDF is a highly vectorized format, but it also support bitmap graphics.

    To recapitulate: JPEG for photo, PNG for web graphics, GIF if you need low-fi animation (or you could try MNG), for printing you can use either unless your printer demands TIFF. Real high quality diagrams should be done in SVG or any other vector format.

    1. Tayyab January 16, 2011 at 11:32 am

      First of all, thanks a lot for taking out so much time, and especially on the weekend to write this mini-article (calling it just a comment would be a disgrace for it). Your effort is a true depiction of the bond you have with Designzzz
      Let me clarify a few things, this post was intended for the newcomers, not the seasoned professionals like you. You could have guessed it from the first sentence of this post where we reveal that there are different image formats with different functions.
      I was thinking about making another post for the advance level professionals of Print Media on the subject of how to get the best out of images and vectors. Since this article was for the beginners, the details would have been confusing and we only talked about the formats that do not require any plugin or special pic viewer software to view them.
      Vector formats was not a subject here at all, so SVG, WMF, EPS, etc. etc. etc. were just irrelevant. I guess the title of this post should have included the word BITMAP in it. I thought the word Image means Bitmap, not Vector.
      Anyway, since you have summed up some great information in a very short space, I’m going to officially mention your name and the information you provided in your comment, in the post I talked about a few lines ago. By the way, have you checked this page: Write for Designzzz 🙂
      Thanks once again for being committed with Designzzz, we really really appreciate it and hope it will not change.

  4. Ayaz Malik January 16, 2011 at 5:58 am

    @egon, you have some valid points, i agree with most of them.
    I am a designer for last 5 years , here is what i have experienced.
    Web Graphics requires great quality but low image sizes. Considering this page , the top Navigation background image should be in PNG. Its hardly 2 colors image so png will give the best quality and less image size.

    The facebok, twitter and RSS image on top should be in JPG because they use multiple color and only JPG can maintain a good quality with smaller image size in Kbs.

    For printing i have been using Tiff so far. i am going to give SVG a try after you pointed it out

    @Tayyab, Good read.

  5. Egon January 16, 2011 at 12:08 pm

    Tayyab, while I do agree with you that some of the details of each technique might confuse newcomers, I think it’s better to give them a little overview and learn the right things (read: slightly harder things) from the start as it’s far harder to unlearn bad practice than to learn a whole new thing a more difficult way.

    Vector formats might be a little offtopic, but I thought it was worth mentioning. Not all graphics are bitmap as I suspect a lot of newcomers might think but it’s basic knowledge for anyone serious about graphics and design.

    I’m hardly a professional, I’ve done some work with graphics formats and even a bit of compression techniques used in some of them. I’m just pretty considerate when it comes to presentation artefacts. So that’s why I left this long rant: to save other people from making common mistakes I see every day.

    Perhaps to illustrate what artefacts will occur when using JPEG when another format (i.e. PNG) is better:
    http://en.wikipedia.org/wiki/File:Comparison_of_JPEG_and_PNG.png

    You on the other hand provided an example where JPEG beats PNG (look at the photo at the top). Even though the original photograph shows some artefacts, the quality for PNG and JPG files are exactly the same, the PNG file is a lot larger, so a waste of space.

  6. Amr Elgarhy January 16, 2011 at 7:15 pm

    Nice article and made it easy to understand the differences between images types.

  7. MeanEYE January 17, 2011 at 4:59 am

    This “review” is almost useless. PNG is great format and often neglected because people don’t know its qualities. It supports 8bit transparency as oposed to GIF which has only 1bit. PNG is not always big. In simplest terms, PNG represents compressed bitmap image with alpha channel. So, when there are many different, non-repeating, pixels on image (like photographs) PNG tends to be bigger than say JPEG. On the other hand, if there is a certain pattern to your image, like gradient or repeating pixels, file itself can be really small. You can experiment with this. All you need to do is make 1024×1024 image and make a gradient on it. You’ll be surprised how small file will be.

    As someone said here, there is no simple rule which format to use when. Sometimes in web site design you trade PNG’s perfection for much smaller and a bit dirty JPEG file because you don’t want your visitors to download 400kB file. But if you take into account that upcoming CSS3 supports multiple background images using PNG is opening so many new possibilities.

    GIF is ancient format. I can’t really remember when was the last time I used it. It’s just not practical anymore. 256 color limit is a real handicap. So I wont even bother to explain how it works. 🙂

  8. Scali January 17, 2011 at 5:51 am

    BMP does support compression, in the form of RLE. It is not commonly used, nor is it very effective for truecolour images, but it does exist:
    http://www.fileformat.info/format/bmp/corion-rle8.htm

  9. Muralitharan January 17, 2011 at 6:16 am

    I liked this post.

    Also I appreciate both the one who post it and the reviewers.
    All the informations were useful.

    It should be started from the types of image formats.
    As one of the comments says. So that the reader could have a clear start.

    Also thanks for the info with tag “The thing I like about this”

  10. Alaa January 17, 2011 at 7:33 am

    Nice post and comments
    it’s important to know about image formats for developers and designers.

  11. Tayyab January 17, 2011 at 11:56 am

    @Egon @MeanEYE @Scali

    Alright guys, I get it. You are advanced users and I seriously underestimated my audience. Now I know that I should start working on the post I mentioned in my earlier comment. That post will be published in a few days, I will be anxiously waiting for your feedback there as well.
    The readers have actually enjoyed the comments section a lot, for that I’ll have to thank everybody once again for being so affiliated with Designzzz and participating in this warm fashion. I hope this bond stays the same.

  12. Mike January 17, 2011 at 2:22 pm

    Nice introduction.

    To hopefully add something useful… It is also worth mentioning that TIFF is\was deemed a preferred format (I can’t remember exactly how they put it) for document archival applications by the Library of Congress amongst others. Its a while since I have looked and there may be changes but when I last looked PDF was not a preferred format. This use leverages the tiff format ability to encode multiple pages in a single document (although this is not well supported in many editors).

    I guess the main point here is that there may be broader requirements for your format choice than your immediate use.

  13. Graham January 17, 2011 at 3:37 pm

    For many years I have maintained static HTML web sites, and have used JPGs for photographs and GIFs for diagrammatic images with a few bold colours. GIF is better than JPG for diagrammatic images because it exhibits no artifacts, colour palette is not an issue, and file size is generally smaller. Having read the article, I have just done a little experiment and saved a such an image as a TIF, a GIF and a PNG, and was amazed to see that the PNG was smaller than the GIF. So I guess it is time for me to say goodbye to the GIF!

  14. Scali January 17, 2011 at 4:13 pm

    It might be useful to specify how old these formats are.
    For example, GIF dates back to the late 80s. This explains why the compression is rather basic, and why only 256 colours are supported (truecolour videocards were not mainstream yet, so the need for more than 256 colour images simply did not exist at the time). GIF has been superceded by PNG, and these days, with all major browsers supporting PNG properly, there’s no reason to use GIF.

  15. Ken January 17, 2011 at 8:53 pm

    Not all the people reading your post are experts in graphics. I liked how you included the various file types that I have seen and used. I’ve liked the comments I’ve seen. Wonder how you feel about what I did? I wanted to create a game using JavaScript. I used paint to create a line drawing in black on white background and then changed the background color of the image outside of the line drawing to change the image meaning in the game. The version of paint I had was old and didn’t support PNG. I didn’t like it, but I used GIF. For grins, I looked at my current paint. The 2KB file stores as 1KB in PNG. If I felt like it, I’d rewrite my script to use the newer file format.

  16. Tayyab January 17, 2011 at 11:08 pm

    @Graham
    Don’t just switch to PNG, if your image has many black (or any single color) pixels in it, PNG would be smaller in size but if it’s a multi-colored graphic or a portrait, PNG would size high. I’ll be making another post that will explicitly define such subjects.

    @Scali
    You have a reasonable point and I did want to include such details but the fear of making this article loooong, just did not let me. Although these details would be available in the next article I’m talking about.

  17. mtcoder January 18, 2011 at 10:54 am

    Plain and easy to follow if its a photo go with Jpg, if its a vector graphic, or user created image with hard lines go with PNG, if you lame animation GIF.
    End of story.
    But your under selling PNG in this article which is why people are commenting with more detail. PNG is great for scaling as well which is something you miss out on. Jpg doesn’t auto scale well. It scales inside an editor and when you save all will be right, but take a 200pixel graphic and balloon it to 1024 pixels in a browser and it looks like garbage with lots of bad “linear blocks” (usually) take same graphic and do it with PNG and you get a nice transition. Once again though if its a photograph use Jpg cause the data really can’t change, a still image is a still image, otherwise you probably want to use PNG if your going for a webpage mainly cause of the various resolutions and stretching that happens on the web.

  18. Romeo January 24, 2011 at 6:54 pm

    Use GIF (or PNG) for Screenshots!
    Don’t save Screenshots as JPeg format, because the lossy compression makes texts hard to read.

  19. Tayyab January 24, 2011 at 11:24 pm

    @Romeo

    Nice Tip, thanks.
    Don’t miss the 2nd part for the advanced users which is being made right now. We’ll be publishing it in a few days.

  20. saurabhink February 2, 2011 at 12:07 am

    Very Good and interesting information about images extensions.
    Thanks for this article. I like your articles and i found you on “http://www.designzzz.com/free-cloud-operating-systems” this blog.
    Thanks again

  21. Graham February 2, 2011 at 4:06 pm

    In my previous post I said that I had done a quick experiment, saving a coloured graphic as a PNG and a GIF, and was surprised to find that the PNG filesize was much smaller. However, on a regular basis I am scanning statements and correspondence – in black and white where possible, and then saving a copy. In these instances I am finding the GIF smaller than the PNG. It seems perverse to migrate away from GIF for my digitised documents when for monochrome images the GIF provides exactly the same quality as the PNG, and at a smaller filesize.

    1. Tayyab February 4, 2011 at 6:06 am

      @Graham
      I also think that for monochrome images, GIF is the best choice. I haven’t done any experiment myself yet so I won’t be able to guide you any further. BUT I am working on the post I mentioned in my previous comments here and hopefully, all the questions of this kind will be answered there.

  22. Brett Widmann March 24, 2011 at 3:01 pm

    This was really helpful! Thanks for the information.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved