Image Editing Tips For Content Editors
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?
In this post we will talk about how to optimize images and 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.
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. Our favourite free images editor is GIMP. Download here: https://www.gimp.org/downloads/
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:
www.imagerecycle.com
www.tinypng.com
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.
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.
Tony
Director and Founder
Inorbital founder and digital solution architect with over 20 years’ experience planning and directing dynamic web presence and web applications for all types of savvy organizations. When not directing Inorbital you can find him actively trying something completely new.