Creating Fast Loading Graphics for
your Web Page
A study has found that 1/3 of visitors will leave a Website that doesn't
load within 8 seconds.
Everyone wants their Web
page to look fantastic with fancy
flashing graphics that are sure to attract and captivate viewers. However this can also have the
opposite effect. Internet users are becoming impatient and haven't got seconds
to spare on waiting for your page to load. By the time your dream page loads
today's internet user will already be browsing to the next page.
Here are some tips on how to optimize your graphic files for a
web
page.
- Use the correct file format
for your webpage
- Specify the size of your picture
in your webpage graphics
- Reduce the size of the files
for your website
- Don't make the graphic too large.
- Split your web page content.
1. Use the correct file format
for your webpage graphics
There are three types of image files that are supported by most web browsers.
Jpeg, Gif, and Png. Jpeg and Gif are most commonly used as Png does not work in
older browsers.
Gif format is best used for text, line drawings, screenshots, cartoons, and
animations. Gif is limited to a total number of 256 colors or less.
Jpeg format is used for color photographs, or any pictures with many blends
or gradients. It is not good with sharp edges and tends to blur them a bit.
2. Specify the size of your picture
in your webpage HTML
Always specify the height and width of your
graphic in your HTML. The browser cannot load text on
screen until it has figured out the exact size of the graphics. However if you
have set the size, the text will be laid out quickly, while the graphics
are still loading. Here is an example below:

<a href="http://www.stores.ebay.com.au/Fantastic-Bits-24-7"><img
border="0" src="http://www.tips4pc.com/images/cooltext55307208.gif"
width="207" height="38" alt="FantasticBits
24-7"></a>
The writing highlighted with yellow is
specifying the size of this gif image. The text in pink is the text you will see
when you mouse over the picture. Green highlight is the destination of the
hyperlink.
3. Reduce the size of the files
for your website
First thing to remember when editing your
graphic is to keep your original file intact. This is just in case you totally
ruin your graphic and have to start again.
GIF and PNG files can often be reduced in size
by selecting less than the standard 256 colors (referred to in some software as
8-bit). If your graphic does not use that many different colors, change to a lower number.
When you convert a file into a JPEG, most good
graphic programs allow you to select the quality of your image. By selecting a
lower quality, this in turn reduces the file size. A picture that was 10k could
be reduced to 5k and still look ok.
If you are looking for programs to help with
resizing or converting a graphic for your web site
you should try LView Pro,
Paint Shop Pro or
Paint.Net. The best
and most expensive program available is probably
Adobe PhotoShop.
4. Don't make the graphic too large
Don't make the graphic any larger on screen than
it needs to be. If you need to show more detail, include a thumbnail to
click on to view a larger picture. The smaller the image size, the quicker it
loads and the faster your web page will load.
Also consider the different screen resolutions
people use. Older computers still use 800 x 600 and even 640 x 480. The size of
your image will look different on all resolutions.
5. Split your
web page content
Instead of having all of your information
crammed into a few web pages, it is better to create more smaller pages that load
quicker. Therefore your graphics will be spread over more pages.
More Webpage Help
Browse Tips4pc.com for more articles
About the Author
Mitz Pantic wrote this article
and others for
http://www.tips4pc.com Browse Tips4pc.com for more articles
that are written in an easy to understand interface and FREE computer help.
You can also visit her
Australian Ebay store
Fantastic Bits 24_7.
This article is free to re-produce providing
that the author's bio is included and the website links are still
clickable...
|