Copyright 2002 Herman Drost

Image optimization significantly improves your site's effectiveness. Whether your success is measured in revenue per user, page views, unique visitors, or pure profit, accelerating your Web site makes a huge difference.

Part 1 of this article discussed when to use images for your
web site and what image file formats to use on the Web.
Part 2 discussed how to optimize your images for the Web
Part 3 will present more ways to optimize your images so
your web pages will be fast loading.

Studies show that a one-second improvement reduces click-aways up to 65%. Faster page views means more page views and a better user experience. This leads to higher user retention and therefore more revenue.

Here are a few ways this can be done:
READ MORE..
Creating Thumbnails
Make 2 copies of your large image in your favorite image
editing software (Fireworks or Photoshop). Make a small
“thumb-sized” version of your large image and put it on
your first page. Put the large version of your image on another page. Link the small image to the larger one. When visitors click on the small image it will take them immediately to the larger image.

Pre-load graphics
If you want a large image to load fast, you can pre-load the graphic on another page. Create a 1x by 1x pixel of the larger image and insert it at the bottom of an earlier page
(it will appear as a dot and the visitor won't even know it is there). The browser caches the image. When the visitor arrives on the page with the large image, it appears almost immediately.

Slicing
This is where you divide a large graphic into smaller pieces. This keeps the file size of the images smaller enabling them to download faster. Slicing a graphic can also help with design and layout of your web site.

Use Height and Width Attributes for your Images.
The browser doesn't have to calculate the image size because you've told it the height and width values already. If the height and width attributes are not included, the browser has to load the entire image, then calculate its size before displaying it.
Height and width attributes are inserted automatically in the HTML code by WYSIWYG page editors.

Don't use the height and width attributes to make a graphic appear smaller on the page than its actual size; this just creates a larger download time plus added computer processing time. Resize the graphic in your image editing software instead
and use it in your page at its true size.

Interlacing
Have you noticed web graphics appearing on the page gradually in layers? As each layer appears the image becomes clearer until it is in full focus. It gives the viewer a rough idea of what your image will look like and decide to wait or click onwards while the image is rendering. On a fast connection the image will load quickly, so you won't notice the rendering effect.

Interlaced images increase file size slightly. Only apply it to large GIFs where the file size is less noticeable.

Use of Alternate Text
Some people surf the Web with the graphics turned off (for faster web page loading), or they are disabled (visually impaired people use the text-based Web). A good Web
Designer will accommodate these situations by adding the ALT attribute to the HTML element. The ALT element allows you to put text in place of the image so the readers have an idea of what the image is without having to view it.

The ALT attribute will show up if your image is broken. It can also be inserted as one of your keywords, for search engine optimization.

Using the Gif Wizard
This is a handy tool to reduce the file size of your graphics.If you go to www.gifwizard.com, it will compress your graphics online, on any platform.

Optimizing your Web Site will deliver faster page downloads, increased page views, improved user retention, a better user experience and therefore more sales.

A toolbar sits on your web browser and enables quick access to many useful functions making online surfing easier. Here is a list of popular toolbars for your web browser.
Most Popular toolbars

Google Toolbar- Search with Google from any web page, block annoying pop-ups and automatically fill out forms are just few of the popular features. Check spellings, Autolink and see the pagerank. Quick access to all major Google services.

Yahoo Toolbar - allows searching the web with pop-up blocker. Anti-Spy Window Spyware protection. Quick access to Yahoo services and add fresh content to My Yahoo! easily to name a few features. And now with tabbed browsing in IE.

Windows Live Toolbar - tabbed browsing in IE, form filler, pop up blocker, mutiple search options, self updating and feed detector.

MSN Toolbar - Browse smarter with tabs and switch between Web sites within the same Internet Explorer window . Search the Web and easily locate documents, e-mail messages etc. Fill out online forms and one click Access to MSN services.

Alexa Toolbar - a free search and navigation companion that accompanies you as you surf, providing useful information about the sites you visit including traffic information and contact info. Find related links for each page and share opinions.

Stumble Upon - Lets you browse, review and share great webpages while meeting new people. Vote sites you like and read reviews about them. Firefox requires an extension instead of the .exe file in IE.

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
READ MORE..

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.

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.

Copyright 2002 Herman Drost

You are staring at the your monitor waiting for the image to
download. It finally appears but it has blurry edges. You go to the next page but can’t read the text because of the dark image in the background. The next page has animated images, that don’t seem to stop. The spinning globes keep spinning. The last page has a large graphic on it, which is a link. You click on it for more information but it goes nowhere. You leave the site in frustration.

Images are an essential ingredient for Web Site design.
You want visitors to have an aesthetically pleasing
experience. Properly preparing your images is necessary to
enhance the appearance of your web site. In Part I of this
article I will explain:

When to use images for your web site?
What image file formats should you use on the Web?
READ MORE..
When to use images for your web site - Navigation
Graphical buttons can link to other pages or resources.

Image Maps – this is a graphic that contains several links on it. It has several “hot spots” or invisible buttons, you can click on. For example you could have a photograph of your family and put a hot spot on each person’s face that links to that person’s web site.

Logos and Trademarks – your business or organization’s trademark are crucial for name recognition and branding.

Thumbnails – this is a small, “thumbnail-sized version of an image. When you click on it, you jump to another page with a larger version of the same image. The visitor can see many different, small images on the first page without having to wait for larger files of the larger images to load.
Subscribe FREE to
Marketing Tips Newsletter

Please enter your e-mail address below to receive original in-depth Marketing Articles every 2 weeks.


Hosting Plans from $30/Year


What are the different image file formats?
Web graphics can be categorized into two file formats:
bitmap and vector.

Bitmap – these are composed of individual values for each color
displayed. The larger the dimensions of the image, the larger
the associated file size will be for the same graphic. When
viewed with magnification, a bitmap resembles a series of little
squares, each of which has a color value that contributes to the
overall shape. Bitmaps have a very rough appearance when viewed
closely but form images when viewed from a distance.

Bitmaps are best suited for photos, drop-shadow effects and
soft, glowing or blurry edges.

Vector – these store information about the image in mathematical
instructions that are then interpreted and displayed.

Vector graphics are best suited for line art, shapes and
illustrations.

Image File Formats
Graphic file formats used on the Web are GIF, JPEG and PNG

Graphics Interchange Format (GIF)
GIF is a platform-independent file format that is limited to a
display of 256 colors. GIF has been adopted by most developers
because of its small file size.

GIF is considered a “lossless” format. This means that as the
image is compressed, no information is lost.

Types of GIFs
Animated GIF (89A) This 89a version of GIF allows storage
and playback of a sequence of still images to create the
illusion of animation. Animated GIF files consist of sequential
frames that reload from a browser’s cache and replay in an
infinite or predetermined loop to simulate motion.

Transparent GIF
An advantage that a GIF has over a JPEG image is that the
designer can designate a color of the GIF image to be
transparent. For example, you can create a circular logo in a
square image by making the background color transparent. The
image appears circular, when, in fact, it is square with
information to appear transparent.

Interlaced GIF
Graphic interlacing (the progressive rendering of images)
is unique to GIFS and is the preferred method for
display of large graphic files. Many people find the
“fuzzy-to-sharp” animated effect of interlacing visually
appealing, but the most important benefit of interlacing is that
it gives the reader a preview of the full area of the picture,
while the picture downloads into the browser.

When to use a GIF
Buttons, bullets and navigational tools that accent your
Web pages. Interlacing is best for larger GIF images
such as illustrations and photographs.

Joint Photographic Experts Group (JPEG)
Graphics in the JPEG format are capable of much greater color
depth than GIFs, but usually require more time to download.
JPEG can contain up to 24 bits of color information
(16.7 million colors). Remember though, that most users are only
capable of displaying 8-bit color.

When to use a JPEG
JPEG enables you to use brilliant colors and provides support
for complex images and digitized photographs but it is not
designed for use with simple images.

JPEG compression is not as effective as GIF compression and may
distort images with few colors or large areas of the same color.
JPEG compression is therefore not designed for low-resolution
images.

Portable Network Graphics (PNG)
The PNG file format is emerging as the new format for Web graphics.
PNG files are lossless and support transparency like GIFs, yet also
support compression and high bit depth like JPEGs. In addition,
PNG bit depth can be adjusted, unlike GIFs or JPEGs, which must
be 8-bit and 24-bit depth.

When to use a PNG
PNGs behave similarly to GIFs and work best with flat-color,
sharp-edged art. PNGs compress both horizontally and vertically,
so solid blocks of color generally compress best. They also support
better interlacing than interlaced GIFs.

Knowing what types of graphics to use and when to use them for
your web site will help you avoid the many pitfalls of bad web
design.

Part 2 of this article will discuss how to optimize graphics for
your web site and factors that affect optimization.