A proverb says, A picture is worth a thousand words. In the communication of information specifically via an online medium, such as the Web graphics help present the content in a powerful and effective way. Further, images reduce the text and create and sustain users interest. In the dial-up era, slower display of graphics was a bottleneck. Today, even though speed is not an issue, thanks to broadband internet access, its still a good practice to use web graphics design techniques for the faster display of graphics. Why? One, it helps conserve bandwidth; two, you can further enhance users experience. Here are a few tips:
1. Optimize the Graphics
When you optimize graphics, they download faster. What is graphics optimization? It means compressing the graphic file size while maintaining the quality at a reasonably good level. Optimization almost always involves a trade-off between quality and file size. However, you can control the compression, based on your quality needs. You can use image editing software, such as Photoshop, to optimize graphics.
The graphic file formats used in web pages that can be optimized include GIF and JPEG. Whereas the GIF file format is used for flat images, such as type, artwork, illustrations, and logos, JPEG file format is used for continuous-tone images, such as photographs.
When you optimise a JPEG graphic using Photoshop, you can set the quality level to one of Low, Medium, High, or Maximum. A setting of Low gives the lowest quality image and lowest file size. In contrast, a setting of Maximum produces the best quality image and highest file size. The four quality levels can also be set by dragging the Quality slider having the range of 0-100.
Heres an illustration on how the quality-level setting affects the quality and file size. Notice the highlighted area:
- The original graphic file size is 49.4K in TIF file format.
The original, uncompressed graphic
- When JPEG compression was applied with quality level set to 0 (Low), the file size was drastically reduced to 1.256K. The graphic takes about one second to download at 28.8Kbps. Notice the sharp degradation in the quality of the graphic.
JPEG compression applied to the graphic; quality level = 0
- When the quality level was set to 20 (Low), the file size increased to 2.229K, but takes only about two seconds to download. Notice the improvement in the quality of the graphic.
JPEG compression applied to the graphic; quality level = 20
- By increasing the quality level to 50 (Medium), the quality improved significantly while the file size increased to 4.198K. However, the download time increased to about ten seconds.
JPEG compression applied to the graphic; quality level = 50
So, there are really no standard guidelines for the quality level you can set the quality level should be set based on your requirements.
2. Use Fewer Graphics
Use only few graphics in each page of your website. Note each graphic add to the time the browser needs to display the page. Furthermore, use only graphics that are relevant and that add value to communicate the information.
3. Reduce the File Size of Graphics
Reduce the file size of a graphic by reducing its width and height. The file size of a graphic is proportional to its dimensions, colors and resolution. Heres a tip to reduce the file size: Say a photo you want to use in a web page is of post card size. Rather than use the entire photo, first scan it. Next, crop the photo so it has just the area you like to use. Again, you can crop an image using an image editing software like Photoshop.
4. Reuse the Graphic
Use the same graphic, if feasible, at several places in a web page and or across the pages. For example, if youre using a bullet to highlight a text point, reuse it for subsequent points also. The browser needs to retrieve the graphic from the web server only once. Because the graphic is already in the browsers cache, any reference to the same graphic makes the browser display it faster.
5. Use Low Resolution Graphics
Specify a low-resolution graphic, for the high-resolution graphic, using the LOWSRC attribute of the IMG tag of HTML. A low-resolution graphic will have a smaller file size and, therefore, make the web server transmit it to the browser faster. A low-resolution graphic can be, for example, a black and white image. How does this technique work? First the low resolution version displays when it is first referenced in the web page. Thus theres no wait time for the user to view the image. Next, the high-resolution copy of the same image displays over the low-resolution one.
6. Slice the Graphics
Slice a graphic image into smaller parts using an image editing software, such as Photoshop. Each slice is saved as a separate graphic and has a smaller file size. For this reason the graphic downloads fast. You can also optimize each slice with a different value, if you wish. For example, certain areas of the source image may contain only flat colors. When these areas are sliced, each slice can be optimized as a GIF image. Likewise, when continuous-tone areas are sliced, each slice can be optimized as a JPEG image.
How to combine the slices into a composite image? You can align the slices by placing them in the cells of a table without borders or using a cascading style sheet (CSS).
Another advantage of slices is that each slice can have a different hyperlink and or a rollover effect. For example, a photo of a printed circuit board (PCB) can be divided into slices, with each slice representing an important component of the PCB. Each slice can have a hyperlink to a page with more information.
No comments:
Post a Comment