Optimizing Images For Your Website

When displaying an image on your website, it’s important to ensure it is optimized for use on the web.  Many website owners take a photo on their digital camera’s and upload it directly to their site – this may not necessarily be the best thing to do. Images, when uploaded to a webserver (or other photo hosting site), take up physical space.  The larger the image, the more space it takes up.  Additionally, the bigger the physical image is, the longer it will take to display…. thus affecting the Visitors experience of your site. Here are some considerations when using images on your website:

• A photograph from a digital camera can be up to 600 dpi – dpi, is dots per inch and this is literally the number of dots that appear in a square inch.  The more dots per inch, the higher the quality of the photo, and the bigger the physical file.  You need to check each camera to determine the resolution of the photo’s being taken.
• Images displayed on a computer screen are typically displayed at 72 dpi – almost 1/10th of a high resolution digital photo.
• Generally, an image taken by a digital camera is something like 3000px wide and 2500px tall.  Translates to something like 17cm wide…. The larger the size of the print, the larger the physical file is.
• A computer screen is more like 800px to 1000px wide and 600px to 1000px tall. (1/3 to 1/2 the size of a digital image).
• When an unedited or unoptimized image is uploaded to a website and resized through the editor, generally all that is happening is that an instruction is sent to the browser when the page loads to tell it to only display the image at this size.  The full sized image however, is downloaded to the Visitors PC so it can be viewed – the larger the image, the more time it takes to download and display.

Putting this all together – my rule of thumb for images on a website:

1. Always reduce your images to 72 dpi
2. Always resize them physically BEFORE uploading them to your webserver. As a rule, I use images that are a maximum of 250px wide in blog posts and pages (which gives me sufficient room on the page for text), and if I want a ‘full width’ image to fill out a space, I use about 600px wide.  I rarely go bigger than 600px.  WordPress is quite good for this, as part of the upload process it will create smaller versions for use in posts etc – so you can upload a 600px wide image, and (depending on your theme and wordpress setup) have the smaller images created at the same time.

By following these two simple steps, you will save on the storage space on your webserver and improve your visitors experience of your website.