graphic formats
Graphics on the web can hugely add
to the visual effect of a web site, but they also add to the download time. Web
graphics can be static, animated or photographic. These are usually either gif,
jpg or png file formats.
It is virtually impossible to "teach" on-line
how to create graphics, it takes both creative talent as well as
knowledge of the tools. Most tools provide both a within-product
tutorial as well as a booklet. You can also learn a lot from the "Help" menu
in the software. There are some specific Photoshop tutorials
here.
graphic formats
gif
-
8-bit
colour
-
Compresses
solid areas
of colour and preserves detail, like logos, or illustrations
with type
-
Reduced
amount of colours and interlaced for faster download
-
Support
transparency
-
Also used for
animated graphics
jpg
-
24-bit
colour
-
Preserves the
quality of brightness and hue found in photographs
-
Also used for
continuous-toned images
-
Can be saved
as high or low quality
-
A
progressive jpg file can also be used - low-resolution version of image
appears while the full image is downloading
-
Don't support
transparency
png
-
png-8
supports 8 bit colour
-
Compresses
solid areas
of colour
-
Preserves
sharp detail
-
Supports
transparency
-
More advanced
compression than gif
(see above) - can be 10-30% smaller file size than gif
-
View
optimized images in gif and png-8 format to compare file size
-
Only
supported by version 4+ browsers
-
http://www.w3.org support it
in the HTML 4 specification over gif (because the gif format is owned by
CompuServe)
-
Read more
about png from w3.org here:
http://www.w3.org/Graphics/PNG/
basic pointers
-
Keep the file
size to a minimum
-
Always use
RGB colour
-
Use the
web palette (216
web-safe colours)
-
Keep the
physical size small - larger graphics look clunky on a web page
If gif:
-
Save with as
few colours as possible
-
Save as an
interlaced .gif
-
Make the
background colour (where applicable) transparent
If jpg:
Save as progressive
w
Website design by the morenmore group
FREE Java
Local Business & Entertainment Links +
Accommodation & Shopping Click Here!
|