Custom Graphics
Optimized Graphics
Custom graphics are a challenge for the most seasoned professional.
It seems as though everyone that uses artwork for any type of media wants
different formats and requires different resolutions for the best outcome.
In fact we can supply 80+ different formats and file types. Therefore,
we are going to limit this discussion to graphics types most widely used
on the Internet and provide a tutorial on custom graphics optimization
for the web.
Commonly Used Graphic Formats
The most commonly used graphic formats for web pages are:
- Joint Photographic Experts Group (jpeg, jpg)
- Graphics Interchange Format (gif)
- Portable Network Graphics (png)
Others graphic types such as bitmaps (bmp) and scalable
vector graphics (svg) are used but are not as popular, being directed
toward more specific applications. Portable network graphics mentioned
above are gaining in popularity due to the ease in handling and good
optimization capabilities. Not all Web browsers can render PNG files
at this time however.
JPEG and GIF Comparison
It is important to understand the difference between the
formats and their strengths and weaknesses so that informed decisions
can be made. By far, the most commonly used - graphic formats for Internet
Web Pages are JPEG and GIF. Therefore, we have concentrated this discussion
to those 2 formats.
Below you will see the comparison between these 2 formats
at 10% incremental loss values and other manipulations with their relative
digital size. Please note that these are simple optimization comparisons
and do not attempt to touch on other digital re-mastering techniques
involving modifications in; hue, brightness, contrast, effect lenses
or or any other technique that may be applicable to a certain interest.
When finished viewing, click on any picture to return
to top of page.
| QUALITY AND
DIGITAL SIZE COMPARISON BETWEEN JPEG & GIF IMAGES |
 |
| "Devil's
Trumpet With Morning Dew" by Ken Webster |
| 2.1 Mp (Mega-pixel) original digital photograph
downsized to 500x391 pixels, Digital Size; 258Kb JPEG |
 |
 |
| JPEG, Full Color, 0% Loss, 72Kb |
GIF, 256 Color, 0% Loss, 34Kb |
|
|
| JPEG, Full Color, 10% Loss, 24Kb |
GIF, 256 Color, 10% Loss, 35Kb |
 |
 |
| JPEG, Full Color, 20% Loss, 14Kb |
GIF, 256 Color, 20% Loss, 26Kb |
 |
 |
| JPEG, Full Color, 30% Loss, 11Kb |
GIF, 256 Color, 30% Loss, 21Kb |
 |
 |
| JPEG, Full Color, 40% Loss, 9Kb |
GIF, 256 Color, 40% Loss, 18Kb |
 |
 |
| JPEG, Full Color, 50% Loss, 7Kb |
GIF, 256 Color, 50% Loss, 16Kb |
 |
 |
| JPEG, Full Color, 60% Loss, 6Kb |
GIF, 256 Color, 60% Loss, 15Kb |
 |
 |
| JPEG, Full Color, 70% Loss, 3Kb |
GIF, 256 Color, 70% Loss, 14Kb |
 |
 |
| JPEG, Full Color, 80% Loss, 2Kb |
GIF, 256 Color, 80% Loss, 13Kb |
 |
 |
| JPEG, Full Color, 90% Loss, 2Kb |
GIF, 256 Color, 90% Loss, 12Kb |
GIF
and JPEG Comparison Results
Three important differences become apparent
when viewing this side-by-side graphic comparison:
1. The JPEG
format becomes more pixilated with loss and the GIF format becomes
more grainy with loss.
2. The digital
size of the JPEG starts out larger than the GIF for similar graphic
quality but decreases much faster per given loss. At 20% loss (an
acceptable optimization value for most Web Page graphics) a JPEG
can be almost half the size of a GIF at comparable viewing quality.
Note that the JPEG went from 72Kb to 14Kb (an 80% optimization factor),
while the GIFF was reduced from 34Kb to 26Kb ( a 24% optimization factor)
within the same 20% loss.
3. It is also important to note that JPEGs render
blends and vignettes more gradually than GIF's making them more useful
for photo optimization than GIF's This is dramatically demonstrated
when we start removing colors from GIFs to reduce the digital size of
the file (below): |
 |
 |
| GIF, 256 Colors, 0% Loss, 37Kb |
GIF, 128 Colors, 0% Loss, 28Kb |
 |
 |
| GIF, 64 Colors, 0% Loss, 21Kb |
GIF, 32 Colors, 0% Loss, 16Kb |
 |
 |
| GIF, 16 Colors, 0% Loss, 11Kb |
GIF, 8 Colors, 0% Loss, 8Kb |
 |
 |
| GIF, 4 Colors, 0% Loss, 5Kb |
GIF, 2 Colors, 0% Loss, 2Kb |
Customer
provision of graphics and pictures is preferred when cost is a strong
consideration. Our client submission preference is in a digital format
through e-mail or on CD. If provided in a "hard" format such
as a paper photograph, we will scan, digitize and digitally re-master
for optimal Web performance. All final product is digitally remastered
for size, optimal download performance and presentation. Mountain Eagle
also offers "On-Site" digital photography.
Mountain Eagle has some of
the best PC software for creating custom graphics and a broad network
of highly skilled Mac based graphics artists to draw on for a complete
range of expertise. Custom Graphics are usually more expensive and Web
Sites with custom graphics throughout will reflect extended costs in
the quote. We are prepared to help consult with clients to determine
where custom graphics are required to achieve the desired impact while
keeping a lid on overall costs.
As more offices and individuals
migrate toward faster Internet service provision, a Website's graphic
intensity presents less problem where download time is a consideration.
A Web Site intended for multinational appeal, especially where developing
countries are targeted should continue to address download time concern
with high regard.
More
about Graphics on our Webmasters Resources Pages
More
about Digital Photography on our Webmasters Resources Pages
|
|
|
