Web Design Tip- Optimising Images

Build a Successful Web Presence With Internet Marketing, Web design & SEO

Home » Usability, Web Design, Web Dsign - Tip of the Week

Web Design Tip- Optimising Images

15 April 2010 and last modified on May 18th, 2010 at 9:19 pm, No Comment

Images are important elements in web design. Most modern web design concepts are based on minimalist designs that use sharp images to add life and colour to site. Of all web design elements including java scripts, CSS and other code snippets, images take up most of the bandwidth and of the download time. Optimising images can thus have a significant impact on download time and result in a faster loading and more usable web design. As website usability and download times become more important in web design, there are many techniques that can be used to optimise a website. One of the most effective ways to improve website speed is to ensure the images used in the design are optimised and small in file size.

Making an image small is often easy and can be done in most graphic packages. However reducing the file size of the image can be relatively complicated. Whilst some reduction is easily achieved, ensuring that all images used in your web design are smaller than 15 to 20 KB can be challenging.

Given below are some tips to optimise images for your website and reduce the file size:

1. Use the correct format

Formats used in print graphics is different to web images that are viewed on the screen. Only a few types of image formats are supported by websites e.g. GIF, JPEG and PNG. Each format is built for a specific purpose.

GIF

GIF images support only a cerain set of colours and shades. The small file size makes it idel for use in web design. Most images created for the Web are created in GIF format. A colour index is used by all GIF images which only includes the colours that are used by that image.GIF format is good for images with flat color.

JPEG

Jpeg format is ideal for images that consist of many shades of colours. Jpeg supports millions of colours and provides a more photo realistic look. This makes it ideal for photographic pictures or other images with many colours. Some quality is however lost with each edit of the main image.

PNG

PNG is a newer format, designed to be both verstile and royalty free. PNG uses ZIP compression which is lossless. Unlike standard JPEG images, PNG compression involves no loss of image data, so there is no smudging or blurring. PNG format offers better transparency features.

2. Use appropriate cropping

Cropping refers to the proess of cutting the portion of an image that is required leaving out the parts that are not needed. Cropping of images is used commonly in web design and all images should be cropped. If you wish to display an image on the website, it makes sense to use only the relevant part of the image. Cropping often reduces the file size of the image as irrelevant parts are left out. It also provides focus to the relevant part of the image and can be more effective in conveying the desired message.

3. How many colours does your GIF use?

In practice, it is common to use a combination of GIF and JPEG images in web design. GIF images in particular allow you to define the number of colours used in the index. A GIF image with 256-color index will be larger in file size to an image with 8 colour index. It is thus important to ensure that GIF images are saved with the right number of colours in the index. Saving a 8 colour GIF with a 128 colour index will only increase the file size without improving it in any way. Before saving a gif, it is a good practice to convert the image to the least number of colors it can use without loosing clarity.

4. Browser-safe palette – Use web safe colours only

The browser-safe palette is a set of 216 colours that can be viewed without loss of clarity even on the older 256 colour (8-bit) computer systems. Web design and graphic design professionals today, believe that it is safe to design without the web safe palette due advances in technology. Computers today are rarely based on the 256 colour (8-bit) system. Although the need for browser-safe colour palette has reduced, there is no harm in using the browser-safe palette. It is still useful especially when designing for alternative devices such as cell phones and PDAs that still 8-bit colour.

If you like this article, please share it!