How To Optimize Images for Your Website

Jan 19, 2018

​Image Editing Tips For Content Editorsimage optimisation speed page load

In this post we will talk about how to optimize images and why image optimization is important. We have geared the article towards content editors but the information in this post is universally applicable to anyone working with images online.  
 

Why is image optimization important?

Image optimization is really important because it affects page loading speed, which in turn affects the search engine rank and user behaviour. Take for example if you were to upload 5 uncompressed banner images to your homepage slider. The combined file size of these images roughly translates to 10MB and will typically take the browser 10 seconds to load the page with a high speed internet connection. If you were to optimize your images these 5 images will total approximately 500kb which translates to 2 seconds wait time with that same internet connection. This ends up saving your visitors 8 seconds when they load the page! In the end your visitors will thank you for giving them 8 seconds back to their day!
 
Let’s get started!

Step 1. Edit the image by cropping and resizing 

The first step to image optimization is to edit the image you want to upload to your webpage. Deciding on the size or dimensions that you will need requires a bit of knowledge of what your website is optimized for. Assuming that your site is responsive, you only have to accommodate the largest desktop screen size. The best way to determine the dimensions you will need is to base the size on existing images that are already up on your site. Check with your graphic designer for documentation because the sizes you need for a particular use may already be known. If not you can always see an image properties by right clicking it or downloading it.

Here is an example of how you can tell what the image size should be from the Kentico CMS from edit page.

image slideshow size form
Once you know what the size should be then you will need to open the original image in your favourite image editing tool. We use Photoshop here but there are less costly options for the occasional user. Here are couple free photo editors:

aviary image editor          Gravit designer

Open your editor to crop and resize the image to match the dimensions and resolution required for your webpage. Then save the file. Photoshop has a "save for web" function when saving the file. Saving for web will convert the file format to PNG or JPG depending on image colours. As a quick guide JPG are best for photos with many colours and PNG file types are best for illustrations and images that have transparent backgrounds.
 

Step 2. Compress the Edited Image File 

After saving the file for web you will then want to compress the file even more. 
Here are 2 free online tools that we use to compress the file after you've resized and cropped the image:

Tinypng logo             image recycle logo


Simply drag your new image in the browser area and wait while the compression tool converts the image to smaller image size. Then download the file to your local folder. Use this file in your website and your users and google will appreciate it.

tinypng image compression optimization
 

The result is a fully optimized image ready to be used for your webpage. 

Want to check if your images are optimized? Go ahead and test your page using Google PageSpeed Insights tool and check the Optimize images tab. If there are files listed here, and there always are, then take advantage of properly resizing and compressing images to save many bytes of data.


About the Author

Tony Tullio

Tony Tullio is a veteran in the interactive business and Director/Founder at Inorbital and always looking for great web apps and useful websites. Let us know what you think about this topic by commenting or rating or connect with him via Twitter and LinkedIn