WebWrite:
Writing
HTML and Beyond: |
|
Images
& Graphics for Web Pages:
Images
(tips
& techniques)
Alt
Attribute
• All
images require the ALT attribute.
• On
newer browsers the ALT text will display as a label when the mouse
is moved over the image.
• The
ALT text displays when images are "turned off"
• and
reads as text for visually impaired users who visit the web via audio
readers.
• The
text should be either a description of the graphic for static graphics
or a description of where the user will end up for hyperlinked graphics.
alt="Descriptive
text"
.GIF
v .JPG: Which to choose
• Graphics
that are highly detailed, such as photographs, work better as .JPGs.
• Graphics
that are less-detailed with distinct color differences work better
as .GIFs.
Colors
(for backgrounds, text and links)
Most of these links go to useful color charts.
from lynda.com -
The Browser-Safe Color Palette
Bright colors for links, text, etc. - table showing
hex codes and color names.
Light colors for backgrounds - table showing
color names and hex codes.
Hex colors - color table adapted from Colors
of the Web to remove background and images. These colors are created
with hex codes and color names.
Colors of the Web
- Chart showing hex codes and color names for 140 colors.
Helpful
Web Links: Image and Color Problems - a lot of useful information
Non-dithering Colors - Chart of 256 colors chosen
by Netscape and MS Explorer as standard. They will display alike on
all browsers. This was adapted from the next link. . .
Non-dithering
Colors - Go here for a discussion (warning, lots of adds and images
on this page.
Doug's Home Page (contains
several more color charts)
Web Developer'sVirtual
Library: Color/Colour - for a complete understand of web colors,
go here.
For color accessibility
Visicheck
- check your pages for color blindness readability
Color
dificient vision
Tools for creating and manipulating graphics
The
most often used software for image and photo editing are
Adobe: Photoshop (expensive but powerful) and
Jasc Paintshop Pro (download or CD-ROM, not terribly expensive)
I have
used both. If you can't afford Photoshop, you will be quite happy
with Paintshop Pro. Both can be used to create images, lettering,
etc. Both edit photographs.
Software
sources- Links to sites for 2-D and 3-D Graphics Software
Tucows - Select your system,
look under "Multimedia tools: image editors"
Transparent Images
and Resources
Image
Maps
Strong
hint from the author of this page:
Web editors such as Dreamweaver© or FrontPage© make image
mapping a snap.
Even if you don't ordinarily use an editor, you might want to for image
maps.
Mapedit Source for software.
Clip Art
Tip:
The
best way to find clipart fast is to use a search
engine with the keywords clipart and the name of the image.
Use Google or a "metasearch
engine" such as Profusion
for best results.
Be
very specific about what you want when
you type in your keywords. For example:
clipart
cocker spaniel or clip
art cocker spaniel
This
may get you exactly what you need. Otherwise, you will need lots
of time to browse through many images - ok if you are on a fast
connection and have the time to do it, but other wise...
Links:
When I want clip art I start with Google.
Microsoft
Design Gallery Live is a great source for copyright free images.
You can
also try these, but they may load up your monitor with pop up ads.
Barry's
Clip Art Server
The Clip Art Connection - Web
Page Clips & Resources
Web Designer's
Paradise
|
