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 are not fast loading 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 a 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.
Fast Loading Graphics:
- Use the correct file format for fast loading graphics.
- 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 which will help you get fast loading graphics. Jpeg, Gif, and Png. Jpeg and Gif are most commonly used as Png does not work in older browsers, however this should not be a problem in this day and age.
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. See more about the difference between image formats.
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://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 fast loading graphics
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.
I like to use Window Live Gallery to re-size a picture as it is a free program.
Here is another video about how to re-size a Gif.
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.
This is definitely a problem when you transfer a photo from a digital camera. Most digital cameras now days are producing photos that will not even load on a webpage.
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 for fast loading. Therefore your graphics will be spread over more pages.
Notes about creating fast loading graphics:
- 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.
Please feel free to share your tips on creating fast loading graphics for your website’s.
If you enjoyed this post please consider sharing ! :)
|
|
Related Posts
This post was written by...
Mitz – who has written 761 posts on Computer Tips.
Hi guys…I am a computer freak but I do not always talk in tech language. Hope you enjoy my website and learn everything you need to know in an easy to understand way.. If you like what you see please join: Follow Tips4pc On Twitter | Become A Facebook Fan | Subscribe RSS Feed | Tips4pc Youtube Channel
