Images are one of the most important (and also the most overlooked) factors affecting your website performance. They take up storage space on your server and can slow down page load speed dramatically. But we need them!
A page of pure text will guarantee high bounce rates. “Bounce” meaning the page is abandoned immediately upon loading. A wall of text puts most users off. It just seems like too much hard work to actually read all of the content we came here to see. (Humans, strange creatures.) Even those of us who love to read prefer pages that use images to break up the text.
Conversely, a page that takes too long to load is almost guaranteed to be abandoned. And if you haven’t guessed it yet, the reason most pages load slowly is because they’re weighed down by images.
So how do we come to a compromise? Is there a way to achieve a functional balance?
The very first thing you need to do is keep the number of images down to a minimum. Choose quality over quantity. Let your words do the talking.
Image Optimisation, being an integral part of modern design, comes with many varying opinions, beliefs, tools and techniques. I’ll be writing about image optimisation as it applies to web design.
Even so, one must understand that each project/task/situation is unique and this advice has been shared as a general guide only.
Photoshop is my software of choice. There are many reasons why, which I won’t go into right now. I look forward to writing about it more in future articles.
Without further ado, let’s Optimise those Images!
Let’s do this!
I’ve added a quick video demonstration. Keep reading to follow along with the written explanation.
The image I’m using in this demonstration was taken from a digital camera. It is 3.4MB in size, is 3648 pixels wide x 2736 pixels high. To put that into perspective, the image is 128.69cm wide x 96.52cm high.
This image is HUGE.
Putting an image this size on our website would be foolish. You’ll be wasting resources, money and your visitors time.
You might be fine hanging around for however long it takes for the image to load. After all, it’s your image and you have a sentimental attachment to it. Your website visitors don’t have an emotional connection to this image yet. Give them the best opportunity to do so.
FACT – Over 40% of websites that take longer than 3 seconds to load are abandoned. Source: Kissmetrics
They will bail on you without hesitation!
The Power of Photoshop
Photoshop has a “Save for web” function which is a fantastic way to resize and optimise your images prior to uploading them. This is the best path to follow in most cases.
There are exceptions to the rule. For example if you are a photographer and seek to maintain absolute image quality, there are other methods that would be more suitable (this method may still apply though).
Keep in mind that some form of compression is inevitable and very necessary. People who visit your website understand that it’s not an art gallery. They expect the image to load quickly and will accept the compromise on quality.
The truth is they probably won’t even notice!
By choosing “File” from the top menu then selecting “Export – Save for web” a new window opens, with a thumbnail of your image and a host of adjustable parameters. If you take a look at the screenshot above, I’ve set the width to 1080px, with a height of 810px.
This is a pretty good size for full-screen images. Trying to stretch a smaller image to full-screen will cause very noticeable and unwanted distortion.
Adjust according to your particular needs. As I mentioned in the opening paragraph, if you ask 10 designers what the ideal image size is, you’ll get at least 10 different answers.
The main thing to remember is to upload the images at the size they’re being displayed.
You’ll need to consider the file size in KB as well as pixels. The file size in this demonstration went from 3.4MB down to 79Kb. An enormous difference in size with minimal difference in quality.
As a general rule, you should only ever scale images down in size, never up.
The image used in this demonstration would not meet my quality standard for use on a website. It was used purely because it was the largest image file I could locate easily.
High quality images are essential for your website, so you may require the services of a Professional Photographer or consider purchasing some stock images.
Are you having trouble with slow loading pages? Keen for more Photoshop and image Optimisation tips? If you’ve enjoyed reading this article or have anything to add, leave a Comment below.