Is a picture really worth a thousand words? When it comes to your website, the answer is sometimes yes and sometimes no.
The right image attracts the eye and can convey your message better than words could. If your website has too many words and too few images, your reader will become bored and leave. Nobody wants that. So using images is good.
But it’s also easy to make a mess of using images. If they’re not properly sized, large images will cause your website to load more slowly. Most users won’t wait for a slow-loading web page, so you’ll lose some of your audience. And a slow-loading website could lower your search engine rankings.
A slow page load time is a more common website problem than you might think. Mobile users, in particular, are likely to face this problem since their internet connection is often slower. According to statistics from KISSmetrics, over 70% of users on mobile devices have come across a slow-loading website. KISSmetrics also found that 40% of users will leave a website if it hasn’t loaded in three seconds.
As a website owner, you want to keep the benefits of using images on your website while minimising the downsides of using images that slow your page load time down. The question is, how do you do that? The answer is to resize your images and optimise your image file sizes.
In this tutorial, we’ll explain how to properly resize images so that they don’t negatively impact your website. We’ll explain the two ways that images can be too large. Finally, we’ll explore some free and low-cost tools that let you optimise the size of your images.
Why Image Size Is Important
Whether you take the images you use on your website yourself or buy them from a stock photo site, it’s important that you make sure that they are correctly sized for the web before you add them to your site.
There are basically two potential image size problems you could face:
- Physical image size. This refers to the dimensions of the image – the height and width. For websites, dimensions are measured in pixels.
- Image file size. This refers to the amount of space required to store and load an image. File size is typically measured in kilobytes (KB) or megabytes (MB).
If your image is too large physically for the screen size your reader is using and your website doesn’t automatically resize it, your reader may not be able to see the entire image. This makes your website look sloppy. The web browser might automatically scale a large image to fit on the page, however the load time remains the same. Plus, a physically large image likely has a large file size, which brings us to our second image size problem.
If your image file size is too large, your image takes up more space on your web hosting server. The more images you store, the more space you take up. If your web hosting service has a storage limit, your large images could cause you to exceed it.
As we mentioned earlier, large image files cause your web page to load more slowly. A slow-loading page makes for a bad user experience. Most readers don’t like to wait. Page load time is also a factor on how the search engines (including Google) view your page.
If you’re wondering if images are slowing your website down, use Google’s PageSpeed Insights Tool to find out. This tool analyses your page and identifies areas to improve, including image optimisation.
Now that you understand the problem, it’s time to fix it. Let’s take a look at how to change your image size, starting with physical size.
How to Change the Physical Size of an Image
- If you’re using an image from a stock image site or a high-resolution camera, it’s likely to be quite large. It’s not unusual for such an image to be over 3000 pixels wide. That’s much too large to publish to your website.
- Fortunately, many photo editing packages allow you to change the physical size of your images. We’ll look at three such tools:
- GIMP – GIMP is free image manipulation software that can be used for personal or commercial uses. It has the ability to resize images.
- Snagit – Snagit is screen capture software that can also be used to resize images and compress file size. It is not free, but a free trial is available.
- PicMonkey – This is an online photo editor that you can use to resize or compress your photos. The free version is adequate for resizing images.
As a website owner, you’ll most likely be working with .png or .jpg files. For the purposes of this tutorial, we’ll work with a .jpg file.
To resize a photo with GIMP, open the file in GIMP. Enter Image > Scale Image… to bring up the Scale Image dialog box.
Type the new Width or Height in the dialog box to resize the image. As long as the chain symbol to the right of the Width and Height boxes is unbroken, GIMP preserves the original width to height ratio.
To resize a photo with Snagit, open the file in Snagit. Enter Image > Resize Image to bring up the Resize dialog box.
Make sure the lock is closed to keep your image dimensions proportional.
Open the file that you wish to resize in PicMonkey. Click the Resize option on the lower left side of the screen. Type in the resizing dimensions. Make sure that the box to keep the proportions the same is checked.
Click Apply when you are done, then click the Save button at the top of the screen. The system prompts you to choose an image quality.
Note that you have three Quality options: Roger, Pierce, and Sean. The Roger option will create the smallest file size, but the image will also have the lowest resolution. Likewise, the Sean option will create a higher resolution image, but it will also have a slightly larger file size.
After using an editing tool to resize your image, you’ll probably notice that the file size has been somewhat reduced. In fact, the file size of images that were resized using Snagit were as small or smaller than files compressed using some photo compression tools. But for other photo editing tools, you can probably improve the file size. Let’s look at how to further compress the file size of an image.
How to Change the File Size of an Image
There are some helpful tools you can use to further reduce the file size of your image after you’ve compressed it. In this tutorial, we’ll examine two online tools:
- TinyPNG – This is a photo compression tool that reduces the file size of .jpg or .png files using smart lossy compression. The online version is free. You can also pay for a Pro account.
- ReSmush.it – This is a free tool that can be added to certain website platforms including WordPress and Magento. The WordPress plugin is available here.
For the purposes of this tutorial, we used the online version of TinyPNG. Drag the file you want to compress onto the compression area. TinyPNG immediately begins compressing your file.
Once your image file has been optimised, you can download it or save it to your Dropbox.
If you use WordPress, you’re probably already familiar with plugins. Use the WordPress Plugins tool to install and activate ReSmush.it.
ReSmush.it automatically reduces the size of your file, but it does not change the dimensions.
In the example we’ve been using, the file size was reduced by 1 MB.
Using properly sized images improves your website visitors experience. Also, a faster loading web page may help to rank it higher in the search engines.
With the right tools, you can optimise stock photos or professional images to use on your site. Don’t let improperly sized images and image files hold your website back.
Got questions? Contact me today to see how I can help improve your website.