Although still often overlooked, page speed is arguably the single biggest factor affecting website conversion rates. It's also now a part of Google's ranking algorithm and, as such, will affect where your website appears in Google's index. Getting your web pages to load as quickly as possible has therefore never been so important, 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 Adobe Photoshop.
For the folks without Photoshop, check out How to Optimise an Image for Web using Pixlr
How to resize an image
Step 1
Open an image into Photoshop. Select Image > Image Size.
Step 2
As we are saving for web we’ll be using pixel sizes. With ‘Constrain Proportions’ selected under ‘Pixel Dimensions’ 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 unconstrained – To freely crop an area of the image select ‘Unconstrained’ 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.
Custom size crop – If you already know the final image size enter in a pixel value for height and width followed by ‘px’ (e.g. – 1000px x 1000px). 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.
Handy tip: Holding Shift while dragging a selection will maintain the ratio.
Step 3
To commit your selection, either hit Return, Double Click within the selection, or select 
from the top toolbar.
How to save an image for web
Step 1
To save your resized image, select File > Save for Web
Step 2
From the options select 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 left corner.
Step 3
When you are satisfied. Click Save.
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 183KB, the after image is now 122KB – that’s a 33% 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
