Home | Toolshop | Guides | FAQ's | Inside |
Submit Corner Logo
Browse Submit Corner

Submit Corner : Guides : Bandwidth Guide : Making Lightweight Images

Toolshop

Assessment Tools
Keyword Thesaurus
Link Popularity Tracker
META Tag Generator
META Tag Scanner
Robot Generator
Submit Engine
Top Keywords
Word Tracker

Guides

META Tags
Description Tag
Keywords Tag
Revisit Tag
See Complete List

Search Engines
Google
Yahoo!
Overture
See Complete List

Site Improvement
Image Tags
Title Optimization
Effective META Tags
See Complete List

Software Packages
Ultimate Demon
SENuke XCr
See Complete List

Website Assessment
Editor's Viewpoint of Directories
Assess Your Site Indexing
Who's Linking To You
Competitor Identification

Bandwidth Conservation
Background Images
External Javascript
Optimize HTML
See Complete List

FAQ

Our Recommendations
Read FAQ

Webposition Gold - Download Now!

Inside Submit Corner

Advertise
Linking Info
Privacy Policy
Rave Reviews
Terms of Use

Making Lightweight Images
By Submit Corner
Tell a Friend About This Page

Overview: Cut out unnecessary colors, shades and other data from your GIF/JPEG's to create lightweight images.

Probably the easiest way to cut wait time and bandwidth costs is to simply decrease file size of your web pages. The easiest way to accomplish this is to trim out excess components from your images. This tip presents to users how to filter out unnecessary colors, compression, and a comparison between GIF vs. JPEG files.

Filtering Out Colors

Avoid Interlacing Background Images
Graphic applications commonly save GIF files with more colors than needed. Commonly, GIF files will use the maximum number of graphics allowable (256 colors) and these excess colors get saved throughout your GIF files. By simply editing your image preferences to reduce the number of colors used from 256 down to the bare minimums (usually multiples of 16 are acceptable, such as 16, 32 or 64 colors), web designers can usually cut out anywhere between 15-60% of the image file size. When these savings are tallied up for each image used, the bandwidth savings can become quite large.

In addition to color reduction, the actual palette size is reduced. For example, a 256 color image consists of an 8-bit palette. Being able to reduce the palette from 8 to 6 bits will cut the number of colors from 256 down to 64 and strip up to 25% of the file size. As a general rule to remember, the less colors used, the smaller file size can be accomplished. Below, we show a table of the palette bit number in comparison with the maximum number of colors allowed for the associated palette. We recommend changing your color depths with one of the suggestions given below to max out each palette you use.

Bit DepthNumber of Colors
12
24
38
416
532
664
7128
8256
(GIF Maximum)
(JPEG Minimum)
2416.8 Million
(JPEG Only)

This color reduction technique however will not work with JPEG's since JPEG's use the full color spectrum for each image. As a result, only use JPEG's for high resolution images (over 256 colors) and GIF's for lower definition images.

Image Compression

Although each graphics application varies in the setup preferences, there exists many compression options that web designers can take advantage of in order to strip down file size. The easiest example is to strip away any comments embedded in GIF files. Additional options such as image quality to file size ratios can also be manipulated in order to determine the best mix between quality and quantity for each image. The best suggestion we can make here is to read up on your graphics application compression options because each application varies and there is no standard. Compression options are usually globally defined from a preferences menu or general customizations menu.

GIF vs. JPEG Comparison

Many webmasters struggle to decide whether to select GIF's or JPEG's for their images. Below, we present to you a comparison between GIF's and JPEG's and make recommendations of which file format to use under different circumstances.

When to use GIF'sWhen to use JPEG's
  • When using small images such as icons and thumbnails
  • Using low-density images which uses a small spectrum of colors (up to 256)
  • Clipart images that do not have deep detail
  • When using large images such as photographs
  • Using high-density images which uses a large spectrum of colors such as deep resolution quality images
  • Photographic images that have a large spectrum of colors (256 or more)

Sponsored Links



Latest Headlines

All links open in a new window
View All Headlines

Searches for Holidays to Africa Overtake North America and Close Gap With Europe
Source: Film Imaging

Google-backed DMARC system aims to block phishers
Source: ZDNet UK

Book reviews: Google books
Source: ZDNet UK

Searches for Holidays to Africa Overtake North America and Close Gap With Europe
Source: DMN Final Cut Pro

Earthquakes, Demi Moore and ACTA drive Google searches
Source: Yahoo Philippines News

Stop poaching staff, Jobs told Google
Source: Cyber India Online

Google, Facebook, Twitter Execs Grilled By UK MPs On Privacy
Source: Yahoo! Finance

There are 23 additional news headlines. Click to View All Headlines

Copyright ©2000 - 2009 Wired 2000 Corporation
All Rights Reserved
Privacy | Terms of Use