Images Optimized for Web Distribution

From MODwiki

Navigation Shortcuts

MODwiki Table of Contents (Main Page)

1 Overview
2 Guidelines
3 Resources

[edit] Overview

Images are certainly a media type ubiquitously displayed and downloaded on-demand from the Internet via static and dynamic web pages. Just like text documents and PDFs, images and their Internet MIME file types are either pre-configured to be part of a web server's preferences or IT staff add the MIME types as a matter of course.

As more individual households, businesses, and organizations install broadband connectivity to the Internet, the size and quality of images that can be posted, displayed, and downloaded quickly will increase. Fortunately, the days of providing postage-stamp size images with reduced color palettes are behind us, for the most part, but not completely.

A handful of file formats are the most prevalent in optimizing imagery and graphics for the web. They are JPEG, JPEG2000, GIF, and PNG. The RESOURCES section of this webpage provides URL links to sites explaining these file formats and MIME types.

[edit] Guidelines

Unfortunately, there are not unlimited amounts of bandwidth to all Internet users, including those accessing the World Wide Web via cell phones, PDAs, and other mobile devices. The primary directive for anyone creating and posting image items to a web page is to optimize the image for efficient display.

Optimization means that you do not post full quality, full size images, regardless of file format. Images from digital cameras or flat bed scanners are far too large for Internet distribution (unless full quality imagery is part of a specialized graphics or photographic stock service). Generally speaking, imagery must be reduced in its physical dimensions (horizontal x vertical pixels), reduced in the total number of possible colors that are saved with the image (palette optimization), or compressed using a variety of data-reducing file formats, algorithms, and schemes.

For a quick overview of these image optimization techniques, access Adobe's education materials at...

http://www.adobe.com/education/webtech/CS2/unit_graphics1/gb_home.htm

As well, the RESOURCES section for this web page contains numerous website guidelines on image opitimization for web-based images.