|Optimizing Images for the Web |
Optimization is a reoccurring phrase in the Web vernacular. Image optimization is simply creating and using images for the Web that are designed with the Net in mind. This means you consider the way the images will perform on the Net. Performance on the Web usually means how long it takes to load a page. This is a necessary consideration because Web development is out-pacing the technology that makes the Web accessible. In other words, our preoccupation with designing various types of Web content (images, text, objects, exc.) leads to advancements in Web authoring that are always technologically ahead of the Internet itself. This creates and maintains a need to design content for the Web that will survive and even thrive under the deficiencies of the Internet.
After text and hyper-links, images are the most frequently displayed Web entity. Images used on the Web are often combined with text and hyperlinks and can range from low-resolution static images to high-resolution interactive images complete with image maps. Everyone from the new mom making a Web page about her new-born-child to the professional Web Designer/Developer creating an interactive entertainment site for a highbrow client can use images to spice up their Web pages.
Unfortunately image file sizes can be quite large. These often-obese files may have a difficult time jogging around on the Net's transfer-rate tracks. These weight challenged files may do well internally on a given computer system but this is like exercising on a stationary bike. There are luxuries an image may enjoy at a spa workout on your PC internally that are not available while an image is being worked out over the Web's jungle-like environment. An image on your hard-drive accessed by an application has the benefit of vast amounts of RAM memory, swift bus speeds and high-speed processors (on most up-to-date systems). However when your system has to access these images over the Web it's like making that chunky file get off of the stationary bike and run in the Iron Man Challenge. The conditions are strenuous and the progress of a user's file download can be hampered by many different variables, some of which are outside of the users control. Although your PC or Mac may be an expert getting these hefty files around on your system in-house the Internet has yet to handle the problem as well.
They say a picture is worth a thousand words. As a matter of fact, on a computer, a picture in the form of a graphic is worth a whole lot more than 1,000 words. Let's look at the numbers. As an example let's say a particular GIF file that takes up about one quarter of a browser screen is around 80K (approximately 80,000 characters). Now, we'll say that the average word is five characters. In addition we'll add a couple of spaces for good measure giving a total of seven characters. If you take an image composed of 80,000 characters and divide that by a word composed of 7 characters you get approximately 11,400 words! This means you could have a text file composed of 11,400 words that was the same file size as 1 image that takes up one quarter of the monitor screen (in theory). Of course this varies depending on the resolution and number of colors the image is composed of but the lesson is clear. In order for images to share the same page with other images and text while still maintaining decent download time optimization is a must.
An 80K file, transmitted to a browser across a 28.8 KBPS connection, takes about 40 seconds. A good rule of thumb (until broadband becomes a standard) is to estimate about 2K (2,024 characters) per second transfer speeds is what the average home user is getting from their Net connection. This problem gets worse when International connections are taken into consideration. Some countries have very poor connection speeds due to out-dated phone lines and inferior phone equipment.
Many advanced Web users who don't have broadband access turn off their automatic image load feature for each page. They navigate to the desired information, and then request image loads for specific pages. Many Web Designers/Developers use the ALT option with images so that a browser operating in text mode will display a text message concerning the image or a text substitute for the image. Without the ALT option, a user might not comprehend the objective of your page. This is especially true if the image has text in it that is part of a company logo or if the image has important information that is not included elsewhere on the page. Therefore a Web Designers/Developers work should always make sense even when images are not available. The ALT option makes sure the user gets your point or message even if the image did not make an appearance onto the display. Note that the text used in ALT cannot include HTML markup. Tags like STRONG, header tags, and so on, are unusable. The ALT option uses regular text or special characters and no tags!