by Daisey Kondziola
One of the primary concerns when designing a user interface for embedded web applications is keeping the file size as small as possible to fit in the prescribed memory constraints. There are two aspects of the user interface to consider when optimizing: the images and the presentation code.
Images for the web are most effective when they load quickly and are high in quality. To ensure image quality, it is best to stick to the 216-color non-dithering palette. This 6x6x6 "cube" contains six hues for each of the RGB colors; red, green, and blue. A web-safe CLUT (Color Lookup Table) is used to corral an image's colors into the cube's 216-color palette.
Whenever possible, images should be created using the web-safe palette from the very beginning. However, you can convert an image to the web- safe palette, with varying results. You can also create a custom palette with exact colors to reduce the image size even more. In some cases, this palette can be reused across images by using GIF's multiple images feature.
There are two compression methods: "lossy" and "lossless." Lossy compression removes unnecessary and redundant information from the image, resulting in a significantly smaller file size, but altering the image in ways that are barely noticeable to the user. Lossless compression preserves all image information, so that when rendered to the end user it is identical to the uncompressed version. Generally there is a trade-off between compression and quality: Lossy compression results in smaller files; lossless compression produces higher quality. The choice of file format depends mostly on the kind of image; lossy formats like JPEG are intended for photographic images, while lossless formats like GIF and PNG are better for sharp edged, illustrative images.
GIF (Graphics Interchange Format) supports interlacing, transparency, animations, and multiple images. Created by Compuserve in 1987, it is the oldest graphic file format on the web. GIF is best for illustrative images, with large areas of solid color, or detailed pixels. It supports up to 8 bits per pixel, which allows a maximum of 256 colors (2^8=256 colors). Using the LZW compression method, the original image is losslessly saved at a much smaller file size than the original.
The LZW (Lempel-Ziv Welch) algorithm works on rows, scanning for horizontal redundancies. Therefore, an image with horizontal lines will be compressed better than an image with vertical lines.
LZW compression creates a 'data dictionary', which represents linear redundancies in the image data. The first time a pattern of uncompressed bits appears, it is added to the dictionary. The next time that pattern appears the information is referred to and represented by what is already stored. For example:
| A | B | B | A | A B | B A | A B | becomes: 0110232 where: 0 - A 1 - B 2 - A B 3 - B A
LZW is patented by Unisys, and, a license must be obtained to use this compression algorithm. These licensing fees are included in the price of most imaging applications. However, for open-source graphic programs such as Gimp it is difficult to acquire the license to use LZW. To overcome this inconvenience, the lossless PNG format was developed.
The PNG (Portable Network Graphic) format uses the Deflate compression method. This method is similar to LZW, but it scans for vertical redundancies as well as horizontal, which further compresses the file (an additional 10-30%).
The PNG format improves on GIF's interlacing, transparency, color handling, and multiple images. It also adds alpha and gamma channels.
JPEG (Joint Photographic Experts Group) is a lossy compression format, which creates a map of high and low frequency information within the image. The chosen quality setting at which the file is saved determines how much of the high frequency information is thrown out, therefore compressing the file. JPEG supports 24-bits of color, up to 16.7 million colors (2^24=16,777,216 colors).
Keep your eyes out for the wavelet-compressed JPEG2000 and PNP graphic file formats! Coming soon to a 'save as' near you!
Granted, images take up a huge chunk of the allotted memory, regardless of how much you compress them. And you wouldn't want to put your freshly optimized graphics in a page filled with HTML clutter. So let's touch upon a few ways to optimize the presentation code to speed up the loading of the page as well.
Rather than the image 'pushing' its dimensions into the code, let the code allocate space for the image. Not only does it speed up page loading, but it also conforms to the W3C's XHTML standards. You can do this by stating the height and width of the image in the img tag as follows:
<img src = "image.png" height = "10" width = "10" alt = "image">
CSS (Cascading Style Sheets) let us repurpose bits of code. Similar in concept to the compression methods discussed above, we can store data once and then refer to it as needed throughout an application. The color, size, style, and position can be applied to a particular class to prevent cluttering your HTML page with redundant code. Now you can replace a repeated long string of font, table or image attributes with:
class = "myClass"
Not only does CSS clean up the presentation code and improve page loading time, but it also makes the application easier to maintain. You can change the styles by adjusting one line of code, rather than potentially thousands throughout the entire application.
If, upon accessing a page, the first thing the user sees is the main content, then the loading of images and navigational elements isn't as noticeable. However, HTML is a linear language and reads from top to bottom, similar to the way a browser interprets the code. CSS lets the page appear to load faster by specifying the order in which data is drawn on the screen.
So, for example, if the core content code is at the top of the HTML page, regardless of its actual layout positioning within the page, it will load first. The browser is still interpreting the HTML from top to bottom, but by being able to position where the code presents itself allows you to give the user what they're looking for right away. The page can be compartmentalized and loaded in whatever order makes most sense to the user.
Another way to minimize the load time is to use HTML aliased text whenever possible, so as to avoid using images for text headers, blurbs, navigation, etc. If you must use text in images, remember that aliased text only requires one color, where as anti-aliased text consists of a gradation of colors between the font and the background. These intermediate colors increase the image file size.
As you can see, there are many ways of compressing elements within the user interface without sacrificing quality. Saving a few hundred bytes here and there may not seem like a big deal, but it adds up in the long run. Optimizing the user interface not only keeps the application within its allocated memory range, but also ensures that your application lives up to end user expectations of speed and quality.
Daisey Kondziola is a user interface designer specializing in device management. Her work at Art & Logic has covered a wide range of domains, including streaming video servers, home surveillance systems, cable modems, and printers. Daisey has a dog named Linux 8.0 and a cat named JPG.