Optimising Graphics for your Website
Optimising your graphics (photos and images) for your website
What does that mean?
Many of my clients struggle with graphics optimisation. What do I mean by that? Well, basically, making your photos and graphics file size small enough to be uploaded onto your website quickly and easily, and so that when they display you don’t get those awful slow-loading pictures that take ages so your potential client loses interest and goes to another page or site.
So what does this mean in practice? Ideally for a web page you would have most of your graphics at a size of about 100KB. So that lovely photo of about 5MB you took that you want to show everyone in your blog? Well, you’re going to have to do a little bit of work on it first, before you upload it onto your site…
So how are you going to do that? Good question. An excellent free tool I have found is Irfanview. It can be downloaded quickly and easily and installed onto your PC (make sure you install all the available plugins too). I haven’t found an alternative yet for the Mac users out there – but certainly Photoshop will do it too, and there are online alternatives, for example many people use TinyPNG or TinyJPG
There’s two main steps to optimising that photo or image and they are:
- Make the size smaller
- Compress it.
1. Making your image smaller
The first step in optimising your graphics is to reduce the image size. Let’s consider a typical photo, and open it from within your graphics optimisation program (I’m using Irfanview here, but you may be using something else)
So the photo is 5184 pixels wide and 3456 high. In comparison the size of most screens will be a maximum or around 2000 pixels, so immediately we see that the size can be reduced somewhat just by making it physically smaller. Most gallery images on websites will be around 1000-1500 pixels wide, so let’s go with 1200 pixels. Obviously both sides will have to be made smaller to maintain the aspect ratio.
We can do this very quickly and easily by opening it in Irfanview (or whichever program you are using). In Irfanview we would chose the following menu options:
- Image > Resize/Resample
In this dialog box you will see that the width and height are the previously stated values of 5184 pixels wide and 3456 high.
Change the width to the new value required (in this case I have set it to be 1200 pixels, which is likely to be OK for most circumstances). As the box underneath “Preserve aspect ratio” is ticked, you will notice that the height changes proportionately. Once you have done this click on the OK button and then save your image to your computer.
Take a look at the image file on your computer. You will notice that the file size has changed dramatically. Already, for this particular image, it is now 462kB instead of the whopping 4930kB that it was before!
2. Compressing your image
The next stage then is to shrink the file size in KB. We’re aiming for a size of approximately 100KB for an image to load quickly and efficiently on most devices, and maintain a reasonable quality. Let’s do this in Irfanview using the Save For Web Feature on the File menu. Most other graphics programs like Photoshop for example have similar features. Choose the following options from the menu:
- File > Save for Web (plugin)
In this dialog box you can see on the left the original image, in this case at a size of about 462KB. This is much smaller than the original image size, but it’s still quite big to load quickly. The optimised image on the right shows an image size of about 90KB, which is perfectly adequate for most purposes. You’ll actually notice little difference in the quality of the image.
If you require a better quality image, for example if you are using it for a large slider image or main photo on your site, you can adjust the “Quality” slider until you get the required size. Probably around 200KB would be OK for this use in most circumstances.
To get a feel for which image size best suits your application, it’s best to experiment until you become used to what works best for you. Then you’ll find you’ll be able to do all this very quickly and easily. Please leave any comments or questions below. Happy image squashing!