Web Help Images - Blog/Myspace/Live Journal/Xanga/Website
Web Help Images.Myspace layouts, web templates, hit counters/stat trackers, animated icons, and Myspace music codes. Optimize Images for the Web.This is a short tutorial for those wanting to learn how to create fast loading web pages. To understand this clearly, the right approach needs to be understood.The Visual Web Page.Have you gone to someone's website and it has you sitting there waiting for it to load? And, all it leaves you is looking at a blank page? The page must be loading because the little numbers across the bottom are rolling. However, you see nothing. Well, fast loading web pages don't do that.When you visit fast websites, the entire web page loads quickly. All the text is there. What's missing are the images. But, there are little boxes which appear to be pressed into the page just waiting for the image to appear. Sometimes there's text in the box, where the image is to appear. It tells you what's going to be in the box. Neat trick, huh? How It's Done.Actually, it's not difficult to do. Simply, you make a point of denoting every image on the web page with HEIGHT, WIDTH, and ALT commands.Image 'Height' and 'Width' Commands.Here's an example of showing what is in an image command:<IMG HEIGHT="45" WIDTH="22" SRC="image.gif"> The above command indicates the image's height and width, in pixels. Pixels.Pixels are little colored dots. If there are enough of them close together, they create a picture. The word "pixels" actually comes from pushing two words together, "picture" and "element."Using IMG commands.Those with vivid imaginations know the height and width commands are used to change the shape of an image. Take an image which is really 50X50. If you set the height and width commands to 150 and 10, it distorts the picture very noticeably.To use the commands most effectively, denote the exact height and width of the image. By chance, this seems a bit silly. However, if you do it for every image, the web page text loads completely. It leaves adequate space for each picture to load later. Once the web browser knows everything it needs about each image, it creates the web page and loads the images as they become available. Your viewer reads and surfs immediately, rather than waiting for the whole page to load. Image sizes.It is easy to find the size of an image.In Netscape, right click on the image. MAC users click and hold. Choose the menu item, "Show Image". The height and width are in the title bar. In Internet Explorer, right click on the image. MAC users should click and hold. Choose the menu item, "Properties". The height and width are displayed in the box which appears. Updating your web pages.Changing your web pages, with improved image commands, by hand is not too tough. Simply load your page. Then, systematically go from image to image with your pointer. When your pointer is on an image, click the right mouse button. (Mac users click the button and hold it down.)Another way to do this is to pay someone to do it for you. That's not really the second way, but it works. Actually, there are programs which do this for you. The ALT Command.The ALT command places text in those little pressed in boxes. Or, they make the little yellow boxes appear when a mouse pointer is placed on an image.ALT is short for alternate, or alternative. It's the text which appears as an alternative to the actual image. Also, it sits inside the pressed in box and appears in the yellow box the way you want. <IMG ALT="picture of a dog" SRC="http://somewebsite.com/MyDog.jpg"> The text after the ALT command is used to tell the viewer what's coming. Add other text to give more information about a picture as the person lays the mouse pointer over it. Persons using disabled-assistant browsers have the ALT text "read" to them by the computer. So, use text representing the image when you use the ALT attribute. |
Image Codes Replace URLHERE with the URL of your image.
Note: The following effects ONLY work in Internet Explorer:
|
