Have you taken note of your image sizes? A guide on image compression and how to do it

18 November 2011

One of the most distressing moments in a computer professional’s life is when their mother tells them she wants to email them some photos. Unless you have a very high speed internet connection, this means your inbox will be backed up for the next hour as you download six image files that would barely fit on a CD.

We can blame the problem on the free availability of high speed broadband and near-infinite storage, or we can blame it on ignorance, but most people have no concept of what a megabyte actually is. When you ask them how big the image is, they will most likely say “about the size of the screen, maybe a bit narrower”.

Unfortunately, this ignorance of file sizes extends to people who build and own websites - if you didn’t grow up with a background in computers, and learnt how to build websites using free tools such as WordPress, then you might not be too savvy about speeding up your user experience.

Here are a few things to note, before we get to the actual process of compressing an image.

File Formats

The most common types of image files on the internet are:

• JPEG - These files can lose quality, but generally load the fastest (are the smallest in terms of file size)
• PNG (Portable Network Graphics) - A newer format that does not lose quality, and always looks better on the web, but can be around 25% larger than JPEG files
• GIF - Usually used for moving images, or tiny, flat icons.

If your images are not in these file formats (you can tell by the file extension at the end of the file), you’ll need to convert them. You can do this in Gimp, Photoshop (if you have it), or even MS Paint, simply by changing the File Type dropdown menu when you click “Save As”.

Now that your file is in the right format, it’s time to make sure it’s sized appropriately. If you have a blog, or just about any website, you probably don’t need your image to be more than 600 pixels wide. Any more and your website will simply resize it to fit. If you want visitors to be able to click on it to see a larger version, we’ll deal with that in a minute.

First, what you need to do is open the file in an image editing program. If you have Photoshop, that will do, but free editors like The Gimp or Paint.Net will work just as well.

• Simply click “Image” and then “Resize”
• Make sure “Maintain Aspect Ratio” is selected (this will make sure your image is resized in proportion) and change the width to the maximum width of where it will be displayed.
• Save the file (preferably as a new file, rather than overwriting the original), making sure it is in one of the file formats above

This will then save the file in a smaller size for you to upload.

So what is an acceptable file size? Well, for most web-pages, you want your images to load quickly. A file that is around 600 pixels wide should be no more than 100kb - any larger and your site might take too long to load for people with small internet connections.

Lastly, if you want your visitors to be able to see an enlarged version, go back to your original image and see what size it is. If you took it with a digital camera, it will probably be around 3000 pixels wide, which is nearly 3 times the width of the average computer screen. Size this down to about 1200 pixels, and upload the file separately to your web server.

Lastly, link the image displayed on your web page to the larger file you uploaded, and when visitors click it they will be taken to the bigger file.