Computer Tips

Follow Tips4pc on TwitterTips4pc RssBecome a Fan

 

 

 

 

 Laptop Computer    Faster Internet    Computer Games    Spyware Removal    Online Education     Computer Software    Computer Help         

 

 

Top Selling Ebook!

 

Recommended Links

 

 

 Tips4pc Youtube Videos

 Free Wordpress Templates

 PC Tips

 Windows Vista Tips

 Photo Scanner

 Windows Talk

 Computer Repair

 Windows Reinstall

 Download Driver

 Desktop PC Help

 Windows Registry Tips

 Favourite links

 

 

Computer Basics videos

 

How to cut, copy and paste text or pictures

How to enable your Quick Launch Toolbar

How to organize your my documents files and folders

How to save my free desktop wallpapers to your computer

How to take a screenshot in Windows Vista?

 

Computer Tips Newsletter

 

Tips4pc newsletter

Latest newsletter

 

Creating Fast Loading Graphics for your Web PageWebpage viewers

Everyone wants their Web page to look fantastic with fancy fast loading graphics that are sure to attract and captivate viewers. However if your graphics and pictures on your webpage do not load fast enough then you may have a problem. . Internet users have become impatient and haven't even got seconds to spare when waiting for your page to load. By the time your dream page loads today's internet user will already be browsing to the next faster loading webpage.

People want an overload of information and they want it fast. They want to see lots of content, links to other related choices, and they want it to look good as well. Therefore when you are building your website, creating fast loading graphics plays a major part in the success of your site.

Of course people do not want to see just text alone an a webpage, they will always prefer a few graphics or pictures to compliment the content.

Here are the main characteristics of graphics and pictures that allow your webpage to load fast:

  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:

  Tips4pc Logo - Free Computer Help and Education

<a href="http://tips4pc.com"><img border="0" src="http://tips4pc.com/images/Untitled-1.gif" width="267" height="73" alt="Tips4pc Logo - Free Computer Help and Education"></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.

Notes:

  • Flash introductions to WebPages look good but are out of fashion as the viewers are getting more impatient and want fast loading webpage's.
  • Test your own webpage's loading time after you have uploaded it to the internet.

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.

Page copy protected against web site content infringement by Copyscape        Download Software

Main Menu

 

Home

About Us

Link to us

Contact Us

Favourite links

Tips4pc Newsletter

Tips4pc Youtube Channel

Freeware

PDF Articles to save

Privacy Policy

Sitemap

Forum

Shout me a coffee!!

 

Computer Tips Categories

 

Computer Basics

Computer Terms

Computer Troubleshooting

Computer Maintenance

Computer Upgrade

Computer Tip Archive

Digital Camera Tips

Networking Tips

Ebay Tips

Format Windows XP

File and Disk management

Windows Vista Tips 

Windows XP Tips

Webpage Help

Outlook Express Email

Youtube Video Tips

Software Tips

Printer Tips

Videos

Word 2007 Tips

 

Friends

 

PC Tips

Windows Vista Tips

Free Wordpress Templates

Windows Talk

Computer Repair

Windows Reinstall

Download Driver

Desktop PC Help

Repair Windows

Buy Computers Ohio

Photo Scanner

AskRitesh

Lenovo Coupons

Tips4pc RssFollow Tips4pc on Twitter

All rights reserved. Copyright © 2007 Tips4PC.com
Free Computer Help
Revised: 20-Nov-2009.    RSS Feed   Video Rss Feed

Share This Website with a friend            Make Tips4PC your homepage