Subscribe to Tips4pc by Email

Home | Contact Us  |  Make Tips4PC your Homepage

Tips4pc Logo - Free Computer Help and Education

Computer Basics  Computer Terms  Networking Tips  |  Windows Vista Tips  Outlook Express Email  |  Software Tips  | Sitemap

Digital Camera Tips  |  Computer Tip Archive  |  Videos  |  File and Disk management

Computer Maintenance  Webpage Help  Windows XP Tips  |  Forum  Computer Troubleshooting  |  Ebay Tips   |  Printer Tips

 
 
Custom Search

Must See

 

Main Sitemap

Free Computer Help Video Tutorials

Download (PDF) Articles

Free Computer Tip Archive

Tips4pc Forum *new*

 

Main Categories

 

Digital Camera Tips

File and Disk management

Computer Basics

Computer maintenance

Computer Troubleshooting

Windows XP Tips

Windows Vista Tips

Printer Tips

Software Tips

Outlook Express Email

Ebay Tips

Networking Tips

Webpage Help

 

Sponsors

 

 

 

Partners

 

Remote Computer Support

Computer Tips and Tricks

Computer Repair

 

Most Popular

 

Creating An Email Signature

Add Network Printer

Scanner and Camera Wizard

Transfer photo's to your computer

Format Windows  XP

Check your Hard drive

DVD Shrink

Convert AVI to DVD

Format your spare hard drive

Add Network Printer

Printer and File sharing

Basic Computer Terminology

Quick Launch toolbar

Backup your Email Account Settings

Basics of inserting links

Check your Hard drive

Network Connections icon

 

 

 

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.

Webpage viewersHere are some tips on how to optimize your graphic files for a web page.

  1. Use the correct file format for your webpage
  2. Specify the size of your picture in your webpage graphics
  3. Reduce the size of the files for your website
  4. Don't make the graphic too large.
  5. 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:

  FantasticBits 24-7

<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 ProPaint 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...

 

Home | About Us  |  Link to us  Contact Us  |  Favourite links  |  Download Software  |  Make Tips4PC your homepage  

All rights reserved. Copyright © 2007 Tips4PC.com
Free Computer Help
Revised: 04-Jul-2008.

Get Tips4pc monthly newsletter! 543 members so far!