Home » Web Design

How to Prepare Images for Your Web Site – Part 3

Use the tools below to copy the article in plain text form, or you can copy it as HTML, ready to copy and paste directly into a web page.

HTML
<html> <head> <title>How to Prepare Images for Your Web Site – Part 3</title> </head> <body> <h1>How to Prepare Images for Your Web Site – Part 3</h1> <div class="info">Author: <a href="http://hermandrost.articlealley.com/">Herman Drost</a></div><div class="body">How to Prepare Images for Your Web Site – Part 3 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: 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</div> <div class="source">Article Source: <a href="http://www.articlealley.com/http://hermandrost.articlealley.com/how-to-prepare-images-for-your-web-site--part-3-258.html">http://www.articlealley.com/http://hermandrost.articlealley.com/how-to-prepare-images-for-your-web-site--part-3-258.html</a></div> <div class="author"> <div class="authorOccupation">Occupation: SEO Professional</div> <div class="authorBio">********************************************************************* Herman Drost is the Certified Internet Webmaster (CIW) owner and author of <a href="http://www.isitebuild.com/" rel="nofollow">http://www.iSiteBuild.com</a> <ahref="http://www.isitebuild.com/">Affordable Web Site Design and Low Cost Web Hosting </a> Subscribe to his </div> </author> </body> </html>

Text
How to Prepare Images for Your Web Site – Part 3 Author: Herman Drost How to Prepare Images for Your Web Site – Part 3 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: 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 Article Source: http://www.articlealley.com/http://hermandrost.articlealley.com/how-to-prepare-images-for-your-web-site--part-3-258.html About the Author: ********************************************************************* Herman Drost is the Certified Internet Webmaster (CIW) owner and author of <a href="http://www.isitebuild.com/" rel="nofollow">http://www.iSiteBuild.com</a> <ahref="http://www.isitebuild.com/">Affordable Web Site Design and Low Cost Web Hosting </a> Subscribe to his

Article Title:
Article Keywords:

return to article

Author

by Herman Drost
********************************************* ************************ Herman Drost is the Certified Internet Webmaster (CIW) owner and author of http://www.iSiteBuild.com
Affordabl e Web Site Design and Low Cost Web Hosting Subscribe to his

ads

How to Prepare Images for Your Web Site – Part 3

Need Help?

Site Info

Webmasters

Business Info