Resizing Images

Categories: Hints & Tips, Images

One of the things clients often struggle with the most is getting their images “website ready”.  Many people simply add an image directly from their camera or mobile phone; often these images are very large in terms of file size which will slow down the speed of the page as it loads.  This has a negative impact on the experience of the user viewing the page and may adversely affect your Google rankings.

There are a bewildering array of options for photo editing so deciding what you use can be confusing.  Fortunately there is a free online tool with a simple to use image resizing  function – BeFunky. Here I’ll take you through the process of resizing an image using this useful tool.

For the purposes of this guide, I’m assuming that the image you want to edit is already saved on the computer that you’ll be working on.

Step 1

Open the image BeFunky resizing option here You’ll see a screen similar to the one below.

screenshot of befunky website

Step 2

At the top of the screen, close to the centre, there is a button called “Open”. Click this and select the “Computer” option at the top of the list.  Then navigate to the folder on your computer where the image is stored and upload it to the blank canvas in front of you.

befunky website showing an orange on a blue background

Step 3

On the far left hand side of the screen, there is a “Resize” options box.  The image I’m using on this example is from the free image website, Unsplash (Photo by davisuko) – you can see that this version is 4077px wide and 2725px high and more than 1MB in size.  This is unnecessarily big for a web page! Simply enter the new dimensions in this box, then click the “Apply” button.

Hint: if you ensure the checkbox “Lock Aspect Ratio” remains ticked, you’ll only need to change the width and the height will adjust automatically.

befunky website showing a resized image

Step 4

Your image will now have reduced in size.  Go the top of the screen and select the “save” button (next to the “Open” button you used in Step 2).  You want to select the “Computer” option again.

befunky website showing resizing options

Step 5

You’ll now have some save options.  The first is the type of image file you’d like.  Unless your image has a transparent background that you need to retain, you should select the “JPG” format (they tend to be smaller than other file sizes).  There is also an “Image Quality” option – if you slide the toggle from right to left you’ll see the impact of quality on file size – the higher the quality, the greater the file size.  In the example below I have reduced the quality to 95%; this gives a good image quality but at a much reduced file size of 62KB. Finally, select “Save” to download the image to your computer. You’ve now reduced your image size!

befunky website showing resized image saving options

Final Word

In the example above I have reduced the image to a mere 16% of it’s original size with no visible impact on the quality of the file but a with a positive impact on  the speed of page loading and the user experience!

Share This

Contact Me

Due to my current workload I’m not taking on any new development projects at this time.  To discuss your alternative options, you can still use the button below to contact me.

Get in Touch