As part of our series of how best to optimise your website, today we’re going to talk about one of the biggest components of any website – your images, and, more specifically, the tremendous balancing act you have to do in this day and age.
Now, bear with me, I’m going to reminisce a little…
When I was just a small boy in the late 1980s, I got my very first PC. It was an Amstrad IBM PC1512 (it’s got its very own Wikipedia page!). This was in a time before home internet, a time before Microsoft Windows, and a time before mobile phones (of any kind, not just smartphones – I know kids, it’s hard to believe, but we lived life perfectly well without iPhones, thank you very much). This PC ran MS DOS 3.2 (which, again, for those who don’t know is a text-based operating system), and more importantly for this blog, a graphic interface called GEM. GEM had a paint program (like MS Paint, but far superior… probably) known as GEMPAINT. And right about now is where we get to the point of this little sojourn – you could use GEMPAINT at a screen resolution of 640x200 pixels in 16 colours. Remember that – the maximum resolution of the monitor attached to the PC1512 was 640x200 pixels.
The best computer ever made? Look at this beast!
Fast forward a couple of years to 1990, and the release of Windows 3.0, which could run at a standard 640x480 pixels in 16 colours. Again, that is the FULL SCREEN resolution remember.
Keep accelerating through the years… now we’re at 1995 and the release of Windows 95. Now we have a variety of resolutions to pick from, based on the abilities of the monitor you have, but potentially going above 1280x1024 pixels. We’re also speeding up internet availability at home, and speeds are faster than ever – 28.8kbps modems were expensive but represented almost the pinnacle of internet technology. Not that there was much to see – in 1995 there were only around 100,000 websites on the entire internet. No Google either. The average screen resolution was just switching to 800x600 pixels, which meant websites at the time had to be optimised not only so they could load in a reasonable time over a 28.8kbps connection, but were also viewable at those resolutions. Take an image that is 320x240 pixels (see image below for how large that appears on your screen). That image takes up 24kb in full colour. On a website from the mid nineties on a 28.8kbps modem, that image alone would take approximately 8 seconds to download, and would take up a good portion of the screen.
A 24kb Wartortle
Hence why if you ask your parents, they will tell you all their stories about waiting for certain images to download line by line on the screen at some unearthly time in the middle of the night, when their own parents were sleeping. This is also hence why websites from the mid-nineties were primarily text-based.
Now let’s jump forward 20-odd years to present day. The average (reported) speed of the internet in the UK is, as of May 2018, 46.2Mbps. Tell that to my colleague, who until recently enjoyed a top speed of 3Mbps (he has now moved), whereas at home I get around 70Mbps. At that speed, the image that would have taken nearly 8 seconds to download 20 years ago would now download in… do maths… 0.005 seconds, give or take a millisecond or two.
Now at this stage, you may be thinking that with internet speeds as they are right now, you just don’t need to think about images then. Even if you load your page with images, a page will download in a couple of seconds, right?
There are two major issues with this. The first is extremely important to bear in mind, and relatively simple to fix, and it revolves around cameras and image optimisation.
Put simply, the camera in your smartphone is now far too powerful for its own good. The average image size of an image taken on a standard iPhone or equivalent can be anywhere between 1-10 megabytes, with sizes up to and exceeding 3024x4032 pixels. If you were to use just one of those images on a page on your website, it could take a couple of seconds to load just that image on even a fast connection, and all of a sudden we are back to the days of watching an image appear line by line. Given the fact that the attention span of someone visiting your website can be as little as half a second, it is clear that you cannot upload a photo to your website directly from your phone or digital camera without first optimising it with another piece of software. This is especially true for photo galleries – can you image a page which has say, 20 full-size photos on it, all trying to load at once? Not only is this a nightmare for anyone viewing your website, it is also a nightmare for your hosting company, as this will drain your useable space allowances as well as cause your entire website to slow down
The future… (sadly for websites)
Luckily, it is very easy to optimise images for web viewing, although I would argue that you will have an easier time on a PC as there is a multitude of free image editing software that can do the job in just a few clicks. On a Mac, the best way to do this for free is to use the image preview function to resize your image – there is a guide on how to do this here:
For PCs, one of the pieces of software we use to quickly resize image to make them suitable for web use is called Irfanview, which you can download here:
So, you’ve got your image, your chosen image editing software, and now you just need to know how big that image needs to be. Before we talk about that, let’s throw a spanner in the works, with the second major issue when dealing with images on your website.
This image appeared when I searched for “throw a spanner in the works” on Google – it’s better than anything I could come up with…
You see, there is a third measurement for images we need to think about. There’s size in kilobytes (ie. how much space an image takes up on the server), size on-screen (that’s the x times x pixel measurement), and finally there is DPI – in simple terms, this is how sharp the image looks on your computer screen. Higher DPI equals sharper, clearer images, but at the cost of a increase in size in kilobytes.
Now on your typical computer screen, an image of 72 DPI will appear absolutely fine and clear. Shrink it down onto a standard smartphone or tablet, and again, the image will look fine. However, more expensive devices, and more importantly, Apple devices, have much higher resolution screens than a lot of the less expensive devices. On those screens, an image of 72 DPI can appear blurry and out of focus. Logos and smaller images are particularly vulnerable to this. The solution is to therefore create the image at a higher DPI – a logo for example should generally come in at 300 DPI, just to ensure that it displays nicely on mobile devices.
Now, that being said, here are some typical values for you to keep in mind:
For a full width image:
– Make the image width a minimum of 1920 pixels
– Keep the resolution at 72 DPI
– Make sure the size is as small as possible – aim for under 300kb
For a half width image:
– The image width should be around 1000 pixels
– 72 DPI
– Aim for an image size of under 100kb – if you can’t get it lower, then don’t use too many photos on the page
For a quarter width image:
– Image width around 600 pixels
– Consider a DPI of 150+ for mobile devices
– Keep image size under 50kb if possible
PLEASE NOTE THIS IS JUST A ROUGH GUIDE – the most important thing is to test your website and see what you think. If it is not fast enough, but you don’t want to compromise on the quality of images, then consider upgrading your hosting package. In all cases though, unless you have a specific gallery page, try and keep your entire page sizes under 500kb – that way you can be assured that people will not be put off by any slow loading of pages!
One last thing – you may have heard of something called a Content Delivery Network (CDN). They provide a way to display large quantities of images and other downloadable content on your website without drawing from your server. The most popular CDNs are run by Google and Amazon; there is an extra charge for using them and depending on what website building software / CMS you use they can be tricky to incorporate without at least some basic HTML knowledge; however, if you have a large website that uses a lot of images, then using a CDN is well worth considering. You can find more information about the Amazon CDN here:
Need any help with your website and image optimisation? Contact us today!