|
|
home > graphic
design > graphic formats
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 tranparency
- 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:
- Lowest quality possible
- Save as progressive
|
navigation