Large image files slow websites down hugely, so it is advisable to optimise them for websites before uploading them. Aim to get the image to the exact size (dimensions) required for its position on the website, and reduce the file size as much as possible.
Image file type
TIFF images - are extremely high quality files but are also massive files and most appropriate for print and photography and NOT web.
JPEG - this is the best image type for photographs and “busy/colourful” images. It has a very small file size.
PNG - this is the best file type for graphics and images that have large blocks of one colour.
For simple images, they create a small file size, but for photographs it tends to be much higher than JPEG.
If in doubt, go with JPEG.
Size in Dimensions (in pixels)
This refers to the actual size an image is - how wide and how tall.
Most full-width images on a desktop website need to be at least 1000-2000 pixels wide.
Images that will take up half the page (on a desktop) should be around 500 pixels.
Quarter page around 500 pixels.
Make sure you set the pixel size before doing the further steps. If you will use an image both large and small on a desktop, then best to create the individual sizes (this helps reduce page load speed as the website will resize the image and this takes up valuable page load time).
On a Mac - open image in Preview > tools > adjust size > fix pixel width and let the height auto-adjust.
On a PC - open image in Paint > click the resize button on the toolbar> adjust size as required.
Using Canva - Canva is a fantastic web-based image processing tool. You can create a new blank image in exactly the right size and then upload your photo to it and adjust it to fit the frame, then download it back onto your desktop.
Image Resolution (in dpi - dots per inch)
This refers to the resolution of the image. Photographs and prints need higher resolution to get good quality (300 dpi or more). Screens have a max resolution of 72 dpi so any image with a higher resolution is just taking up valuable file space.
Adjust the dimensions of an image first, and then adjust the resolution the same way as with adjusting dimensions. Canva automatically downloads images at 96 dpi which is fine, but if you have time it is useful to then adjust the dpi to minimise file size.
File Size (in kb/mb)
This refers to the filesize of the image and how much space it takes up.
big fullwidth image - max 250-500kb MAX
half page size - 100-200 kb
Any single image shouldn't be larger than 500kb but really shouldn’t need to be that big.
It is good practice to put all images through a compression programme before uploading to
the web.
Use this FREE website to compress all images ready to upload to the web.
SEO on upload
In order to maximise search engines liking your website, it is very good practice to ensure the actual filename of the image matches the content of the website. So, for example, if you sell cakes, change the filename to “chocolate cake on a plate 1”, for example, (rather than “IMG5524”).
When you upload images to your website, try to get in the habit of adding "alt text attributes" when you upload the image and use the same descriptive name used for the image name.
Optimise in WordPress using the Smush plugin
In WordPress, download the “Smush” plugin.
Go to Dashboard > SMUSH (in the left-hand column > click the "re-check images button (top left/grey button).
It will search and then say there are 14 images (or whatever) that could be compressed and then just click the Bulk Smush button (max 50 images at a time).
