JPG, Gif, and PNG oh my.
In most cases you’ll use JPG for compressing images for your website, but there are other formats that are useful for certain applications. Here are a few formats and bit about each of them.
GIF
GIF is one of the more common image file formats in existence. Gif is a lossless compression process that supports only 256 colours and is more suited for simple images with few colours and small text; it also supports animation, and transparency.
JPG
JPG is the other common image file format, and the one websites use more often then not. It’s a lossy compression technique that is suited best for photo’s and complex graphics. The process discards information the eye cannot detect and supports 16 million colours. JPG however is not ideal for line drawings, lettering, or other simple images due to the fact there is less for the process to discard.
PNG
PNG’s are an emerging format online, hampered by browser support from becoming dominant despite it’s advantages to the other formats. It was developed as an alternative to the GIF format due to patent licensing issues. Some of the benefits PNG brings along are improved compression over GIF, more transparency options such as alpha channels (gives control of fades into the background), more colours comparable to JPG, and doesn’t degrade when re-saving.
SVG
SVG is another up and coming image format designed with vector graphics in mind. The image can be scaled indefinitely without loss of quality or pixelation, while other formats don’t fare so well. The features include transformations, clipping paths, alpha masks, filter effects, and template objects. Support for this format is however limited because of the need for a plugin to view the format in Internet Explorer.
Written by John Leschinski from Leschinski DesignPosted on October 6th, 2007 and filed under Design & Coding
Do not forget to subscribe to our RSS feed for updates
13 Responses to “JPG, Gif, and PNG oh my.”
Author comments are in a darker gray color for you to easily identify the posts author in the comments
Comments are closed.
Comments are closed since this post is older than 30 days. However, you can continue this discussion in our popular Blogging Forums
Blogging Tips Sponsors
Blogging Tips Newsletter
Sign up to the Blogging Tips Newsletter for Free! What have you got to lose?
Like I said, they are hampered by browser support. It’s allways nice when people agree with me.
I know I mentioned this before, but I see the header has been swapped out for the white-background version and it’s still a JPG. By your own advice, it’s really a perfect canidate for a GIF.
Well I said small text, but I think it probably would benefit here as well. There are an awful lot of compression artifacts in the logo, but I don’t do the design round these parts.
Chris Coyier – I’ve updated the top logo to a gif file
One downside of PNG is that it doesn’t support animation. Would be great if it did tho.
G-Man
Yay! It looks a lot happier.
Other than animation, I can’t imagine why anyone would use a GIF today.
Even IE6 has solid 8-bit PNG support, which gives you everything in GIF, but with a smaller file size. The only thing IE6 was missing is alpha channel support for 24-bit PNGs.
Nice explanation of the image file formats. I looked all this up once before but it sure is great to have a nice summarized write up. Nice work!
I love PNG.
Great posts and great explanations of everything.