Everyone loves seeing nice photographs on websites. Photographs can help illustrate what your business does, and when it comes to selling products from your website then good quality images are paramount. In this article we start with the simple task of resizing and cropping our images.
Why should I optimise my images?
Image optimisation is done to reduce the page load time this is simply the amount of time it takes for your page to download to your visitors’ computer. So the larger the images’ file size, the longer it takes. The patience levels of a website visitor are already pretty low, so if they feel your page is taking too long to appear they’ll just click someplace else. By reducing the file sizes of our images we’ll be helping to reduce page load times and keep our websites’ visitors happy.
Doesn’t my website to all that for me?
Whilst the majority of todays’ content managed websites will automatically crop images and produce thumbnail versions it’s always good to start with an optimised image that’s at the largest size you intend to use on your website.
With some of todays’ responsive websites the images are resized on the fly by the server hosting your website, so the larger the original image is the more resizing work the server has to do before displaying the image on your web page.
What can I do to optimise my images before uploading to my website?
Before you start you’re going to need an image editing program, Photoshop is the professional’s choice – but there are some very good free programs available such as Gimp and Google’s Picassa.
Resizing images.
Image 1. Original size.
Whilst camera resolutions have increased dramatically (leading to higher quality images and larger file sizes) the monitor resolution of your average website visitor is still some way behind this.
So what size do I reduce my image to?
This really depends on where the image is going to be used on your website. Think about where the largest size image is going to be displayed on your website. If your image is going to be used full screen then you’ll obviously need a larger photo than if you’re using the image in a blog post.
Image 1. Here our original image measures 3800 x 5000px, which is considerably larger than our example 1900 x 1000 monitor can display at 100%.
Image 2. scale resized.
Image 2. We’ve resized our original image so that it’s width is the same as our monitor. Our file size has also shrunk to 25% of the originals’ - but there’s still a lot of unnessasary space around our image
Image 3. The green areas are going to be cropped from our image
Cropping images.
Image 3. We’ve highlighted the areas we’re going to crop from our image. In this case we’re cropping 800px from the top and 700px from the bottom. Cropping is useful for removing anything distracting in the background of your images – particularly around the edges.
Image 4.
Image 4. Our image is now resized and cropped to be a lot more website friendly. Our file size has also shrunk to 10% of the originals’ size.
So now even if our website has to do some resizing on the fly it has far less work to do so will display our image quicker.
Cropping and Resizing example
We had a call from a websites’ owner looking for help with the slideshow on her website. Originally she wanted some kind of loading message saying “please wait while our slideshow loads..” etc. A quick look at the website and images revealed that the slideshow measured 970 x 300px but the photographs being loaded into it measured around 5000 x 3000px so were being resized by the website to fit the slideshow’s dimensions. We resized and cropped all 5 of the images to exactly match the slideshow’s 970 x 300px dimensions, so the website has no resizing to do – it just has to display the images. In the end didn’t need the “please wait while our slideshow loads..” message as all 5 images downloaded in under 2 seconds – which is a far cry from the 30+ seconds before we started.
Below is a graph of the top 10 monitor resolutions being used in the UK at present (may 2013).
So if you’re using your images in a full screen slideshow use this to determine how large to make your images. Bear in mind that the new Retina display from Apple uses a resolution of 2880 x 1800px.
Next time we’ll go through file compression techniques to reduce your images’ file sizes even further.
Special thanks to the studio cat Dillon, you’re sorely missed.