Reducing Page Weight for Embedded Web Content

Web design is continually growing less concerned with the storage size of web content as hosting systems become more powerful and broadband becomes more common. However, anyone focused on development of web content for hosting on embedded systems needs to concentrate on page weight in order to preserve system resources.

What follows are a dozen simple techniques for reducing the storage size of web content on embedded systems. Proper application of these methods can reduce the size of web content by a factor from two to ten times. The additional resources created by the optimization may be applied to new features or reserved for future expansion.

Abandon Old Browsers

Web design was long hampered with a series of browsers that lacked consistent support for standards. Fortunately, users now have a choice of reasonably standards-compliant browsers on all major platforms. Unpatched security problems in older browsers have also driven these versions out of general use. Instead of including workarounds and hacks for support Netscape Navigator 4.x or Internet Explorer versions earlier than 5.5, code the HTML to the standards and test for compliance.

Use Cascading Style Sheets

Style sheets are a major win for embedded web content since they allow for the design to be reused across an entire block of pages. Apply classes directly to tags wherever possible in order to get as much of the design as possible in default page behavior. Focus on the cascading property of styles to avoid unnecessary repetition of properties such as font styles and sizes. Use short names where named classes are needed. Consider using multiple style sheets where different style sets are needed on groups of pages.

Understand Image Compression

While professional web designers generally have a good handle different image formats and their size properties, it is often to surprising what an unfamiliar software engineer will do to image content.

Use JPG format for photographic style images or where 24-bit color is required. Use a tool that allows for custom selection of the compression level and use as much compression as possible without overly distorting the image. What is the right setting? It depends on how and where an image is used. Try saving with different settings and examine the results.

Use GIF format for images requiring transparency or with limited color content. While a GIF image may use up to 256 colors, it isn't required. Try reducing the color content of the image to as few colors as possible without destroying the image. A GIF built on a 20 color palette will often be substantially smaller that a 256 color image.

PNG images provide some of the best features of both GIF and JPG images. Unfortunately, support for the advanced features of PNG is still sketchy across browsers.

Limit the Use of Images

Even a small image will consume significant resources compared to text. Avoid the use of text in images for elements such as navigation or labels. Proper use of CSS and absolute positioning can generate most of the effects commonly created with pictures of text.

Treat It Like Software Development

Good software development practices also pay off when applied to embedded web design. Just because the end results are visual doesn't mean it's a good idea to treat the design like the creation of a PowerPoint presentation. Plan out the design. Create a prototype. Don't be afraid to throw out one or more prototypes. Identify where the resources are being used and select a technique that applies to reduce the overhead. Optimize at both the design level and the implementation level, but only once the time is right.

Prototype on a PC

Once familiar with the process of converting a design to the embedded target, don't bother to design on the target. Use the tools available on a PC to design and test the web pages. Even if the design is heavy on dynamic content, the server components can be quickly simulated using PHP or ASP. Working in a rapid development application will save many hours as the design is wrung out by avoiding the compile and burn cycles.

Use CGI Templates

Most of the web pages of interest in an embedded project are dynamically generated. This often results in the generation of pages using C/C++ code with CGI. While the rest of the world has generally abandoned this technique, the embedded developer is stuck in the past. The web design should be built from a common page template. This common template will contain blocks of text that do not change across pages such as the header block and the general page layout. While much of this is captured in CSS, the syntax laden HTML of the page will still offer blocks of text that can be shared across pages. Unify these blocks in a string table or as explicit include blocks brought in through CGI.

Use Vector Formats

The raster image formats available on the web are not well suited to the creation of dynamic displays commonly needed for embedded systems. Graphs, scalable displays and panel simulations can all be created using raster images, but generally require a series of different images that are substituted in tags during page generation.

Consider using the different vector graphic formats that are commonly available in modern browsers. SVG is supported by most browsers and provides for the dynamic creation of graphs and drawings. Macromedia Flash allows for the creation of low-weight vector displays that may be configured by passing parameters on the object's query string.

Compress HTML

Compress the HTML content either automatically or manually. Some embedded web servers provide support for serving content from a compressed archive. Web pages are stored with a variation of Lempel-Zif-Welch compression and decompressed on the fly as they are served to the client.

If automatic compression is not supported on the platform, consider simple manual compression that reduces the size of web content by removing as many unnecessary elements as possible. For example, strip whitespace from the pages before deploying on the embedded system. If possible, integrate a tool into the make process that minimizes the size of the web files from development friendly files. Remember to strip out any comment or configuration management information in the files.

Reduce the Number of Pages

Each page on an embedded system almost universally involves additional overhead. Even pages that are generated dynamically will consume considerable code space for the CGI routines. Combine similar content or related forms onto as few pages as possible.

Offload Unnecessary Resources

While it is nice to include everything from manuals and online help on the device, these elements can often be sacrificed to create space by linking to remote versions of the materials. Provide the resources on a reliable web host instead of on the device and embed the links directly to the materials.

Remove Unessential Properties

If its necessary to save a few bytes here and there, strategically locate properties that are not needed to properly render the page. For example, a browser will display an image in its native size by default. If an image is used in its native size, the height and width properties are not needed. The closing of many tags is optional. Remove the closing </option> or </p> tags from the implementation.

Note that this is generally a bad idea since it can reduce the reliable display of the page across different browsers and break the standard compliance. However, when faced with pulling a sequence of </option> tags or recoding elements from C into assembly language, the standards will have to accept my apologies.