As I mentioned previously, a few well-chosen images can really help to give your blog a visual lift. One problem that you may have come across though is that often image files can be quite substantial in terms of size. So today I want to show you how to resize them using GIMP, a popular open-source image editor.
Should I care?
Well yes, you should. Big files use more bandwidth, which translates to slower loading times for your visitors; if your page takes too long to come up, they might just give up and look elsewhere. And bear in mind there are still people using dial-up connections to access the internet – be kind to them.
It also wastes your bandwidth, which is something to bear in mind if you host the images on your own server. Most hosting packages have limits to the amount of disk space and bandwidth allocated to each account, even if they claim to be “unlimited”. If you experience a sudden surge of traffic (as you might if you hit the popular page in a social bookmarking site), you might find yourself chewing through your monthly bandwidth allocation in just a few days.
Note that it’s perfectly easy to change the apparent size of an image on-screen using HTML or CSS styling, but this will not change the amount of data that’s getting downloaded to the browser. For that, you need to read on…
If you don’t already have GIMP, now’s the time to download and install it. GIMP is open-source (ie free), and cross-platform (it runs on Windows, Linux and Mac), so you’ve got no excuse!
There are different ways of doing this:
- via the menu: select File > Open… from the GIMP menu, navigate to the file in your file system, and click Open.
- or you can simply drag the image file onto the GIMP palette from your file system.
The width of the main content area on this blog is 500 pixels, but most images you take with a digital camera, or download from the internet are a lot bigger. So I like to scale down any images I use to around 450px wide, so they fit in nicely without stretching or squashing them. Bear in mind that halving the width of an image while maintaining the same aspect ratio reduces the file size by a factor of 4!.
- Select Image > Scale Image… from the menu in the editor window.
- Change the Width field to the size you require. As long as you have the aspect lock turned on, GIMP should calculate the height for you, in order to retain the same aspect ratio. You can of course over-ride this if you want the image to appear stretched horizontally or vertically.
- Leave the other values as they are and click the Scale button.
Most images on the web are saved in .jpg format, which is an efficient way of compressing photographic images. There is a trade-off here between file size and image quality, so you’ll have to be the judge of how much compression to apply. Generally I think a ratio of 50-60% works well, but it does depend somewhat on the image.
- Select File > Save As… from the menu in the editor window.
- Enter a Name and file extension (.jpg)
- Select the location where you would like the file saved.
- Click the Save button.
- A window may pop up warning you that the “JPEG plugin cannot handle transparency”, and that your image will be flattened. Click Export.
- In the Save as JPG window, tick the Show preview in image window checkbox. This lets you see the effect of adjusting the Quality ratio, and also has the benefit of showing you the target file size.
- Adjust the Quality value to around 50, in order to minimize the file size while still retaining some image quality (you may want to tweak it up or down a bit).
- Make sure the Advanced Options are set as below.
- Click Save.
I’m not going to say too much about this; instead I’ll direct you to a previous post I did on how to use FileZilla to FTP files to your web server.
That concludes this tutorial. Thanks for stopping by.