Resizing images for websites
For those who aren’t design professionals, resizing images for use on websites can be a challenge. But a couple of free online tools make the whole process a lot easier.
- by Peter Labrow
Many websites are managed by people who aren’t designers. If there’s one thing they struggle with, it’s resizing images – even on websites which are content-managed.
Design professionals take this process for granted. They’re experienced, have the right tools and know what they’re doing. Yet the process can be complex for non-professionals and surprisingly easy to get wrong.
Plus, many companies don’t want to fork out big bucks for professional image-editing software. They need tools which are simple and inexpensive.
So, let’s take a couple of free online image-editing tools and break the process down into two simple steps:
- Getting the image to be the right dimensions (so that it fits on the page).
- Compressing the image so the file size is as small as possible (so that it downloads quickly).
Resizing a photo
Fotor is a great free tool for resizing images. (It does a lot more besides, plus there are downloadable apps for Windows, Mac OS, Android and iOS, but we’ll set those to one side.)
You start by going to the Fotor website (http://www.fotor.com) and choosing ‘edit a photo’.
You’ll be prompted to choose a photo from your hard drive. Once this is done, you’ll be taken to the image editor. Although there are lots of options, we’re just going to crop the image.
Your website designer should have provided you with the best dimensions for images on your website. For some images (such as header images) the dimensions will be a specific width and height. If they are bigger or small, the header won’t fit. For other images (such as inside the central part of the page) usually only the width is important.
For this example, we’ll assume that both width and height are important.
You’ll see under the word ‘CROP’ that there are two dimensions – these are the current size of your photo.
The first thing to do is to ensure that the box which says ‘keep proportions’ is unchecked – because we’re going to change the proportions of the image. Now type in the size required for the image – in our case this is 950 x 350. You’ll see that there is now a cropping box of the right dimensions over the image.
Dragging the handles at the sides and corners will allow you to change how the image is cropped. But don’t do this!
Because our image is a specific width and height, we now need to check the ‘keep proportions’ checkbox, so that when we resize the cropping box, we don’t change its shape.
Now you can resize the box and drag it around until the image is cropped just the way you want it.
When you are happy, press the ‘apply’ button. Your image is now cropped.
(As I said, you can make other changes to the photo such as altering its colour and so on. Feel free to experiment.)
You’ll notice that, during the process of deciding how to crop the image that the image size (in terms of width and height) has changed, in our case to 1541 x 567. That’s fine, because the dimensions of the image are correct, but we now need to resize it. This is simply a question of clicking ‘RESIZE’ and entering 950 x 350. Because of rounding errors you may need to uncheck ‘keep proportions’ and tweak the size of one side by a pixel or two. No biggie.
You can now save the cropped version of the photo. To do this, click on ‘save’ which you’ll see above the photo. You’ll see the file saving (but not to your hard drive) along with some options to change the quality of the image – which we’re going to ignore.
There are various options to save the image to online services such as Dropbox and Facebook, but we want the file itself. So click the ‘save’ button at the left.
You can now save your file to your hard drive.
Compress the photo
Photos taken with digital cameras tend to have large file sizes (so they look good when printed out). But on the Web, a large file size means that the image can take an age to download.
Design professionals compress images so that – although they look more or less the same – the file size is much smaller.
To do this, we’re going to use another free tool, Compressor. This step isn’t optional! An uncompressed file can easily be twice the size of a compressed file. This makes your website slow to browse, which is frustrating for visitors.
To compress your image, go to https://compressor.io/ -– you’ll see a simple interface, where you can either drag and drop an image onto the page, or click the ‘select file’ button.
Drag your image onto the page.
The image will upload and compress automatically. Compressor will show you how much it’s managed to squeeze out of the image. In our case, this is 31% – not to be sniffed at.
You can then download your image (or, if you want, move it directly to Dropbox or Google Drive, if that’s where you store your stuff).
Do these tools deliver professional results?
Let’s be realistic. A couple of free tools can’t match the kind of software and experience a professional designer has. But for many websites, the results are absolutely fine – in fact, it’s likely only a professional could tell the difference.
What about alternative tools?
Yes, there are lots of alternatives to the tools I’ve used here and I don’t single these out as being the best. But they do get the job done.