Using graphics effectively

Graphics are a very important part of any website but also take up a lot of resources to display. You should try and maintain a balance between good graphics and resource consumption.

Eliminate unnecessary graphics

Eliminate unnecessary graphics or use thumbnails where appropriate. For example, you can display a thumbnail that links to a larger image for images that may not be important to all visitors. You can also replace some graphics with CSS or JavaScript. For example, the following code replaces an image with CSS.

The following HTML applies the .active class to the item that identifies the page that is currently being visited. In this case, Page1.html.

<ul id="navigation">
   <li><a href="index.html">Home</a></li>
   <li><a href="Page1.html" class="active">Page 1</a></li>
   <li><a href="Page2.html">Page 2</a></li>
   <li><a href="Page3.html">Page 3</a></li>
</ul>

The following CSS defines the .active class. Notice that highlighting is applied by the image bg_navigation_active.gif.

ul#navigation .active {
   background: #44567a url('../pics/bg_navigation_active.gif') repeat-x top left;
   }

The following style replaces the image with a background color, creating the same highlighting without using an image. 

ul#navigation .active {
   background-color: #200990;
   }

Optimize image size

Smaller images in terms of both pixel size and color depth conserve memory and load faster. A color depth of 16 bits is a good compromise between looks and size. The screen resolution defines the actual size of graphics on the display. For example, a graphic that looks very small on a large display may become too small on a device with the same number of pixels but a smaller display. The Forum Nokia Device Specifications page defines the display size and resolution of Nokia devices.

Do not scale images

When possible, create images in their intended size. Scaling images up or down degrades the quality. If an image must be scaled, do so using a desktop imaging tool. Before scaling, convert the image to 24-bit color mode (for example to PNG-24). The increased color depth allows a good scaling tool to add color gradations to perform anti-aliasing on the final image.

Although the S60 Browser engine will scale images to fit the size of the container (defined by the <img> element), you should avoid this. Instead, define the <img> height and width parameters so that they are the same as the image size. This helps in two ways.

  • Not using the parameters forces the S60 Browser to re-draw the page when the image is fetched, which can be very slow.

  • Using parameters that match the size of the image prevents the browser from having to scale the image.

For example, if the image size is 49 x 9, the HTML is:

<img src="http://mywebsite/images/image.png" alt="My picture" width="49" height="9"/>
© Nokia 2009.