Sorting Out the Image Format Jumble
The No. 1 issue when dealing with online images is quality versus file size -- a larger image file size usually produces a good quality image, but it slows download and consequently degrades user experience. From a monetizing sense, slow downloads mean users are more likely to get distracted and leave a Web page prematurely. Less important for smaller-site purposes, although still an issue, is that the larger the file size the more storage and bandwidth you need.
05/03/12 5:00 AM PT
Have you ever wondered what the differences are among the scores of digital image formats out there? Some of the more common ones we see are GIF (CompuServe Graphics Interchange Format) and JPEG (Joint Photographic Experts Group JFIF Format) but what does it all mean, and why are there so many?
Plus, how do you know which one to use for the Web, and how can you take advantage of the different feature sets each one offers? Read on.
Capture the Image With RAW
Select the RAW capture option within your camera or scanner settings. Wherever available choose the "RAW" option when taking photographs with a digital camera because RAW is a virtually lossless, unprocessed capture of data from the camera's sensor.
Saving in minimally compressed RAW means that you will always be able to come back to the data file and manipulate it however you want. By saving in the commonly seen alternative JPEG camera format, you are introducing unremovable, hard-baked processing -- like white balance and contrast -- into the image. Think of saving in RAW as a bit like saving a negative.
The advantage of RAW is also its disadvantage -- in that you do have to post-process it with software like Adobe Photoshop or Adobe Lightroom post shot. Another disadvantage is its large file size.
Using the Image
Be aware of the image's ultimate use. This article is concerned with images for blogs, website shopping carts and so forth.
There are considerations in this medium that are different from those for print.
Quality vs. File Size
The No. 1 issue when dealing with online images is quality versus file size -- a larger image file size usually produces a good quality image, but it slows download and consequently degrades user experience.
From a monetizing sense, slow downloads mean users are more likely to get distracted and leave a Web page prematurely. Less important for smaller-site purposes, although still an issue, is that the larger the file size the more storage and bandwidth you need.
What's desired is high quality in a small file size.
The more pixels or other data, and the more color in an image, the bigger the file. However, the files size can be reduced through compression. The Web browser on a computer screen lends itself to compression that would be unacceptable in large print like a billboard -- garbage called "artifacts" and other degradation appear.
Browsers also have limitations that restrict the types of files they can show, which eliminates most of the 70 or so commonly available file types.
JPG, GIF and PNG
Therefore, once you've captured your RAW image, or acquired through other means other formatted images, like printing industry-standard TIFF from a stock agency, you can concentrate on converting it to the three image file types seen natively in a browser -- that is without plugins like Flash.
The native image file types are JPG (also known as "JPEG"), GIF and PNG.
Choose JPG for Photos
Click on the "File" in the Menu Bar of your image software and then "Save As." Choose the JPG or JPEG option if the image is a photograph.
Here's why. JPEG compression is "lossy," which means the compression algorithm dumps file data that's not necessary for a computer screen browser. Thus, getting rid of redundancy, JPEG provides for small file sizes. However, JPEG allows for 8 bits per color -- which is good.
Drawbacks are few. The principal one is that you can't keep editing and saving JPEGs because quality degrades.
Choose GIF for Graphics
Why GIF for graphics? Again, this format provides a size-beneficial "lossy" compression, but with less color support.
GIF is limited to 256 colors. GIF works well when significant parts of the image have one color. GIF is poor at handling details.
Choose PNG for Screen Shots
Why select PNG for screen shots? PNG is the open source successor to Compuserve's GIF, but unlike GIF, it supports 16-million colors, called "True Color."
Like GIF, it's good for expansive areas of the same color. It's commonly used for screen shots when displaying them within a browser environment.
Want to Ask a Tech Question?
Is there a piece of tech you'd like to know how to operate properly? Is there a gadget that's got you confounded? Please send your tech questions to me, and I'll try to answer as many as possible in this column.
And use the Talkback feature below to add your comments!