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.
Image courtesy of cpt.spock
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…
Getting started
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!
I’m also assuming you have an image that needs resizing. If not, go and find one – a digital snap you’ve taken yourself will do, or have a look on flickr or stock.xchng.
Step 1: open the image in GIMP
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.
Step 2: resize the image
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.
Step 3: save the image
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.
Step 4: upload the image to your web server
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.
Related posts:
Thanks for this simple tutorial
Thanks a lot really save my time. Nice going
There are also a number of online tools which you can use for simple image manipulation – which is useful particularly if for some reason you’re restricted from installing software on the machine you’re using.
wow! great article! i didn’t know gimp, i’ve always been a photoshop user, and maybe sometimes gimp is better and faster. thank you for the tutorial, it is very clear and you give very good tips. and i agree with you, we should care about uploading too heavy photos, because they annoy everyone of us because of the time they need to load and the bandwidth they use!again, great post! thanks!
Thanks for the tip off! I downloaded GIMP and it’s great, I was using Paint Shop Pro before that and it was much too technical for what I needed – resizing images for my law blog. Thanks!