Visually stunning... Stunningly slow
Everyone wants a beautiful website... right? More often than not this will involve photos or images as they provide an easy way of visually enhancing your website content and grabbing user attention. However, the Internet and the Camera are not always the best of bedfellows. Here are some common pitfalls and how best to avoid them.
The biggest issue for anything online is size. Everything that a user views in their web browser has to be shunted down their Internet connection as quick as possible; user's expect websites to load fast. As such, the smaller the content of a web page, the better. As far as images are concerned there are two sizes that we care about:
Width and Height – normally measured in pixels (which make up your display screen).
File Size – the amount of disk space the image takes up.
While there tends to be a correlation between the two (more width and height means more file size) this is not always the case. The way computers store image data means that an entirely black image will take up less disk space than a family photo of the same width and height. This is because there is more 'image data' in the family photo (lots of colours, no direct pattern) than in a black square (one colour, all black).
Why should you care?
If you're preparing images for a website here are the things you need to consider:
-
Re-size the image for the width and height that it will appear on your site. Avoid uploading a 2500 pixel x 3000 pixel image if it's going to be viewed at 250 pixel x 300 pixel. This is because the user will have to transfer the full size image across their Internet connection, only to be resized once it arrives at the browser.
-
Make sure the images file size is as small as possible. Often images can be compressed without affecting how they appear, yet this can result is a significant reduction in the amount of disk space needed. Most image editing programmes include compression options, or there is a good online tool at http://smush.it (this seems to do compression better than Photoshop).
-
Every image has to earn its place. On almost every website, images make up the bulk of the page size, so make sure every image adds value. 20 pictures of the CEO might be good for their ego but is it really going to generate more sales?
Clearly there is a balancing act to strike, an image needs to be large enough (in terms of width and height) to be understandable, whilst small enough to not impact the performance of the website. The exact balance for each site is going to be different.