Practical Ecommerce

Video Tutorial: Choosing the Right Image Format

View Tutorial Choosing the right image format for publishing images on the web can be tricky. After all, you don’t want to spend hours and hours cleaning up a product image and making it look irresistible to your customers, only to have it distorted and ruined when you save it in a web format. More importantly, you want to make sure that your image file sizes are not too large, causing long download delays and potentially turning away customers.

For the most part, the image formats used for web publishing are JPG, GIF, and PNG, with each format having its own strengths and weaknesses. For example, images in the PNG format will usually have a larger file size than their JPEG or GIF counterparts. However, PNG images offer enhanced transparency support that are not available with the other formats. Conversely, the JPG format does not offer any transparency support at all, yet offers the best compression option for complex images such as photography. Images with limited colors and complexity lend themselves to the GIF format.

Whether you are designing an entire website layout, creating product images, or just publishing a photo album it’s important that your images have the best balance that you can get between file size and visual quality. This tutorials aims to illustrate what to look for when deciding on an image format.

NOTE: In order to publish this tutorial, the video itself has been compressed, which can cause distortions that make some of the details in the tutorial difficult to see. Please download the ZIP file below to view each of the images in GIF, JPG and PNG format on your local machine.

Software Used: Adobe Photoshop CS2

Additional Files:

View Tutorial

This video tutorial requires Flash Player version 8 or above.

Brian Getting

Brian Getting

Bio   •   RSS Feed


Sign up for our email newsletter

  1. Legacy User May 3, 2007 Reply

    I love your tutorials. Keep 'em up. The explanation of the png format was helpful. I was familiar with the format but not with its advantages.

    — *Jim King*

  2. Legacy User May 5, 2007 Reply

    Terrific tutorial, Brian. Got to figure that will be mighty helpful to quite a few folk around here. Do you accept digital beers for a job well done?

    — *Brendan Gallagher*

  3. Legacy User July 10, 2007 Reply

    Great tutorial. I'm wondering if PNG files are suitable for use in HTML e-mail broadcasts, such as e-newsletters. Anyone know if they display well in Outlook, for instance?

    — *Jamie Gooch*

  4. Legacy User January 6, 2008 Reply

    Hey I've been trying to guess through what I should know about some of the image-saving for web questions… and although it was a relatively basic breakdown I did get some good ideas from watching it. I've always just picked the from the sub-menu that gives you the 5 options – jpg, gif, png-8, png-24, and wbmp… and had no idea what i'm doing with the detail options. I really wish there had been more coverage of some of those details but now I'm going to use your method and just use defaults from the alternative sub-menu that you had been using. Well I am also getting alot from the CSS video-tutorials, so thank you much and keep up the great lessons!

    — *Brian B*

  5. Legacy User April 30, 2008 Reply

    Great tutorial again!!!

    — *Jordan P*