See the image at the top of this page? A fairly standard stock photo of a meeting. When we downloaded it from a free photo website it was 9.5MB in size. If we'd wanted to print it as an image and put it on the wall, it would have looked fine. But we don't; we want it on our website so we reduced the size to 76KB or less than 1% of its original size.
At its original size, it would have taken around 3.5 seconds to appear on a website using a 20Mbps broadband speed. The reduced photo would appear pretty much immediately.
Of course, loading speed is only one consideration when deciding what do with your photos before uploading to you website, the other is quality - we examine the best approach for both.
As we mentioned above, the size of the elements on a web page determine how quickly that page loads - an issue that is very important both to website visitors as well as the search engines, who downgrade slow sites.
This is particularly important when our sites are viewed by mobile devices where the internet connection may be much slower. And the element that affects opening speed the most are the images on your site.
There are four common image formats used in websites - JPG, PNG, GIF and SVG. JPG is the most common format as it compresses the photo well with very little loss of quality. PNG produces a larger file but can be used when part of the photo is transparent. GIF are usually used when the image 'moves' and SVG for non-photo images such as banners, icons etc
As even the most basic smartphone can produce photos of over 2MB in size, so it is important to compromise between the quality and the size of the image. Patently the larger the image, the longer the page takes to load.
So what do we do to reduce the size of the image without compromising its quality?
The answer is that you have to reduce the size of the photos before you upload them.
"Oh, no." you cry, "I'm a prima donna photographer, I can't accept low quality. "Well, don't worry, it's not that bad and here's why:
A reasonable sized desktop screen today might be around 23" from one corner to another and, in that space, there are 1920 dots of light in rows from left to right and 1080 dots of light in columns down the page. Each dot of light, OK let's call them pixels, is, effectively, a single colour. If you want your photo to absolutely cover the screen of your monitor, then, no matter what you do, your photo can only be shown with that number of pixels.
There's more.
It is highly likely that your photo will not take up the entire screen. In fact, it might just take up the middle bit of the website so it needn't be bigger that 960 pixels from left to right.
There's even more.
On tablets and phones - the screens are even smaller so when a hotshot web designer like me :) builds a website, we put lower size and quality images on these devices. Let's face it, there's no point having a 200KB image loading on your Android, especially if the signal is crap. That's when your internet speed really makes a difference.
Finally, whenever you resave a photo you suffer some degree of loss of quality, this is due to the fact that a large image might have 10MB of information while as small image will only have 200KB. The process by which this takes place involves some degree of compromise as pixels are effectively lost. This is normally completely unnoticeable, but it is inevitable as part of the process of reduction.
Open it in Photoshop or any cheap and cheerful image program (see below) and reduce the photo down to the approximate width of the final size of the photo. In other words if your website area is 1000 pixels and the photo takes up one third the width, then reduce the photo to 330 pixels. You don't have to be exact - what's a few pixels between friends?
While you are at it, check out the resolution above. Over the last few years most creative types will tell you that there's no point creating a resolution of more than 72 pixels per inch. This is not strictly true. Modern monitors can cope with a higher number than this. BUT, my advice is don't bother going higher than this unless you have a specific reason to do so.
Of course, a website width of 1,000 pixels is around half the size of a modern desktop monitor, far larger than a smartphone. If you have control over the size of the image on mobile devices, then you may want to reduce the image further - perhaps 400 pixels across.
OK, we have dealt with the physical size of the image, what about the file type we use to save it?
When we take a photo with a DSLR camera or even a half decent smartphone, we can save the image in a range of formats:
For images that are going on a website, you can ignore the first three; they are for large scale images and create files that are far too big for websites. (By all means take the images in those formats but convert to JPG or PNG before uploading.)
If we take it that the two most common formats for websites - JPG and PNG, let's discuss the ways we can reduce the photo size without reducing quality. Have a look at these four images.
I saved all the photos above in Photoshop CC from the original image. I saved each one at 350 px wide, without optimisation and then noted the file size. What's interesting here is:
1. At first glance the images look very similar.
2. The 100% photo is 10 x the size of the 10% photo. Surprised?
3. There is virtually no discernible difference between the 60% and 100% images - and the 60% image is only a third of the size of the 100% image.
So what about comparing larger images?
Notice:
1. A 700 pixels wide photo is nearly three time the size of a 350 pixels wide photo.
2. There's very little pixelation with any of them.
3. The 100% quality image is eight times larger than the 30% image.
PNG files can have transparent backgrounds, so if that what you want to do then you have no choice, (you could use GIFs, but I'll come that) but how does JPG compare to PNG in terms of quality and size?
Well, first; PNG are not saved as %age quality, they are saved as either PNG8 or PNG24. PNG8 supports fewer colours - 256 and 8 bits per pixel while PNG24 supports up to 6 million colours and is 24 bits per pixel.
This is all neither here nor there so let's see how they all compare.
As you can see, there is very little difference in quality between all three images and yet the PNGs are substantially larger. Ten of those little buggers on your page and you've got 3.4MB of images loading every time a visitor swings by. Maybe with your fancy fibre optic broadband that's not an issue, but for a rural user on lower speeds, that's a struggle.
SVG or Scalable Vector Graphics is a very useful file format, but behaves completely differently from the other file formats here.
Both PNG and JPG use 'bitmapped graphics', in other words, they are 'what-you-see-is-what-you-get' formats - scale up a 200 pixel image to 900 pixels and it will look terrible. The 900 pixel image will have the same information as the 200 pixel image, but it'll be spread over a wider area.
SVG is different.
It is, effectively, a mathematical formula (using a 'language' called XML) which represents the image, and allows it to be blown up or reduced to any size without loss of definition. This is incredibly useful for websites when pages can be viewed on huge monitors and tiny phone screens. An SVG image can therefore effectively resize itself automatically without the need to reproduce the image in multiple sizes.
A minor disadvantage with SVG is that they are up to 70% larger in size than the equivalent JPG, but the scaling advantage more than makes up for this difference. It's also worth noting that SVG is not generally used for photos, especially where colour depth is important; they are at their best when used for banners and icons - simple illustrations rather than complex images.
The tool we use to produce SVGs is the fantastic - and free - program called Figma.
GIFs are rarely used on websites. Despite the fact that they are marginally smaller than a similarly sized JPG, they are only able to show 256 colours. This is fine for basic images but not great for images with complex colours.
You should be able to see how dull it looks in comparison to a JPG in the two images below. No, the only thing we think GIFs are useful for are little videos like the one below - and look at how big it is...
I use JPGs 95% of the time and, in terms of quality I rarely go higher than 60%. Even large images - 2,000 pixels wide - are fine at 40-60%. Small photos can be very low quality - it is almost impossible to notice any loss of quality.
Generally, I only use PNGs when the image includes a transparent element and I only use GIFs for animation.
SVGs are brilliant for non-image graphics and are well worth using if you haven't tried them before - the quality is excellent too.
Although speed isn't everything, you can make your website firey fast by being sensible with your images. If you must have top quality images on your site, try and restrict them to a small number per page.
Web companies like Zigger also use adaptive design which allows us to design websites and pages for the device used to view them. This means we produce smaller images for smaller screens. After all why put a 1900 pixel image on a screen that is only 400 pixels wide?
You may not be able to do this, but, with the rise and rise of smaller devices, you should try to make it happen.
I hope this has been useful for you, feel free to drop me a line if you have any comments or queries.
Here's a few free editors you can use on your photos without buying Photoshop:
Figma | Pixlr | Fotor | Picmonkey | Gimp
Thanks to Philip Hamilton at Hamilton Underwater for the great image of the fish
