[TIPS] How to choose the right image format

     Have you ever thought how important it is to know what image formats you should use for your files when uploading them to your website? Me neither :D , until one week ago, since when I had to use a wireless 30Kb/s internet connection instead of my regular 70Mb/s connection. Sites that were loading instantly now take more then 30-40 seconds to load and all due to the bad image formats that were chosen to save the images as.

     In this post we'll discuss about the 3 most used image formats:

• GIF ( Graphics Interchange Format )
• JPEG ( Joint Photographic Experts Group )
• PNG ( Portable Network Graphics )

     Now, choosing the right format to save the file as isn't an easy thing at all, I can say it's almost an art.

     Here are some "rules":

• Assuming you're using Photoshop, it's never a good ideea to use "Save as" for saving an image file that needs to be uploaded on the web. The good way to save your file is using "Save for Web & Devices" (ALT+CTRL+SHIFT+S).
• There's no "pattern" for saving an image file, each file may need different settings for achieving an optimal quality/size rapport.
• For time-saving result you need to know some basic facts about image formats,presented below.

It's just ONE color, what can possibly go wrong?

     I've created an image to show how big can the size difference be for the same 300x200 black rectangle saved as different formats. (Click the images to view them full size).

     The JPEG-good settings means actually saving the black square as a 0 Quality JPEG.

     As you can see JPEG is not at all suitable for saving one-color images, that's because JPEG type is mostly used for pictures. As you'll see in the following examples JPEG is no good for images that have sharp edges either, but it's very useful for saving regular photos.

     The example above clearly show that when it's for one color images PNG is the king.

     I've achieved this low sizes by manually choosing the number of colors (2) and unchecking features like Transparency for GIF and PNG.

Ok, but who uses one-color images?

     Let's see how the file size is affected by saving in different formats a 300x200 grayscale gradient rectangle.

     Things are totally different now. The PNG-24 format is almost useless because of using 30KB for a simple 300x200 grayscale gradient. GIF and PNG-8 are slightly better but still not good enough. The JPEG format uses only 6KB at 100 Quality.

     What we've learned so far?

JPEGs good for solid colors? NO!

JPEGs good for gradients? YES!

:)
     Let's go on...

So... what's the GIF format good for?

     GIFs are used for saving low-size images that contain only blocks of solid colors (no gradients,blured parts, etc). A good example of what should be an image saved as GIF are logos.

     When you have an image having sharp edges, high contrast, solid colors it's good to use GIF and define your own color pallete that will be used for saving. PNG isn't bad either for this type images, sometimes it's more efficient than GIF, sometimes is not.

     Note how JPEG "hates" sharp edges and will have a huge size in such images.

     Also, if we zoom the JPEG image you can see that artefacts appear near color transitions.

     The artefacts are not so visible in this image, but here's an example from wikipedia where they are:

     I've thought that comparing colored gradients would be useless because the result would be simillar to grayscale gradients, but here's the result:

     Despite the low 9KB PNG-8 uses for this gradient, it's useless for large resolution images due to it's 256colors limit. If you have a large-sized gradiented image the best way to save it it's to save as JPEG.

Finally, let's talk about pictures...

     As I've said before JPEGs are most effective for saving photos that have smooth,natural color transitions.

     Because I've used low resolutin samples (300x200) you can't notice the difference between photos' quality, but if you view this image at it's full size and zoom in (CTRL + +) you'll se them :D.

Still confused?

GIF:

Good for:

• low-resolution images (300x300px and under)
• images containg only solid color blocks
• animated images (not mentioned in this post)

Bad for:

• photos
• high-resolution images that need more than 256colors

JPEG:

Good for:

• photos
• gradients

Bad for:

• images containg solid color blocks
• high-contrasted images
• images containing sharp edges or "sudden" color transitions

PNG-8

• Simillar to GIF, but better when it comes to gradients

PNG-24

Good for:

• keeping the best quality possible
• saving for later edits
• high-quality folio images or presentations

Bad for:

• Uploading to your web if it isn't necessary

     Some useful wikiedia links:

http://en.wikipedia.org/wiki/Graphics_Interchange_Format

http://en.wikipedia.org/wiki/Portable_Network_Graphics

http://en.wikipedia.org/wiki/JPEG

     Hope this article made you understand the basics (and more) of the image file saving.

     Leave your comments or suggestions in the comment section below.
     Also do you think I should change my blog's theme?