Web Optimization: Making Your Content as Small as Possible

So you have designed a top notch website for yourself and are ready to convert to HTML or Flash. The quicker you can deliver your content to your final users the more likely they are to read it. So how do you make sure the content gets to the computer screen as quickly as possible?

For HTML content, the size is all in the images. The images you place on your web page should be one of two types: gifs/pngs or jpgs. Which you choose depends a lot on the number of colors that make up the graphic. If your graphic is less than 256 colors, then you should save it as a gif or png. Both png and gif are loss-less formats that have the ability to limit the color depths. Gifs are limited to 256 colors but png is not. In general, png is smaller as long as you save it as the same color depth. Gifs still hold favor in the web community mainly because of their ability to hold multiple frames that will play as a simple animation.

Jpgs are used when you have a more photographic image that requires millions of colors to reproduce. The compression of a jpg is represented as a percentage from 0 to 100. The more you compress, the smaller your image will get, but the fuzzier it will get as well. Trial and error is needed to maximize your appearance.

Both the graphics types can be optimized using the “save for” web feature of Adobe Photoshop. While using Photoshop, I would recommend you save all of your graphics this way as oppose to using “save as.”

There are other ways to minimize your load time. If your graphic is a dither or an otherwise repeating image, just save one instance of the repeat. In the case of a dither this could be as little as one pixel width. You can make that image the background of a table, table cell, or the whole page. The graphic will then automatically repeat. Whenever possible, use the same graphics on the different pages of your website. The browser will only load the graphic into the cache once, and then redisplay it when the user moves from page to page. Also, you should not use a graphic as a background and then another graphic over top of it. This requires the loading of the portion of the image that is hidden. Instead, you should slice the image into smaller pieces and reassemble them in a table in your html. The slice tool in Photoshop is very handy for this.

When creating Flash graphics you should use vector graphics whenever possible. This includes all text and simple shapes. This is the equivalent of using gif or png for html. More complex graphics are always going to be compressed by flash using a jpg compression scheme. There is an overall setting in the publish settings, or each individual graphic can be set to a different compression rate.

If your flash presentation is extremely complex, you should consider splitting into smaller swfs which load into the main swf only when they are requested for viewing by the final user. You should then share common elements and fonts across the swfs using a shared library.

Flash content that is larger than 500 kb should be programmed with a pre-loading counter of some sort, so that the final user doesn’t question whether their content is still loading or how much longer it will take.

By using some of the basic tips above, you should be on your way to shorter load times and more impressive web content.

Kirk Peters is a Pittsburgh based multimedia programmer. He has had more than ten years experience developing multimedia applications for hundreds of local companies. He can be reached at 412-716-6585 or at kirk@kirkpeters.com.