we are pushing the boundaries of what we can do to create rich graphics
that do not take forever to download. It is important to know
in order to achieve successful Web graphics design. Knowing when to use
versus a GIF, and how to design the images to make the
most of their
various compression schemes, will arm any Web professional
with the power
needed to develop effective Web sites.
- JPEG is
used as a first choice for photographic images.
24 bit color (displays up to 16.8 million colors).
does not support transparency or animation.
- Uses lossy
compression (once you saved it, you cant get the info
Graphics by Yale Web Style Guide
youve opened a graphic, view it a 100% to verify the size on a
browser, go to image size, down sample the image to ensure
it only has
72 dpi (check resample box).
Unshark Mask Filter: Sharpening the image makes it look
you can control the sharpening values. However, this comes at a cost.
JPEG compression engines like soft edges and applying the
increases the contrast of edges, thus, increasing the file
- To view
the compression results, close image and reopen it
be seen until you do this). Dont need to do this if
you use Fireworks
or ImageReady. In these programs, you are able to preview
image side by side the compressed version.
- Turn off
Photoshop previews: Web graphics dont need them!
Files. Change image preview to Ask when saving.
In the Save
dialog box, uncheck all the image previews. This can bring the file
size down by 50%. Also, change "Appended File Extension" to
Always and turn on the Use
- A progressive
JPEG usually yields the smallest file size. However, it may
well in all browsers or platforms.
The Real File Size
- MAC users:
select image from the finder menu. From File menu, choose
Get Info (command
I). Look at the number in parenthesis, NOT the number of K on disk.
There are 1024 bytes in a kilobyte. If file size says 25K,
it is about
- Use freeware
(such as DropImage) which display actual file weight and
arent the only weight in a page, text is too.
the actual entire page size at the bottom of the screen.
Used for graphics with solid colors (line art, logos, text,
for photographic images you want to animate, or for images that use a
8 bit color (256 colors)
transparency (1 bit)
- Can be
File Format by Yale Web Style Guide
- GIFs use
Web dithering: alternating colors of pixels in a given row,
a significant amount of graphic file size. If using a gradient, it is
best to apply it vertically rather than horizontally.
- 4 GIF
Rule: GIFs download in groups of four (this also applies to
- Safe palettes
Lock down colors, (drop
colors to minimum needed)
applied vertically (smaller size).
- Uses lossy
and lossless compression
- Like JPEG,
PNG supports 24 bit color (displays up to 16.8 million
true 8 bit transparency via an alpha channel
- Not yet
supported by all browsers