[Skip to content]

Search our Site
Easysite Resource Centre
Blog example

Blog example

A Picture is worth a thousand words?

User AvatarPosted by at 27/10/2008 09:59:18

Everybody wants their website to have an ‘arresting’ visual impact on visitors. This often means that website pages are constructed with lots of images and attractive branding. However, this can have unintended consequences for those visitors – if a page takes 30 seconds or more to load in a browser your visitor may have gone away before seeing it!  It is therefore very important to see what you can do to minimise the speed of page loading.

The BBC website provides some useful best practice in terms of the physical size of images and the number of kilobytes (kb) required to present them on a web page. The following image sizes are used on the current BBC site: 57 x 71 pixels, 146 x 110 pixels, 236 x 177 pixels, 400 x 274 pixels (see the sizes in the picture above)

The BBC images are jpegs processed to be as small as possible – even the largest of the images on the current BBC site is around 30kb. A good rule of thumb is not to upload an image that is greater than 35kb in size. Print quality images are typically much larger in size than this; don’t upload such images to you website. Instead use an image compression program (e.g. Photoshop) to save the image file in a web format – first crop it to the desired ratio (e.g. 146 x 110 pixels), and then compress and save it before uploading to EasySite.

If a jpeg image contains text or line effect graphics (i.e. is not a photograph) you should re-save it as a gif. We recently advised a client to convert 14 navigation images (i.e. displayed on every page) from jpegs to gifs. Each jpeg image was circa 40kb – therefore 560kb of images had to be downloaded before any page content. Tests showed that the same images converted to gifs only occupied 6kb – only 84kb in total, a big saving on 560kb.

By the way, this not only meant the page refresh was slow but the bandwidth consumed by a large number of site visitors could be expensive! We perhaps don’t emphasise this issue of image download size enough to clients – consider yourself warned. It is also a good practice to have no more than two or three images on the majority of pages to speed presentation.

Ps: In EasySite, you can edit images via the Edit button in the Asset Manager to make them smaller. However, you shouldn’t really be uploading large images to the asset manager in the first place if you are not going to use them …. It just uses more disk and backup space for your website.