Time and time again studies have proven that web page loading times are directly linked to website conversion rates, and yet many people (and digital marketing agencies) still overlook this key area of website optimisation. Google understands that page speed is the first step to providing a good user experience, which is why it is now an integral part of Google's ranking algorithm. Getting your web pages to load as quickly as possible will likely mean higher search engine rankings, more organic search traffic and more conversions, and one of the most effective methods of reducing page load times is to reduce the size of your image files.
Here is a helpful video and step-by-step guide on how to prepare your images for your website using the free Pixlr web app.
For the folks with Photoshop, check out How to Optimise an Image for Web using Photoshop
How to resize an image
Step 1
Open an image into Pixlr. Select Image > Image Size.
Step 2
With ‘Constrain Proportions’ enter a value for either the Width or Height.
Please note: It is not recommended to scale up the original pixel size of an image. While a small amount is acceptable a large amount will cause the image to become distorted and pixelated.
Step 3
Click Ok. Your image has now been resized.
How to crop an image
Step 1
Select the crop tool from the tools panel.
Step 2
You can now do one of the following:
Crop Constraint No Restriction – To freely crop an area of the image select ‘No Restriction’ from the top toolbar. Next click and drag a selection around your image. You can then refine your selection by dragging out the selection from the corner or edges.
Crop Constraint Output Size – If you already know the final image size enter in a pixel value for height and width. Next click and drag a selection around your image. The selection will be locked to the ratio you set. You can then refine your selection by dragging out the selection from the corner or edges.
Step 3
To commit your selection Double Click within the selection.
How to save an image for web
Step 1
To save your resized image, select File > Save
Step 2
Select the format to JPEG. To optimize the compression of your image adjust the Quality. The value you enter will depend on your image, the key is to lower the number as much as possible without compromising the quality of the image. Keep an eye on the output file size In the bottom right corner.
Step 3
When you are satisfied. Click Ok.
How to optimise an image further
To achieve that perfect score on Google PageSpeed Insights you will need to compress your images further. We recommend the following image optimising websites: optimizilla.com and tinyjpg.com.
The before image started at 174KB, the after image is now 121KB – that’s a 31% reduction without greatly affecting the quality. Well worth doing!
We hope this guide has been helpful. If you have any queries leave a comment below
