|
The Graphic Format
On the Internet, two different image file formats are used for the majority of images: GIF and JPEG.
Graphics programs can convert pictures from GIF to JPEG. The primary difference
is compression type. Note: The GIF-Format is more suitable for graphics
such as surface textures, logos, etc. The JPEG-Format is more suitable for photographs.
GIF
GIF stands for Graphics Interchange Format - It is widely used online due
to the high compression performance it employs. Due to copyright problems with
the GIF format, the professional world is in search of an alternative to the GIF format.
Specifically, there is the new format, PNG, which is not supported by browsers
at this point in time. For this reason, the GIF format is still used on the
Internet without considerable competition.
The compression performance of the GIF format is based on the LZW algorithm (named after
the developers Lempel, Ziv, Welch), which is also used for the compression of other files.
Through the LZW-method, all repetitions of byte samples are coded and stored to save space.
Therefore, the GIF format achieves the best compression rates if the picture has larger
single-colored surfaces or repeated patterns. GIF format achieves bad rates, however,
for pictures with color processes.
You can determine a "transparent " color and then place pictures in the " Interlaced" mode.
Additionally, you can store a series of single pictures in a GIF file (this is how the GIF
animations are implemented). The GIF format stores pictures with the maximum of 256 different
colors. An image-processing program, which creates the GIF format, must first reduce the
picture to a pallet of 256 colors. The number of different colors, however, still does
not state which colors of the complete color space are intended.
This can differ with each GIF picture. In most pictures certain colors prevail strongly,
consequently, the reduction to 256 colors does not noticeably degrade the quality during
the screen display. The color palette of a green meadow with white flowers, for example,
will contain many green tones, some white or gray tones and practically no blue, red or
yellow tones.
Interlaced GIF
Interlaced GIF information in the interlaced mode is not sequentially stored, rather
first the first line , then the eighth and so on. Afterwards, the second line, the
ninth etc.. In this way a rough version of the picture becomes visible with the
display of an interlaced GIF picture after a short time.
Transparency
Impressive background effects can be designed using pictures that are not simply
rectangular, but outlined with irregular or rounded, smooth shapes. This is achieved by
defining certain colors as "transparent". Transparency can be specified in most
graphics programs.
Mini-Animations
Small animations are commonly found on web sites. Using the GIF format several pictures
can be stored in one file. A special program displays the pictures one after another on
the monitor, thus creating animation. Such a display function is included in the current
versions of Netscape and Explorer
JPEG (or JPG)
The JPEG format was developed by the Joint Photographers Expert Group. The
JPEG compression does not operate completely loss-free. However, it tries to
remove, using a mathematical analysis procedure, the information from the picture
that is not relevant for the image quality. In this way the JPEG procedure, without
visible degradation in quality, often achieves very high compression rates.
The JPEG algorithm only operates on the basis of real color pictures
(True Color = 16 million colors). The user can indicate the desired
compression rate before the conversion. The higher the value, the more
the quality is degraded. A general specification for the ideal compression rate
cannot be made because the level is dependent on user motive and image content. Trial and
error is the only way to find the ideal setting for each image.
Which tool to use?
Every HTML designer needs some tools for picture manipulation. Traditionally Adobe Photoshop has been the king of image tools,
and Photoshop 6 is no exception - a powerful tool with hundreds of functions. Corel is another popular tool at this same level.
Paint Shop Pro is another good choice, and is considerably less expensive than these programs. Take a look at the company sites,
and try them out - each offers a trial download version for your review:
Every good image editing program has a feature which represents the
output picture and the compressed picture next to each other. With a
sliding control you can change the compression rate; the result is
represented immediately in real time in the JPG window. Additionally, the size
of the compressed file is displayed.
HTML Tricks
The most important property of an internet graphic is its loading time. The most beautiful
homepage is useless if everyone aborts the loading procedure because it takes too long.
Note: Graphics should never be bigger than needed.
Using the HEIGHT and WIDTH attributes of the IMG -tags, the dimensions
of a picture can be controlled. If only one of the two attributes is specified, the
browser adapts in such a way that the aspect ratio of the figure is
maintained. An enlargement entails a degradation in quality. If a reduction becomes
necessary, then the original picture is obviously too large. In this case, the
picture should be reduced using a graphical editor. This will reduce the amount
of memory the picture requires.
Cache
Once a picture has been loaded, the browser keeps the picture in cache and it is
not necessary for the server to read the file again if the same page is
visited. This means that a picture already transferred can be used several times, without
increasing the data transfer time. This applies to the use of the same picture on
multiple HTML pages. If you equip all documents of your site for example with a logo or with a
recurring graphic, the image files concerned will only be retrieved once while
actually being displayed several times.
Shorten the Download Time
In order to represent the layout of an HTML page, the browser needs information
about the size of the used pictures. If the actual sizes of the pictures are
indicated using HEIGHT and WIDTH, then the dimension of the picture area is already
known after the transfer of the HTML code. This allows the browser to calculate the layout
of the page before all the pictures are read. Without the
specification of the dimension of a picture, the browser has to read all the pictures
before the final page appears.
This technique allows the visitor to read the text on the site while the
browser is loading the pictures.
Design Resources:
Photo and image resources, color wheels, design principles and
"cool sites":
useit.com: Jakob Nielsen's Website
Maybe the single most important site on the most important web site design issue - usability. You may disagree with Jakob Nielsen,
but his studies and findings are not to be overlooked. Be sure to check his associated site -
Usable Web
"a collection of links about human factors, user interface issues, and usable design specific to the World Wide Web."
Web Pages That Suck
"Web pages that suck" is a series of critiques of poor Web design. The examples are wonderful(ly bad)
and our find ourselves in agreement with the author's analysis about 95 percent of the time.
CoolHomePages.com
THE best site for new, cool designs, in a range of helpful categories. Very cool indeed.
Communication Arts
Communication Arts is the leading industry publication on the design arts, and offers
coverage now on web site design issues as well.
lynda.com
Lynda Weinman has been standing her ground against the design
tyranny of html since there were browsers. And she's been packing
book shelves with more quality books on the subject of web graphics
than most humans can read. Visit her site for her tutorials and
inspiration.
The Remedi Project
Break your heart. Nobody else does stuff this cool...
paletteman.com
This is a great site for playing with and creating different color
palettes, very intuitive and easy to use.
ArtToday
All the clip art you could possibly want and lots of images. We're
not totally thrilled with the images (pick and choose carefully).
On the plus side it's an easy site to register for and use and,
well, free is free.
Free Graphics
Boasting 494 graphics links including links to wallpapers, free
software, accessories, free clip-art, and many tutorials. If you
could have access to only one graphics web page....
Visibone Color Lab
Very cool online tool for testing color combinations. Not only
great for color issues, but a terrific example of DHTML at its
most effective.
Gifbot
If you don't have PhotoShop 5/6, or Fireworks, chances are your
images are bigger than they need to be. Big image files are the
leading cause of slow web sites - don't let your site discourage
visitors with long waits. NetMechanic's GifBot is a great program
for downsizing your images - compare your original with compressed
versions, and save the one you like. Free!
|