|
Graphics and Images
Back to Web
Design Tutorials
 The internet was once known as the
great wait. Waiting for WebPages to load. One of the important keys I learned
when designing pages professionally for businesses is, people don't want to
wait around for a page to load. If it doesn't load quickly, then sometimes
people will think the site isn't working and/or poor construction. Graphics
can be a big contributor to this cause. Although, graphics are a great key to
excellent websites. You need to keep in mind how much is too much and how to
compress files to load quickly.
Graphics for the web are usually in 72 pixels per inch. Also know as 72 dpi
(dots per inch) You can create graphics with higher resolution, but for web
use, it is usually not necessary.
 JPG -
Is a glossy, 24-bit color, compression format. You can create small to large
files sizes by saving at different compression levels.
Depending on what image editing
program you use will determine what kind of compression jpg files will have.
GIF (Graphic Interchange Format) - A gloss-less compression format that allows you
to select a palette of up to 256 colors.
GIF compressions are standard 256
and you can most normally choose how you want the palette. I use Paint Shop
Pro 8.x by Jasc Software. I most generally choose the Optimized Octree. This
generates a palette with the colors needed to display the image close to the
original and very high compression. Standard / Web-Safe is actually the better
option. This guarantee your image will be show the way it was designed. It
appears the same on almost all machines but has poor quality.
Helpful Graphic Hints
-
Larger graphics download slow,
not everyone has high-speed internet
-
Make highly compressed images
-
Use thumbnails when possible
-
Use ALT tags, If the user is
reading and sees an image, they will at least know what kind of image is
loading. The ALT tag will
display a text alternative for the visually impaired or users that have a text
only web browser.
Example:
<img border="0" src="Image.gif" alt="Here is the Alt Message If image fails to
load or for impaired users.">
|
