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

This entry was written by Lorelle VanFossen and posted on May 4, 2006 at 5:30 am and filed under Web Design, Web Wise, WordPress, WordPress Themes with tags , , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

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?

    Reply
  2. wank
    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.

    Reply
  3. Michel Vuijlsteke
    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.

    Reply
  4. Dalton Filho
    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.

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

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

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

    thank for
    provide the infomation about jpeg gif png good luck

    Reply

8 Trackbacks/Pingbacks

  1. By Website Graphics: Which Format to Use When « Mediation Marketing from Mediator Tech on May 28, 2006 at 5:35 am

    […] 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. By Adding Avatars and Gravatars to Your WordPress and WordPress.com Blog « Lorelle on WordPress on July 13, 2008 at 11:44 am

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

  3. By Website Graphics: Which Format to Use When | Making Mediation Your Day Job on October 10, 2009 at 3:31 am

    […] 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. By Website Graphics: Which Format to Use When | Tammy Lenski Conflict Resolution on January 17, 2012 at 2:44 pm

    […] 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. By How to speed up your website | Wallop - A Digital Agency on April 27, 2012 at 10:57 am

    […] 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. By WordPress Post Content Sandbox Content Updated « Lorelle on WordPress on June 10, 2013 at 8:55 pm

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

  7. By Designing WordPress Themes For the Slowing Web « Lorelle on WordPress on June 10, 2013 at 9:09 pm

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

  8. By CSS Development Tools, Forms, Layouts, and More « Lorelle on WordPress on June 11, 2013 at 2:04 pm

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

Post a Comment to shyam

Required fields are marked *
*
*