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 their
position on the website, reduce the filesize 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 fileszie.
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 filesize, 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 desktop website needs to be around 1000 pixels wide.
Images that will take up half the page (on a desktop) should be around 500 pixels.
Quarter page around 300 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 tool bar > 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 print 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 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).
