Optimising Images For the Web Using Photoshop
Before uploading images to your site you should optimise them for web. This is important for SEO purposes as it keeps the page file weight down. We use this process in-house to optimise your initial content. If you are populating sections of the site yourself during the build process or swapping/adding new images in the future you should follow this guide.
Resizing an image -
Always begin this process using the highest quality file you have
Open your image in Photoshop
Crop your image to your chosen proportions following our guidelines below
Go to >File >Export >Save for Web (Legacy)
Select “JPEG” from the format dropdown in the top right corner of the window
Make sure the proportion lock is on. You should only ever size images down - if your chosen image is smaller than the size shown in our guide don’t size up, leave the image as it is and skip to step 8
Resize your image following our guidelines below, (the final size depends where the image is going on your site)
You can change the file weight of the image by altering the value in the “Quality” box or by using the slider - aim to match our guidelines below. You can view the resultant file weight in the bottom left of the window under the image preview
Check over your image by eye - make sure it isn’t distorted or pixelated
Once you have decided on your chosen file weight press the “Save” button
Give your image an SEO friendly file name and make sure to save it
Banner images -
When we initially build your site it is best that we optimise the banner images for you so please just upload the best resolution files you have with appropriate file names. The following instructions should help you in the future when you wish to change/add images by yourself or if you are adding additional case studies etc.
Crop proportions: Landscape i.e. 16:9 or 4:3
Resize: to 2500px wide
File weight: Reduce to 500kB-600kB
Please note: Banners will be significantly cropped on all sides on different screen proportions, i.e. on mobile/tablet. You should bear this in mind when selecting suitable images.
Other images likely to be full screen -
i.e. Images in a gallery that open up bigger when clicked or images where high-resolution is preferable for example product images in a shop.
Crop proportions: Landscape/portrait/square as required
Resize: to 1500px wide
File weight: Reduce to 400kB-600kB
Smaller images used on site -
i.e. Team bio photographs & images that don’t open up full screen when clicked.
Crop proportions: Landscape/portrait/square as required
Resize: to 1500px wide
File weight: Reduce to 200kB-350kB
Featured logos -
You may wish to include a number of logos of past customers/clients on your website. This is typically in a grid or list format.
It is best that we complete logo optimisation/cropping etc. tasks in-house as it can be difficult to get different sized logos looking balanced and tidy on a page at the same time as well as keeping the page loading speed down. We ask that you upload the best available versions of the original logo files.