Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


Real World Example File Formats

April 1, 1998

JPEG: A super compressed file format.

Joint Photographic Experts Group wrote the compression standard for the JPEG file format. In the previous section, the Improved Image was saved at JPEG Quality set to Medium 3 as shown in the sample below.

The characteristic JPEG compression artifact can be seen in the Improved Image. I call the look mushy.

A higher quality setting would have reduced the artifact but the file size would have increased.

JPEG Quality 3
Though the settings are numeric, they are not absolute. The image size and characteristics interact with the JPEG compression process. Testing is a must with JPEG.


Photoshop JPEG Descriptive Settings: A Great Guide.

JPEG is universal but the setting indicators are not. Photoshop has excellent descriptive settings. The results coincide with the description of Low, Medium, or High. Do some testing on your own and see for yourself.

  • 0 to 2 are LOW, avoid if possible.
  • 3 to 5 are MEDIUM, a lot of web images require this.
  • 6 to 7 are HIGH, better settings for better quality.
  • 8 to 10 are MAXIMUM, best settings to use.

Paint Shop Pro™ is a small graphics application that I use often. Unfortunately, its JPG setting method is gruesome by comparison. Paint Shop Pro's JPEG settings range from 1 to 99 with no clue as to image quality.

I use Progressive set to Scan 3 for web images. This allows the image to build in focus from soft, medium, to sharp. The Scan 5 setting looks more like a down-loading error.


CompuServe GIF: Graphic Interchange Format.

A great format for saving graphic files. In this case, Paint Shop Pro™ is my application of choice for handling GIF files. Especially the GIF transparent background color option.

The sample Photoshop menu above has a torn edge look. This would not have been possible without the GIF transparent background color option.

A major draw back to the GIF format is its limited 256 color range. Ordinarily, photographic images do not survive such a radical color palette reduction.

I have seen some pictures reduced to a GIF and they were quite passable. The process can require labor intensive manual color palette manipulation.

Try it and you will learn a lot about working with palettes. GIF animations using photo realistic images will demand photo images to be reduced to 256 colors.


JPEG: Staggering Power.

12KB: JPEG set to Medium 5. Stevie saved as JPG 13KB: GIF file size is bigger. Stevie saved as GIF
  • Full color JPEG file size is 12 KB.
  • The 256 color GIF file size is 13 KB.
  • The LZW compressed TIFF file size is 115 KB.
  • The uncompressed TIFF file size is 232 KB.
This is only one example. An image with differing characteristics will yield different file size relationships.


TIFF With LZW Compression

The TIFF file format is excellent for archiving or transferring photographic images. PC's and Mac's share TIFF files easily. LZW is a no-loss alga rhythm so nothing is sacrificed for file size reduction.

Regardless of the setting, JPG images suffer from loss of data. This type of compression format is referred to as Lossy. I do not recommend JPEG for archive purposes. Photoshop Filters work best on high quality images.


Click Next for Buttons using a familiar shape.

Additional Resources:


Real World Example Visual Illusion
Introduction to Web Design with Adobe Photoshop | Table of Contents
3-D Buttons In Three Steps


Up to => Home / Authoring / Graphics / Tools / Photoshop




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers