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 2592x1936 pixels on an iPhone 5s
- It's quality. For example 92% on an iPhone 5s. 99% of a good DLSR, 86% on other mobile devices.
So why should you care? Well for a website or online gallery these are both way too large. To change these you will need a photo editor. Here are my 2 favorite editors:
Online - https://pixlr.com - Free and fairly simple to use.
Offline - Affinity Photo for PC and MAC
If you are doing a lot of images for your ecommerce shop or even a gallery on your own website you really need to do this work on your own device. I highly recommend Affinity Photo for this. At £49 it's a bargain and will also open Photoshop files as a bonus. You can buy here https://affinity.serif.com/en-gb/photo/ or get a 10 day trial here https://affinity.serif.com/en-gb/signup/trial/photo/
Making changes to your individual images for use on the web with 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 height of 800 pixels so the image will show well on all screen sizes.
- For images on your page we recommend a third of the overall width, so if your site is 1000 pixels wide on desktop use 330 pixels wide for your image.
- Go to the area 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
- We now need to crop the image to remove 100 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%
- 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.