Skip navigation

JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats

While it isn’t pretty and a bit rude, this tutorial on when and how to use internet image formats via email or web page is helpful for learning about which image or graphic format to choose. For a basic understanding, and visual examples, of the differences between GIF, JPEG, and PNG, it does the job.

There are three formats that do everything you need: JPEG, PNG, and GIF.

JPEG (Joint Photographic Experts Group). JPEGs are a “lossy” format. That is, when you save an image as a JPEG file, not all of the information in the original image is preserved. This is because if it were, the file size would be very large…

PNG (Portable Network Graphics). PNG is the image format to use for line art, text, screenshots of Windows, general web graphics and “comic strip” style art. PNG works in two distinct color depths: 256 (8 bit) or 16M (24/32bit). For 99% of use, it will be the 256 color version you are interested in as 24 bit is really quite large for web use, and such need for high color depths (photos, in-game screenshots, etc) are probably better suited by JPEG when you are concerned with file size…

GIF (Graphic Interchange Format). In almost all instances, GIF is obsolete and should not be used. Where you have GIF files, a PNG would do just the same and be noticably smaller. Not to mention that Unisys holds patents on the compression algorithms used in GIFs, which essentially makes them illegal to use without a license. Big web portals such as Yahoo are having to pay royalties to Unisys just to use GIF files on their site. While GIF is “free” for non-commercial use, Unisys reserve the right to change this at any time. One of the other limitations of GIF is that only one color can be transparent (ie, no alpha channel) and there is a maximum of 256 colors…


Site Search Tags: , , , , , , , , , , ,
Copyright Lorelle VanFossen

6 Comments

  1. Marthonoh Jessen
    Posted May 6, 2006 at 1:26 am | Permalink

    Dear Lorelle,

    This is very useful for me. I always wondered about these formats and when to use it.

    Why do you say it isn’t pretty and RUDE?

  2. Posted May 6, 2006 at 2:36 am | Permalink

    That article completely fails to acknowledge the single major reason why .gif continues to be used: transparency. Until IE7 is released supporting transparent .png, .gif is not going anywhere.

  3. Posted May 7, 2006 at 1:26 pm | Permalink

    @wank: not so.

    Internet Explorer 6 does support transparent PNG. It doesn’t support an 8 bit alpha channel in png, that’s all.

  4. Posted January 1, 2008 at 7:48 am | Permalink

    I use JPEG only when I have to show a photograph or some complex image that is hard to compress. Most of the times PNG is size-efficient and doesn’t introduce artifacts like JPEG does when using high compression. When in doubt I compress the image in both formats and pick the one with the smallest size and best quality.

  5. Posted September 29, 2008 at 5:24 pm | Permalink

    My blog can show only one Picture, I don’t know how to do

  6. shyam
    Posted April 9, 2010 at 10:04 am | Permalink

    thank for
    provide the infomation about jpeg gif png good luck


8 Trackbacks/Pingbacks

  1. [...] If you have a website or plan to have one soon, this quick little primer on web graphics format will help you understand how the most-used graphics formats differ from one another and, more importantly, when to use which type: JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats [...]

  2. [...] JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats [...]

  3. [...] If you have a website or plan to have one soon, this quick little primer on web graphics format will help you understand how the most-used graphics formats differ from one another and, more importantly, when to use which type: JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats [...]

  4. [...] TweetEmailIf you have a website or plan to have one soon, this quick little primer on web graphics format will help you understand how the most-used graphics formats differ from one another and, more importantly, when to use which type: JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats [...]

  5. [...] Always make sure you’re using the correct image format. Make sure you are using .png, .jpg, or .gif correctly when saving images. If you’re unsure of the proper use-cases of each image format, you can research it here. [...]

  6. […] JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats […]

  7. […] JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats […]

  8. […] JPG, PNG, or GIF – When and How to Use Different Web Graphic Formats […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,798 other followers

%d bloggers like this: