Graphic File Formats for Graphics on the Web

Discussion in 'Web Design, HTML And CSS' started by pradeep, May 18, 2005.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    Before starting this article I want readers to know what a pixel is. Pixel is short for Picture Element. A pixel is a single point in a graphic image. Graphics monitors display pictures by dividing the display screen into thousands (or millions) of pixels, arranged in rows and columns. The pixels are so close together that they appear connected. The number of bits used to represent each pixel determines how many colors or shades of gray can be displayed. For example, in 8-bit color mode, the color monitor uses 8 bits for each pixel, making it possible to display 2 to the 8th power (256) different colors or shades of gray.

    On color monitors, each pixel is actually composed of three dots a red, a blue, and a green one. Ideally, the three dots should all converge at the same point, but all monitors have some convergence error that can make color pixels appear fuzzy.

    The quality of a display system largely depends on its resolution, how many pixels it can display, and how many bits are used to represent each pixel. VGA systems display 640 by 480, or about 300,000 pixels. In contrast, SVGA systems display 800 by 600, or 480,000 pixels. True Color systems use 24 bits per pixel, allowing them to display more than 16 million different colors.

    Following are the most commonly used graphics file formats for putting graphics on the World Wide Web and how each differs from the others.

    JPEG/JPG vs. GIF vs. PNG - What is the difference?

    JPEG/JPG:

    Short for Joint Photographic Experts Group, the original name of the committee that wrote the standard. JPG is one of the image file formats supported on the Web. JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. Lossy compression refers to data compression techniques in which some amount of data is lost. Lossy compression technologies attempt to eliminate redundant or unnecessary information. Most video compression technologies, such as MPEG, use a lossy technique.

    The information that is discarded in the compression is information that the human eye cannot detect. JPG images support 16 million colors and are best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness.

    With the explosion of scanners, digital cameras and the World Wide Web, the JPEG image format has quickly become the most widely used digital image format.

    A useful property of JPEG is that the degree of lossiness can be varied by adjusting compression parameters. This means that the image maker can trade off file size against output image quality. You can make extremely small files if you don't mind poor quality; this is useful for applications such as indexing image archives. Conversely, if you aren't happy with the output quality at the default compression setting, you can jack up the quality until you are satisfied, and accept lesser compression.

    There are two good reasons: to make your image files smaller, and to store 24-bit-per-pixel color data instead of 8-bit-per-pixel data.

    Making image files smaller is a win for transmitting files across networks and for archiving libraries of images. Being able to compress a 2 Mbyte full-color file down to, say, 100 Kbytes makes a big difference in disk space and transmission time! And JPEG can easily provide 20:1 compression of full-color data. If you are comparing GIF and JPEG, the size ratio is usually more like 4:1.

    The second fundamental advantage of JPEG is that it stores full color information: 24 bits/pixel (16 million colors). GIF, the other image format widely used on the net, can only store 8 bits/pixel (256 or fewer colors).

    Within a couple of years, GIF will probably seem as obsolete as black-and-white MacPaint format does today. Furthermore, JPEG is far more useful than GIF for exchanging images among people with widely varying display hardware, because it avoids prejudging how many colors to use. Hence JPEG is considerably more appropriate than GIF for use as a Usenet and World Wide Web standard photo format.

    GIF

    Short for Graphics Interchange Format, another of the graphics formats supported by the Web. Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. Lossless compression refers to data compression techniques in which no data is lost. The PKZIP compression technology is an example of lossless compression. For most types of data, lossless compression techniques can reduce the space needed by only about 50%. For greater compression, one must use a lossy compression technique. Note, however, that only certain types of data -- graphics, audio, and video -- can tolerate lossy compression. You must use a lossless compression technique when compressing data and programs.

    GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that are only a few pixels high. With an animation editor, GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. The compression algorithm used in the GIF format is owned by Unisys, and companies that use the algorithm are supposed to license the use from Unisys.

    JPEG is not going to displace GIF entirely; for some types of images, GIF is superior in image quality, file size, or both. One of the first things to learn about JPEG is which kinds of images to apply it to.

    Generally speaking, JPEG is superior to GIF for storing full-color or gray-scale images of "realistic" scenes; that means scanned photographs, continuous-tone artwork, and similar material. Any smooth variation in color, such as occurs in highlighted or shaded areas, will be represented more faithfully and in less space by JPEG than by GIF.

    GIF does significantly better on images with only a few distinct colors, such as line drawings and simple cartoons. Not only is GIF lossless for such images, but it often compresses them more than JPEG can. For example, large areas of pixels that are all exactly the same color are compressed very efficiently indeed by GIF. JPEG can't squeeze such data as much as GIF does without introducing visible defects.

    Computer-drawn images, such as ray-traced scenes, usually fall between photographs and cartoons in terms of complexity. The more complex and subtly rendered the image, the more likely that JPEG will do well on it. The same goes for semi-realistic artwork (fantasy drawings and such).But icons that use only a few colors are handled better by GIF.

    GIF format supports transparency. This allows a graphic designer to designate the background of the image transparent. This means that if you place a transparent GIF in a yellow table cell, the background color of that image will turn yellow.

    The interlacing feature in a GIF file creates the illusion of faster loading graphics. What happens is that an image is presented in a browser in several steps. At first it will be fuzzy and blurry, but as more information is downloaded from the server, the image becomes more and more defined until the entire image has been downloaded. It's important to note that interlaced GIF files will usually be a bit larger than non-interlaced ones, so use interlacing only when it makes sense.

    Generally, GIF files should be used for logos, line drawings and icons. Avoid using it for photographic images, and graphics which have long stretches of continuous-tone in them. When you're designing GIF files, avoid using gradients and turn off anti-aliasing where possible to minimize the file size.

    PNG

    Short for Portable Network Graphics, the third graphics standard supported by the Web (though not supported by all browsers). PNG was developed as a patent-free answer to the GIF format but is also an improvement on the GIF technique. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. PNG does not support animation like GIF does.

    The PNG format provides a portable, legally unencumbered, well-compressed, well-specified standard for lossless bitmapped image files.

    Although the initial motivation for developing PNG was to replace GIF, the design provides some useful new features not available in GIF, with minimal cost to developers.

    Unisys announced in 1995 that it would require people to pay licensing fees in order to use GIF. This does not mean that anyone who creates or uses a GIF image has to pay for it. Authors writing programs that output GIF images are subject to licensing fees.
    GIF features retained in PNG include:
    Indexed - color images of up to 256 colors.

    Streamability: files can be read and written serially, thus allowing the file format to be used as a communications protocol for on-the-fly generation and display of images.

    Progressive display: a suitably prepared image file can be displayed as it is received over a communications link, yielding a low-resolution image very quickly followed by gradual improvement of detail.

    Transparency: portions of the image can be marked as transparent, creating the effect of a non-rectangular image.

    Ancillary information: textual comments and other data can be stored within the image file.

    Complete hardware and platform independence.

    Effective, 100% lossless compression.
    Important new features of PNG, not available in GIF, include:

    Truecolor images of up to 48 bits per pixel.

    Grayscale images of up to 16 bits per pixel.

    Full alpha channel (general transparency masks).

    Image gamma information, which supports automatic display of images with correct brightness/contrast regardless of the machines used to originate and display the image.

    Reliable, straightforward detection of file corruption.

    Faster initial presentation in progressive display mode.

    PNG is designed to be:

    Simple and portable: developers should be able to implement PNG easily.

    Legally unencumbered: to the best knowledge of the PNG authors, no algorithms under legal challenge are used. (Some considerable effort has been spent to verify this.)

    Well compressed: both indexed-color and truecolor images are compressed as effectively as in any other widely used lossless format, and in most cases more effectively.
     
  2. sterling45

    sterling45 New Member

    Joined:
    Aug 13, 2006
    Messages:
    46
    Likes Received:
    1
    Trophy Points:
    0
    Nice article! I wanted to add that GIF and JPG show up differently in low resolutions. GIF becomes more pixelated and JPG becomes more blurry!

    I find that using photographs in low quality looks best with JPG and solid graphics (with few different colors) work best with GIF.
     
  3. regimages

    regimages New Member

    Joined:
    Jan 24, 2007
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Nice article!
     
  4. darsh999

    darsh999 New Member

    Joined:
    Oct 13, 2007
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    0
    Ya ofcorse m using three of them specially while m working on photoshop !
    I used to work on the all three JPG .GIF and PNG files !
    Its very informative, i liked the artice !
     
  5. rapwaydown

    rapwaydown New Member

    Joined:
    Nov 28, 2007
    Messages:
    62
    Likes Received:
    0
    Trophy Points:
    0
    nice, but does graphic format matter that much
     
  6. rekha11

    rekha11 New Member

    Joined:
    Jan 31, 2008
    Messages:
    13
    Likes Received:
    3
    Trophy Points:
    0
    Graphic file formats employ varying compression schemes, and some are designed to work better
    than others for certain types of graphics. The two primary Web file formats are GIF and JPEG.
    A third format PNG has been available since 1995 but has been little used because of poor browser support.

    GIF is " Graphics Interchange Format "
    JPEG is "Joint Photographic Experts Group"
    It supports 24 bits of color information, and is most commonly used for photographs and similar continuous-tone bitmap images.



    PNG is "Portable Network Graphics
     
  7. trinitybrown

    trinitybrown New Member

    Joined:
    Oct 23, 2008
    Messages:
    21
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    UK
    Good and informative article, so according to your article one should use GIF oo PNG format as they both provide lossless compression
     
  8. xceedbd

    xceedbd New Member

    Joined:
    Jan 17, 2009
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Home Page:
    http://www.xceedbd.com/
    Thanks a lot, excellent article. i got more information about picture format from this article. I hope u will continue ur support.
    wish ur all the best.
     
  9. babaaldar

    babaaldar New Member

    Joined:
    Feb 23, 2009
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    The information is very nice.
     
  10. david82

    david82 New Member

    Joined:
    May 7, 2009
    Messages:
    14
    Likes Received:
    1
    Trophy Points:
    0
    I think PNG is better than above but only in some particular cases. Forgeneral purpose, JPEG fits all the needs and handles most of the tasks
     
  11. LenoxFinlay

    LenoxFinlay Banned

    Joined:
    Apr 15, 2009
    Messages:
    46
    Likes Received:
    0
    Trophy Points:
    0
    Simple and portable: developers should be able to implement PNG easily.Legally unencumbered: to the best knowledge of the PNG authors, no algorithms under legal challenge are used. (Some considerable effort has been spent to verify this.)
    Well compressed: both indexed-color and truecolor images are compressed as effectively as in any other widely used lossless format, and in most cases more effectively.
     
  12. William9

    William9 Member

    Joined:
    Feb 9, 2010
    Messages:
    60
    Likes Received:
    3
    Trophy Points:
    8
    Gender:
    Male
    Location:
    India
    Home Page:
    http://www.host.co.in/
    I am not expert of these type of things but what I have heard that, Google hates over use of flash work on your web page and surprisingly Bing loves flash images.

    Make me correct if I am wrong.
     
  13. alexsmth114

    alexsmth114 New Member

    Joined:
    Mar 7, 2011
    Messages:
    19
    Likes Received:
    1
    Trophy Points:
    0
    Really good post, couldn't have asked for more!!..
     
  14. mark1one

    mark1one New Member

    Joined:
    May 17, 2011
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    This is really a good one stuff in this. I really admire tot this. Plz serve some more about it. I ma waiting for your new update on it.
     

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice