views:

8285

answers:

9

I have seen many types of image (extension) but have never understood the real difference between them. Are there any links out there that clearly explains the difference between them.

Is there a standard to use a particular type of image in your application? What do we use for web applications?

A: 

The file extension tells you how the image is saved. Some of those formats just save the bits as they are, some compress the image in different ways, including lossless and lossy methods. The Web can tell you, although I know some of the patient responders will outline them here.

The web favors gif, jpg, and png, mostly. JPEG is the same (or very close) to jpg.

gbarry
+4  A: 

Generally these are either:

Lossless compression Lossless compression algorithms reduce file size without losing image quality, though they are not compressed into as small a file as a lossy compression file. When image quality is valued above file size, lossless algorithms are typically chosen.

Lossy compression Lossy compression algorithms take advantage of the inherent limitations of the human eye and discard invisible information. Most lossy compression algorithms allow for variable quality levels (compression) and as these levels are increased, file size is reduced. At the highest compression levels, image deterioration becomes noticeable as "compression artifacting". The images below demonstrate the noticeable artifacting of lossy compression algorithms; select the thumbnail image to view the full size version.

Each format is different as described below:

JPEG JPEG (Joint Photographic Experts Group) files are (in most cases) a lossy format; the DOS filename extension is JPG (other OS might use JPEG). Nearly every digital camera can save images in the JPEG format, which supports 8 bits per color (red, green, blue) for a 24-bit total, producing relatively small files. When not too great, the compression does not noticeably detract from the image's quality, but JPEG files suffer generational degradation when repeatedly edited and saved. Photographic images may be better stored in a lossless non-JPEG format if they will be re-edited, or if small "artifacts" (blemishes caused by the JPEG's compression algorithm) are unacceptable. The JPEG format also is used as the image compression algorithm in many Adobe PDF files.

TIFF The TIFF (Tagged Image File Format) is a flexible format that normally saves 8 bits or 16 bits per color (red, green, blue) for 24-bit and 48-bit totals, respectively, using either the TIFF or the TIF filenames. The TIFF's flexibility is both blessing and curse, because no single reader reads every type of TIFF file. TIFFs are lossy and lossless; some offer relatively good lossless compression for bi-level (black&white) images. Some digital cameras can save in TIFF format, using the LZW compression algorithm for lossless storage. The TIFF image format is not widely supported by web browsers. TIFF remains widely accepted as a photograph file standard in the printing business. The TIFF can handle device-specific colour spaces, such as the CMYK defined by a particular set of printing press inks.

PNG The PNG (Portable Network Graphics) file format was created as the free, open-source successor to the GIF. The PNG file format supports truecolor (16 million colours) while the GIF supports only 256 colours. The PNG file excels when the image has large, uniformly coloured areas. The lossless PNG format is best suited for editing pictures, and the lossy formats, like JPG, are best for the final distribution of photographic images, because JPG files are smaller than PNG files. Many older browsers currently do not support the PNG file format, however, with Internet Explorer 7, all contemporary web browsers fully support the PNG format. The Adam7-interlacing allows an early preview, even when only a small percentage of the image data has been transmitted.

GIF GIF (Graphics Interchange Format) is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects. It also uses a lossless compression that is more effective when large areas have a single color, and ineffective for detailed images or dithered images.

BMP The BMP file format (Windows bitmap) handles graphics files within the Microsoft Windows OS. Typically, BMP files are uncompressed, hence they are large; the advantage is their simplicity, wide acceptance, and use in Windows programs.

Use for Web Pages / Web Applications

The following is a brief summary for these image formats when using them with a web page / application.

  • PNG is great for IE6 and up (will require a small CSS patch to get transparency working well). Great for illustrations and photos.
  • JPG is great for photos online
  • GIF is good for illustrations when you do not wish to move to PNG
  • BMP shouldn't be used online within web pages - wastes bandwidth


  • Source: Image File Formats

    Luke
    +14  A: 

    Yes. They are different file formats (and their file extensions).

    Wikipedia entries for each of the formats will give you quite a bit of information:

    • JPEG (or JPG, for the file extension; Joint Photographic Experts Group)
    • PNG (Portable Network Graphics)
    • BMP (Bitmap)
    • GIF (Graphics Interchange Format)
    • TIFF (or TIF, for the file extension; Tagged Image File Format)

    Image formats can be separated into three broad categories: lossy and lossless compression formats, and uncompressed formats.

    Uncompressed formats take up the most amount of data, but they are exact representations of the image. Bitmap formats such as BMP genenrally are uncomressed, although there also are compressed BMP files as well.

    Lossy compression formats are generally suited for photographs. It is not suited for illustrations, drawings and text, as compression artifacts from compressing the image will standout. Lossy compression, as its name implies, does not encode all the information of the file, so when it is recovered into an image, it will not be an exact representation of the original. However, it is able to compress images very effectively compared to lossless formats, as it discards certain information. A prime example of a lossy compression format is JPEG.

    Lossless compression formats are suited for illustrations, drawings, text and other material that would not look good when compressed with lossy compression. As the name implies, lossless compression will encode all the information from the original, so when the image is decompressed, it will be an exact representation of the original. As there is no loss of information in lossless compression, it is not able to achieve as high a compression as lossy compression, in most cases. Examples of lossless image compression is PNG and GIF. (GIF only allows 8-bit images.)

    TIFF and BMP are both "wrapper" formats, as the data inside can depend upon the compression technique that is used. It can contain both compressed and uncomressed images.

    When to use a certain image compression format really depends on what is being compressed.

    Related question: Ruthlessly compressing large images for the web

    coobird
    I don't think BMP is a 'wrapper' format in the way that TIFF is (or PDF is for that amtter), nor that it can be compressed (I mean, you can ZIP it, but it doesn't **contain** compressed data).
    ChrisW
    @ChrisW: BMP allows the contents of the file to be compressed. I just took a look at the Wikipedia page I referenced, and it supports RLE, PNG and JPEG. (I didn't know it supported PNG and JPEG content - learned something new!)
    coobird
    BMP generally suffers from the same problem as WAV, they're both never standardized and as such are abused for almost everything you can come up with.
    Jasper Bekkers
    +6  A: 

    There are two major categories of images. Lossy and lossless.

    Lossless image formats preserve the image exactly how it was originally saved. These are PNG, BMP, GIF, TIFF.

    Lossy images are compressed and some detail from the original have gets lost. JPEG does this.

    The main differences between the images:

    • PNG supports a wider range of formats from 8 bits per pixel to 24 bits per pixel. These are the mostly used today due to its flexibility and compression.
    • BMPs are generally larger without compression so not optimal for much.
    • GIF supports only 256 colours (8 bits per pixel) including transparency. GIFs also support animation.
    • JPEG (also JPG) compresses your image to hide parts of the image that your eyes can't tell the difference between but causes the image to change slightly, depending on the compression. Images that have lots of complexity in them with similar colours throughout are good for this format.
    • I believe TIFF supports a wide range of pixel formats so they're useful for precise colour matching.
    Gerald Kaszuba
    Jpeg can be lossless and TIFF can be lossy (by being just a container for lossy jpeg).
    PolyThinker
    There are ways to make GIF display 24 bit colors, although these methods are not widely supported, like lossless jpeg.
    PolyThinker
    A 24-bit GIF is really exploiting some ambiguity in the GIF spec and most GIF display programs I've seen (including all browsers) are not very well suited for using this "hack" (the picture will draw very slowly).
    Vilx-
    A: 

    These names refers to different ways to encode pixel image data (JPG and JPEG are the same thing, and TIFF may just enclose a jpeg with some additional metadata).

    These image formats may use different compression algorithms, different color representations, different capability in carrying additional data other than the image itself, and so on.

    For web applications, I'd say jpeg or gif is good enough. Jpeg is used more often due to its higher compression ratio, and gif is typically used for light weight animation where a flash (or something similar) is an over kill, or places where transparent background is desired. PNG can be used too, but I don't have much experience with that. BMP and TIFF probably are not good candidates for web applications.

    PolyThinker
    A: 

    What coobird and Gerald said.

    Additionally, JPEG is the file format name. JPG is commonly used abbreviated file extension for this format, as you needed to have a 3-letter file extension for earlier Windows systems. Likewise with TIFF and TIF.

    Web browsers at the moment only display JPEG, PNG and GIF files - so those are the ones that can be shown on web pages.

    Gnudiff
    Browser support isn't limited to JPEG, PNG and GIF: formats such as BMP, ICO, SVG and XBM -- amongst others -- are natively supported in many browsers.
    scronide
    Fair enough, I should have said that JPEG, GIF and PNG are the formats that are supported by majority of browsers.
    Gnudiff
    +1  A: 

    Since others have covered the differences, I'll hit the uses.

    TIFF is usually used by scanners. It makes huge files and is not really used in applications.

    BMP is uncompressed and also makes huge files. It is also not really used in applications.

    GIF used to be all over the web but has fallen out of favor since it only supports a limited number of colors and is patented.

    JPG/JPEG is mainly used for anything that is photo quality, though not for text. The lossy compression used tends to mar sharp lines.

    PNG isn't as small as JPEG but is lossless so it's good for images with sharp lines. It's in common use on the web now.

    Personally, I usually use PNG everywhere I can. It's a good compromise between JPG and GIF.

    Dana Robinson
    BMP can be RLE compressed... That's not much, but effective on simple images. It is also a proprietary (Microsoft) format.
    PhiLho
    The GIF patent expired in 2004.
    Dour High Arch
    TIFF is hugely popular among people who need lossless quality (artists). Also it's great for compressing monochrome images, thus it's the one of the most popular formats for digital fax/document scanning software.
    Vilx-
    In the latest spec's BMP also allows contents to be PNG or JPEG compressed.
    Vilx-
    +1  A: 

    PNG supports alphachannel transparency.

    TIFF can have extended options I.e. Geo referencing for GIS applications.

    I recommend only ever using JPEG for photographs, never for images like clip art, logos, text, diagrams, line art.

    Favor PNG.

    Roger Nelson
    +1  A: 

    The named ones are all raster graphics, but beside that don't forget the more and more important vectorgraphics. There are compressed and uncompressed types (in a more or less way), but they're all lossless. Most important are:

    Peter