|
|
How to
Prepare Images for Your Web Site – Part 2
Copyright
2002 Herman Drost
When surfing the Web, you will
have noticed web sites where the images load very slowly
whereas other images don’t match with the theme of the
site or appear blurry. Presenting a professional image for
your business means your web site design must be
professional also.
Part one of this article discussed when to use images for
your web site and what image file formats to use on the Web
(www.isitebuild.com/imageoptimization1). In this article
(Part 2), we will discuss how to optimize your images for
the Web.
Image optimization is the art of making your images suitable
for the Web. There is a large difference in preparing your
graphics for print compared to the Web. In print you have to
have as much data as possible to get a good graphic. The
main factors that influence the display of graphics for the
Web, are the size of the file and the screen display quality
of the graphic.
Factors
Affecting Web Graphics
1. File Size
When you design web pages you need to create a balance
between visual appeal and page download time. If your
page has too many images on it, it will take too long too
load and visitors will not stay around to wait.
2. Cropping
This means cutting out unwanted areas of your image.
It decreases the file size and helps visitors to focus on
your
image.
3.
Anti-aliasing
Jagged edges of an image can be prevented by anti-aliasing.
This creates a blended edge around an image.
Because of the extra colors necessary to create the blend,
file
sizes of anti-aliased GIFs are a little larger. Use
anti-aliased graphics in almost all cases, except when
creating
very small type as graphics.
|
Subscribe
FREE to
Marketing
Tips Newsletter
Hosting
Plans from $30/Year
|
4.
Bit Depth and Screen Resolution
Bit depth refers to the number of colors in an image or
the
number of colors a computer system is capable of
displaying.
To calculate bit depth, one bit equals 2 colors, then
multiply
2 times 2 to arrive at each higher bit depth. Quality and
file
size decrease as bit-depth decreases.
New computers support thousands or millions of colors
(32-bit),
but many older color systems can only show up to 256
(8-bit)
colors at a time. This reality imposes limits on the size
of
files and number of colors that can be included in Web
graphics.
Check how your image appears with a 256-color monitor and
a
true-color monitor. Do this on your PC using the
Setting/Control Panel/Display option, then select the
Settings
tab/256 color option.
5. Image Resolution
Monitors typically display data at 72 dpi (dots per inch).
Therefore, always save your files on the Web at 72 dpi.
Always resize your image in your graphics software
before you insert it onto your web page. If you resize its
dimensions when it’s already on your site, it will look
distorted.
6. Browsers
Someone viewing your site is subject to a completely
different result depending on which browser he is using.
Your
images may appear harmonious in Internet Explorer (IE) but
may
be broken up in Netscape Navigator (NN). Therefore check
your
image for differences with Internet Explorer (IE) and
Netscape
Navigator (NN) browsers. Your images should appeal to all
users.
Unfortunately AOL has its own browser, which filters sites
through its own AOL proxy system. This means all graphics
are
converted from JPEG and GIF to the ART format.
Most AOL users also use their browsers with the default
“compressed graphics” checked, so what normally looks
good in
IE or NN, will look blurry or distorted on AOL. To change
this,
AOL users need to go to preferences and check “never
compress
graphics”.
7. Caching
This is a temporary storage area of your hard drive where
browsers keep files while they display them. You can
create a consistent look and feel to your Web Site, by
reusing
another graphic on another page. You will be retrieving it
from
the cache. The more graphics that you reuse, the faster
your
pages will load.
Testing
To test load times of your pages you need to first
publish them and then clear the cache in your computer
before
loading them, and timing them, from the Internet. Put the
url
in your browser address box, start timing when you hit Go
and
stop when the word 'Done' appears in your status bar.
Images are the main factor that contributes to slow
loading of
your web pages. By implementing these techniques for
optimizing
your images, visitors will have a far more pleasing
experience.
Part 3 of this article will discuss other methods for
creating
fast loading images when creating a professional web site.
==================================================
Herman Drost is a Certified Internet Webmaster (CIW) owner
and
author of iSiteBuild.com
Low Cost Hosting and Site Design
(http://www.isitebuild.com/sitehosting.htm)
Subscribe to the “Marketing Tips” newsletter for more
original
articles. subscribe@isitebuild.com
|
iSiteBuild.com
(240) 334-3271
info@isitebuild.com
[ Design
] [ Hosting ] [ Promotion
] [ Articles ] [ Portfolio
]
|
|
