|
Web Design Articles
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
Receive your FREE trial download of this ebook for subscribing:
Name
Email
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 the Certified Internet Webmaster (CIW)
owner and author of http://www.iSiteBuild.com
Affordable Web Site Design and Low
Cost Web Hosting
Subscribe to his “Marketing Tips” newsletter for more original
articles. subscribe@isitebuild.com.
You can read more
of his in-depth articles at: http://www.isitebuild.com/articles
***********************************************************************
Article reproduced with kind permission from Herman Drost
|
|
