Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Monday, May 12, 2008
Training & Education
Video Tutorial: Choosing the Right Image Format
JPG, GIF and PNG each have strengths, weaknesses
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 irresistable 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: PS_Tutorial_Images.zip
Click the image below to launch the tutorial. 
This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Wednesday, May 02, 2007
Comments:
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?
Posted by: Brendan Gallagher
Saturday, May 05, 2007
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?
Posted by: Jamie Gooch
Tuesday, July 10, 2007
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!
Posted by: Brian B
Sunday, January 06, 2008
Great tutorial again!!!
Posted by: Jordan P
Wednesday, April 30, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Brian,
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.
Posted by: Jim King
Thursday, May 03, 2007