Web graphics
Keep graphics under
30K whenever possible...and I don't mean for each graphic, I mean for the entire
page!
Dimensions alone
do not make small graphics, you have to think about the # of colours you are
using as well.
The file formats
to use:
GIF
- best for graphics
with areas of solid colour.
- must be gif
if you intend to do gif animations (must be gif89a in fact).
- gif supports
8 bit colour (often you can use even fewer colours) which uses less memory
and will look good on monitors which don't support millions of colours.
JPEG
- best for continuous
tone images, like photographs.
- supports 24-bit
colour but uses a lossy compression algorithm, so it throws away some information.
- it will often
make smaller images than GIF, however it is not kind to solid colour graphics.
- NEVER save in
jpeg format from another jpeg, always go use the original file.
PNG
- newest format
on the block which means some browsers don't support it.
- it is 24-bit
colour, lossless compression, and supports transparency.
- However it creates
pretty big files and it isn't in widespread use yet.
Tips:
- reuse images
across pages so that they "cache"
- designate the
height and width of the image
- use interlaced
(GIF) or progressive (JPEG) files if you want the image to appear in a rough
version and then fill in.
- Can create some
of your text as graphics so that you aren't limited to system fonts. They
can easily be under 1K per text graphic.
Using Photoshop
to export optimized graphic files
Make sure your files
are 72 dpi!
- In Photoshop, choose File > Save for Web.
- In the Save for Web dialog box, click a tab at the top of the image display
to select a view:
- Original to view the image with no optimization.
- Optimized to view the image with the current optimization settings applied.
- 2-Up to view two versions of the image side by side.
- 4-Up to view four versions of the image side by side.
- Under settings choose GIF or JPEG.
- Define the number of colours for GIF or the quality level for JPEG.
- Use all 4 windows to compare file formats and settings.
- Click OK to save. You will see that your original remains behind unaffected
IF you give the exported file a different name.
