GIF, JPG, PNG, oh my! (Which compression format to use for your image)

Discussion in 'Programming & Software Development' started by Defsac, May 15, 2005.

  1. Defsac

    Defsac Member

    Joined:
    Aug 6, 2003
    Messages:
    939
    After seeing yet another text screenshot compressed with JPEG, I decided to get around to making this thread. I've posted it in The Pub because it's target audience is people uploading images, but mods feel free to move it to G&P if you deem necessary. This is a guide recommending which compression method you should use for different types of files to achieve maximum compression and quality.

    JPEG
    JPEG uses a number of different algorithms to compress images. It does not use colour palettes, and as such handles over 16 million colours.

    Good for:
    - Photographs
    - CG images with many different colours

    Bad for:
    - Text (large size compared to palette based images and artifacts appear around text)
    - Diagrams, line drawings and images with large areas of repeating colours (most MSPaint images).


    GIF
    GIF is a palette based compression format, where it stores colour information in an index (up to 256 colours) and references a particular colour in the index for each pixel, compressing the data using the LZW algorithm.

    Good for:
    - Text
    - Diagrams, line drawings and images with large areas of repeating colours.

    Bad for:
    - Photographs
    - CG images with many different colours


    PNG
    PNG is similar to GIF in compression mechanism, except with the noticeable absence of the LZW compression algorithm. It was created because at the time Unisys held patents on the algorithm and charged royalties for programs which saved GIF images. It's more efficient than GIF, so should be used instead if your image program supports it.

    There are two modes, 8bit (which is similar to GIF) and 24bit (lossless but very large for images with many different colours such as photographs). 8bit should be used when saving files to post due to it's reduced size. The pros and cons of the format are identical to GIF's.


    Saving the images
    In Photoshop, images should be saved for internet using the ImageReady component, which can be accessed by going to "File" > "Save for Web". The drop down box on the upper right allows you to change the compression format to be used.

    Using The GIMP, the images can be saved simply by adding a ".png" (PNG) ".gif" (GIF) or ".jpg" (JPEG) extension depending on which format you want to use.

    A more detailed overview (thanks Tanus)
     
    Last edited: May 17, 2005
  2. Cathar

    Cathar Storm Father

    Joined:
    Aug 16, 2001
    Messages:
    6,524
    Location:
    Aussie living in the USA
    JPG for piccies with no fine detail, otherwise PNG all the way baby (8-bit typical, 24-bit when required). GIF is dead.
     
    Last edited: May 15, 2005
  3. GreenBeret

    GreenBeret Member

    Joined:
    Dec 31, 2001
    Messages:
    19,370
    Location:
    Melbourne
    GIF is dead but Internet Explorer (and people who use them) is still alive. :(
     
  4. gurner

    gurner Member

    Joined:
    Oct 29, 2002
    Messages:
    2,923
    Location:
    North Pole - SA
    can PNG do animation??
     
  5. OP
    OP
    Defsac

    Defsac Member

    Joined:
    Aug 6, 2003
    Messages:
    939
    IE shouldn't mess up PNGs too badly, it usually only has trouble displaying images with transparency properly.

    No. Two PNG-based formats that support animation have been created, but they require browser plugins to display because there's no native browser support (with the exception of Konquerer which supports MNG, but there's not a lot of Konquerer users compared to IE, Opera and Firefox). For the time being, GIF should be used for animated images.

    Eventually either MNG or APNG will probably replace GIF for animation, most likely if/when IE and Firefox supports one or both.
     
    Last edited: May 15, 2005
  6. Cee

    Cee OCAU Bikini Brigade

    Joined:
    Oct 29, 2004
    Messages:
    4
    PNG should be an absolute LAST resort for anything online as far as i'm concerned. ESPECIALLY for bloody photoreal images like photos or movie screenshots etc. I've been seeing too many people posting ~600kb PNGs where they would've looked just as good as an ~80kb JPG.

    Stay the hell away from PNG, you e-trendwhores. It's only useful 1% of the time.

    (P.S. This is Admiral posting from girlfriends account, and unfortunately i've left my flameproof suit at home!)
     
    Last edited: May 15, 2005
  7. BloodDonor

    BloodDonor Member

    Joined:
    Sep 3, 2001
    Messages:
    1,594
    Location:
    Invercargill NZ
    png is pretty good for small non lossy graphics on a website ;)
     
  8. thormania

    thormania Member

    Joined:
    Jun 12, 2004
    Messages:
    839
    Location:
    Brisbane
    Not if you want moving things :). Also what someone posted about about the .png is correct. While PNG is lossless and has better compression than JPG when jpg's are set to highest quality. However you can often lower the quality with the jpg and it will look the same and have massive changes in it's filesize. PNG should only be used in my opinion when you need transparent images with proper colours.
     
    Last edited: May 15, 2005
  9. lamcdonald

    lamcdonald Member

    Joined:
    Mar 21, 2003
    Messages:
    1,343
    Location:
    Logan City, QLD
    I use jpg for photos and unimportant text, gif for text/screenshots/diagrams and png for nothing :tongue:
     
  10. OP
    OP
    Defsac

    Defsac Member

    Joined:
    Aug 6, 2003
    Messages:
    939
    Would you be preferring that post in 8kb PNG or 80kb JPG? Even at quality 0 the JPEG is 20kb, and at that level differences are quite apparent:

    80kb JPG:
    [​IMG]
    20kb JPG:
    [​IMG]
    8kb PNG:
    [​IMG]
     
    Last edited: May 15, 2005
  11. Cathar

    Cathar Storm Father

    Joined:
    Aug 16, 2001
    Messages:
    6,524
    Location:
    Aussie living in the USA
    Thank you for taking the time to demonstrate my point so effectively.
     
  12. gurner

    gurner Member

    Joined:
    Oct 29, 2002
    Messages:
    2,923
    Location:
    North Pole - SA
    [​IMG]
     
  13. Rzeractor

    Rzeractor Member

    Joined:
    May 23, 2003
    Messages:
    5,135
    Location:
    Cacapoopoopeepee
    hahahaahahahahaha
     
    Last edited: May 15, 2005
  14. Cathar

    Cathar Storm Father

    Joined:
    Aug 16, 2001
    Messages:
    6,524
    Location:
    Aussie living in the USA
    Removed unnecessary post.
     
    Last edited: May 15, 2005
  15. OP
    OP
    Defsac

    Defsac Member

    Joined:
    Aug 6, 2003
    Messages:
    939
    The image I posted is 467 bytes, the 8kb meant the entire post that I cropped it from was that size.
     
  16. Cathar

    Cathar Storm Father

    Joined:
    Aug 16, 2001
    Messages:
    6,524
    Location:
    Aussie living in the USA
    Mind you - the opening poster was referring to static images, and that's why I replied as such.

    For animated images, which the OP never referred to, yeah, GIF still has a use.
     
  17. hlokk

    hlokk Member

    Joined:
    Jul 18, 2003
    Messages:
    5,112
    Location:
    WA
    Dont PNGs support alpha too? (i.e. 255* levels of transparency)


    *256 if you count opaque as a transparency
     
  18. OP
    OP
    Defsac

    Defsac Member

    Joined:
    Aug 6, 2003
    Messages:
    939
    Yes, but IE doesn't handle them properly without a hack. Microsoft have said the problem will be fixed come IE7.
     
    Last edited: May 15, 2005
  19. hlokk

    hlokk Member

    Joined:
    Jul 18, 2003
    Messages:
    5,112
    Location:
    WA
    but most people who know what png is dont use IE :p
     
  20. OP
    OP
    Defsac

    Defsac Member

    Joined:
    Aug 6, 2003
    Messages:
    939
    People viewing them might use IE though. I'm guessing most of the forum users are using Safari, Firefox or Opera, but we don't want Mr. Chilled to miss out on any images.
     

Share This Page

Advertisement: