We have already covered how using your own photos, graphics and images will make you unique on the web. But exactly how do we resize photos taken by camera phones and make them web ready?
You can of course use Photoshop or Affinity Photo. But what if you do not want to spend money on an image handling program?
Canva is really popular among bloggers and new website owners.
But Canva is not an image editing program. Canva is more about providing a simple interface and ready to use templates.
There is however a free image editing program that will help you scale, resize and compress images. Let me introduce you to GIMP.
GIMP is completely free to use and it is a very powerful image and photo management program.
GIMP was not love at first sight for me
To be honest I did not like GIMP at first. I found Affinity photo much easier to use. Probably because the interface reminded me a lot of Photoshop.
And if you have read my earlier articles on image management you know that I actually bought Photoshop a long time ago. But when Photoshop switched to a subscription based model I no longer had access.
I switched to Affinity Photo and it is a good program.
Still, when you build your first website you have no money coming in. And even the smallest expense needs to be justified.
So as Affinity Photo is a paid for program – albeit with a very generous trial period – I decided to look at options.
This is when I decided to look into GIMP again.
And I am pleased to report that GIMP ticks all the boxes.
With GIMP you can crop, resize and compress images and photos in 3 very simple steps.
Canva – it doesn’t have to be all or nothing
The free option with Canva can be a lifesaver when we first start. We work hard to build a website that will make us money. But in the beginning it is all about spending wisely as there often is nothing coming in.
And if you want to resize an image you need to upgrade to the paid version.
Still there are tasks where Canva can help you be more productive and efficient.
Canva is a great tool when you work with platforms like Pinterest, Instagram and Facebook. There are ready made templates where you build nice designs by simply using the drag´n drop interface.
And this is available in the free version
Gimp picking up where Canva falls short
I do like Canva but not when I need to scale, resize or compress images.
The paid version of Canva does offer more features but it does not come close to Affinity Photo or Gimp.
Photos sitting on camera phones – unused
Today we take photos with our smartphones like there is no tomorrow.
And photos tend to be used immediately – or not at all.
But when you are running a website you often need photos to support your content.
You may use the free options like Pixabay for sourcing images. Or maybe you even spend money on paid image bank service subscriptions.
And I get it. Some photos are difficult to come by. You need to have been in Paris to have an original photo of the Eiffel Tower.
But what about all the other types of photos? You know, the ones that are more general and communicate a feeling or a specific action word.
Could you not take those photos yourself?
I bet you could.
And with GIMP you could have unique photos that cost you nothing to crop, resize and compress.
Photos and images on websites
I run several websites but here on Gameplanfi I do not use that many photos.
I do however use a header image on each article and the dimensions are 700 by 300.
So how do I find images that fit my needs?
Using Gimp to scale, resize and compress images (for free)
Photos we take with mobiles or cameras will be a lot bigger than what we need.
And when we download from image banks like Pixabay or PAI ALT we get several download options but rarely ratios and dimensions that fit our needs.
This is where Gimp can help us solve 3 problems with just a few clicks of the mouse.
Practice makes perfect
I will go through each step with images – and it is simple.
It may however seem a bit “much” in the beginning. But trust me that it is simple. With a little bit of practice you will perform the necessary steps with ease.
This article explains why it is important to have correctly sized and compressed images on your website. It is all about speed and ultimately user experience.
Understanding why there are 3 separate steps
Before I show you how to use Gimp to scale, resize and compress images and photos I will explain what it is we are actually doing.
We are working with 3 different steps. It may seem complicated but it is not. I can easily complete all three steps in less than a minute just to give you a frame of reference.
The steps are:
- Adjust the aspect ratio of the image
- Correct the size of the image
- Compress the image to reduce file size
What does aspect ratio mean?
The aspect ratio of an image expresses the ratio of the image width to its height. We use two numbers separated by a colon (:) to show the aspect ratio.
I want images that are 700 (width) by 300 (height). This can be expressed as 700:300 or more simply 7:3.
When we start by editing the image to the correct aspect ratio we can get a good representation of the motive without risking distortion or the wrong image size.
We may also find out that a particular image will not work for us as we will lose too much of the motive.
Understanding why the correct dimensions are important
I want my images to be 700 pixels (width) by 300 pixels (height).
If I use an image that is smaller the images will stretch and appear blurry or out of focus.
On the other hand will an image that is too big be shown correctly but be unnecessarily big for the purpose. And bigger images take longer to load so we are hurting loading time and the user experience will suffer.
This is why we always size our images to the exact dimensions needed.
Dimension is one part of file size of any given image
We have already established that an image that is too big will take longer to load. Makes sense after all.
The other part of correct image handling is called compression.
The web cannot display the same image quality as for example a magazine.
When we compress the image we remove certain parts of the image quality to make the file smaller. We are always balancing quality with file size and speed.
And trust me. You can reduce the quality quite a bit and still not notice any difference when you view the image on the web.
Are you with me so far? Keep reading.
3 easy steps to scale, resize and compress images with Gimp
If you want to go along with the tutorial you can download Gimp for free. It is a very user-friendly installation where you simply follow along.
When I first started working with GIMP I watched videos and read tutorials.
But their screens never looked like mine. I could not find the menus and options that the tutorials showed on the screen.
The only thing you need to do is to go to the top menu bar and select Tools > Transform Tools > Crop.
When you have installed and opened the program you need to open the image you are editing.
To open your image you select File > Open and then locate the file you want to open.
I have chosen a photo from a morning cup of coffee by Lake Como in Italy. The photo is 1672 x 1241 and I need it to be transformed to the aspect ratio of 7:3 to fit my needs.
The question is of course if I will lose too much of the image when I scale it to the correct aspect ratio.
I want to keep the lake and the cup of coffee in my image.
Pro tip: When you select images consider where the image will be used to make sure the aspect ratio will fit your needs.
Adjust the aspect ratio of the image
To adjust the aspect ratio we select the Crop tool and the select the following check boxes:
- Delete cropped pixels
- Fixed
- Select Aspect ratio
Next we set the aspect ratio to 7:3 (using my example)
That’s it.
Now we simply place our mouse cursor anywhere in the image, click and drag while holding the click button.
When we are happy with our selection we release the button.
The selected area will now be bright whereas the area we will delete is a darker or muted colour (see image below).
If you are not happy with your initial selection simply click anywhere outside the selection and start again.
To make the selection stick we press ENTER on our keyboard
The image is now formatted to the correct aspect ratio for me (7:3) but it is too big.
But that is an easy fix.
The good news is that we are almost done.
Most of the work is done and we only have two short steps left.
Stay with me. We are almost there.
Correct the size of the image
Now that our image has the correct aspect ratio we know exactly what our image will look like on our website.
Next we just need to resize it to the correct size. Remember, we do not want to use an image that is larger than int needs to be.
A large image will display correctly but weigh too much and make the website load slower.
To resize the image we go Image > Scale Image.
Here we can see that the image we are working with is now 1672 px (width) by 712 px (height). We can also see that the resolution is 300 for both X and Y resolution.
All we do now is to change the top value 1672 px to 700 and the bottom value will adjust to 300.
See how it adjusts automatically as we have already set the correct aspect ratio.
We also change the resolution to 96 in the top box and the lower value will adjust automatically.
Now we simply click Scale to resize our image to 700 x 300 per our needs.
Compress the image to reduce file size
Our image is now ready to be used and all we need to do is to give the image a name and then save it for use on our website.
But we will of course also compress the image to make the file size as small as possible without losing quality.
This is important as speed matters and if you are in doubt read about Google Core Web Vitals and the importance of the user experience.
To save and compress the image we select File > Export As.
Here we name the image, select the location where we want to save the image and then click Export.
When we click Export we are taken to a menu where we specify the level of quality we want to use for our image.
Please read on before you say “best quality” of course.
Remember that we talked about how quality and file size are linked.
And that we do not need maximum quality on the Web as our eyes will not notice the difference.
I have saved the image we have worked with in two different qualities below. One using quality 100 and the other using the quality setting 65.
You have to decide if you can spot the difference.
The quality you end up using is of course up to you. But do remember, speed matters and file size will impact the loading time of your website.
Oh, and maybe I should point out that the image with the quality setting of 65 has a file size of 47 kB. But quality setting 100 took us to a whopping 225 kB.
And this is why compressing images is an important final step.
Just to remind you, here are answers to some questions you may still have:
