Images, especially people, are an incredibly powerful way to engage with our audience. Therefore whenever we can, we should be using images in our posts, pages, sermons, events etc. There is a problem with images though – and that is size. I think everyone would agree that if you try and download a 5Mb photo from a website, it will be a whole lot slower than a 200kb image. Well do does Google. It checks website performance as part of the algorithm that determines where a site is placed when someone searches using Google. Therefore we need to have as well performing site as possible and one of the ways to do that is to have well optimised images.
So, what does this mean? Well to start, we have a tool called WP-Smush that automatically compresses images uploaded. It can’t however, change the dimensions or re-size an image. That needs to be done before upload.
Featured Images
For Featured Images, the image the appears at the top of a page, post, sermon, event etc with the title, the ideal size is 1600 x 400 pixels, i.e. a ratio of 4:1. That ratio is the size of the box that the image will be displayed in. If you load with different dimensions than that, a slice will be taken across the image to fit the box so you are better to choose the slice before uploading, rather than have the site do it automatically.
Home Page Sections
For Home Page sections, the images that are background to each section, the ideal size is 1680 x 1050 pixels, i.e. a ratio of 1.6:1. Once again, that is the size of the box that images will be squeezed into by the site.
How to Resize
This is not difficult and does not take much time. The steps below for Mac should take no more than a couple of minutes once you understand what you need to do.
On a Mac:
- First of all change the name of the image to include the dimensions in the file name. To do this when in the Finder, just go to File, Get Info and you will see the dimensions – something like “Dimensions: 4334 × 2401”. An example image of these dimensions is 1.6 Mb.
- Then duplicate the photo and open the source image in Preview. Once in Preview, select Tools, Adjust Size and then either select pixels or percent. Usually I will choose percent and enter 50. This changes the density of the image not the crop, so the new file will be 2167 x 1201. The same image referred to above with these dimensions is 480Kb – but looks the same on screen. I then rename the duplicate accordingly.
- We then need to take crop the image to the ideal size for the purpose. Here just drag the selection tool over the image until it is either a ratio of 4:1 or 1.6:1 per above. Don’t worry about making it the exact pixels yet, just get the ratio correct.
- Then copy that and select File, New From Clipboard.
- Then use the resize tool (Tools, Adjust Size) to adjust the size to the pixels required. As you already have the ratio correct, just enter either 1600 or 1680 in the first box and it will be automatically resized on the other axis to either 400 or 1050.
- Check that the resolution in Tools, Resize is 72 pixels/inch (that’s all that is needed on screen, while 300 is needed for print).
- Finally, use File, Export to export this new file as a JPG, naming it using the new dimensions and add “at 72” to the end. So, the file name might be “Gumnuts 1600 x 400 at 72.jpg”. This tells anyone else what it is, what the dimensions are and what the resolution is.
On Windows:
Sorry, I don’t know! If anyone else can update this page with the Windows instructions to arrive at the same result as for Mac, that’d be wonderful!