Image editing for your website
This is an area where I find most of my clients struggle, so I thought I'd offer some advice and possible solutions.
There are 2 attributes an image has for use online:
- It's dimensions. For example 4000x3000 pixels on an iPhone 11
- It's quality. For example 92% on an iPhone 11. 99% of a good DLSR, 86% on other mobile devices.
So why should you care? Images are the biggest cause of slow websites.
This article is about using AFFINITY PHOTO, an amazing photo editor for just £49.99 one time charge https://affinity.serif.com/en-gb/photo/ We recommend this to all our clients.
The main interface information you need for image editing in Affinity Photo
Here's what the program looks like on your screen:
If you don't have an image to play with download our example image here and right mouse click over it and use SAVE IMAGE AS to save it to your local drive.
The following process might look a little complex but it will just take you a few minutes to do this for one image, and once you've got some experience you will do all this without thinking. The difference this will make to the speed of your website is huge.
Changing the image size for your website
- Firstly ask your website developer what the image sizes are for the area you are adding them.
- For galleries we recommend a maximum width and height of 1500-2000 pixels so the image will show well on all screen sizes. This assumes your gallery auto sizes.
- For images on your page within content we recommend a third of the overall width, so if your site is 1200 pixels wide on desktop use 400 pixels wide for your image.
- For images within content that are to be full width on your screen then the width of the content, which would normally be a maximum of 1200 pixels.
- Go to the directory on your hard drive you use for your website and create a new directory. For example "site images".
- Open Affinity Photo
- Go to FILE > OPEN and select the image from your hard drive you want to resize.
- See the image below for the file details.
- Let's assume we are adding this image into a gallery and the best size for this is 1200x800 pixels.
- From the top menu select DOCUMENT > RESIZE DOCUMENT which opened a window.
- Against SIZE there are two figures and a padlock. The padlock ensures the image proportions are maintained, in 99% of cases leave this locked.
- In the first box put 1200 and the second box will change to the height to keep the image in proportions.
- In our example this changes to 900px.
- The DPI can be left at 72dpi for screens, the other options are for Mac and print.
- Now click on RESIZE and you'll see the data in the top right change. The image is now 1200x900px and the file size is 1.08MB
- In our example to make our image the required size of 1200x800 pixels we now need to crop the image to remove the extra 00 height pixels.
- Click on the CROP tool in the left icon list. It's the offset square with a line through it under the dropper.
- You have several option for cropping here. In the toolbar you will see MODE: UNCONSTRAINED. In this mode you can drag the edges of the crop area about as required. I prefer ABSOLUTE DIMENSIONS so you can add 1200 and 800 in the boxes and the crop area changes to this size. Then you can drag the box about until it covers the area you want to crop around. Then click enter to crop or APPLY in the top left
- You now have a 1200x800 pixel image ready to optimise.
Optimising and saving your image for uploading to your website
- In our example image you will see that even though it's 1200x800 pixels in size it's still 0.96MB or 960KB which is still way too large for your website.
- Most images from a camera or a phone are saved at 86-99% quality but for screens we only need 80% or even less for certain images.
- To optimise our image and save it for uploading got to FILE > EXPORT
- Select the file format from the top strip, JPEG is the best for website photos.
- Click on JPEG and the settings will now show.
- Leave all the settings at default except QUALITY. Type 80 in the box that says 100 or move the slider.
- You will see the file is now down to 186kb, 6 times smaller that it was at 100%.
- The difference in file size will depend on the image but there is always a huge file size saving.
- If it's a very large image click on MORE and tick PROGRESSIVE. This loads a low res image immediately and then the rest follows. It saves having a large blank space on your site at page load.
- Click on EXPORT and give the file a name you'll recognise in a years time. If it's a product and you have several images then call them product01-01.jpg, product01-02.jpg, etc. This will make coming back to your site and looking for images much easier in the future.
- Save to a local directory like the one I suggested you setup "/website/site images/" and then go to your website CMS and add it to your website.
Job done, now reward yourself with a nice cup of whatever takes your fancy 🙂
There is so much more you can do with this software so if you fancy learning more there are video tutorials on every subject here.
