Webzang

Webzang

Webzang

A Guide to Preparing Images for the web

How to Guide

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 Canvacanva 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).

More…