How to Best Update Images

How to add a new image to your website

When uploading images to a new or established website there are a few things you need to do to optimise your user experience.

  1. Establish the image dimensions you will need
  2. Optimise that image before upload
  3. Include the appropriate tags etc once uploaded to maximise SEO and site efficiencies


1. Establishing Image Dimensions 

If you already know the image dimensions you need, great! If not, or you are replacing a current image there are a few ways of doing so.

a) Go into Media > Library, find the image you want to replace, click on it and the image details including the dimentions will appear in the top right corner

b) Alternatively, access the Developer function on your browser. Links to do this are below.

Chrome Dev Tool

Firefox Developer

Safari Developer Menu

Once you have access, Right Click on the image/space you are replacing and Click ‘Inspect’ this will then give you the dimensions you need. See screen shots.

How to find your image dimentions


2. Optimise Image for Upload

Using the ‘Screen Shot’ image above as the example you need to make sure the image is optimised, aka the smallest size at the highest quality you are going to need it. Theres no point putting a massive, high res image on your site as it will slow it down and frustrate your users.

If you are unsure if you should be using either a .png or a .jpeg file check out this great article by Amit Agarwel on JPEG or PNG – Which Image Format Offers Best Quality?

Once you’ve decided file format reduce the file size. For the ‘Screen Shot’ image we are using a .png and have used a great compressor size this took my original image from 334.1KB to 97.9KB, a reduction of 71% in file size.


3. Add Your Image Info 

So, you’ve got your image uploaded (Media > Add New) now you need to add the info. This is important as Search Engines are looking for information on your site to best point users towards the right content. Fields you can fill in include:

Title – Fairly self-explanatory. This defaults to the name of the file.

Caption – Text that can do underneath the image explaining what it is

Alt Text – Text you can have appear when the user hovers over the image. Alt text is extremely powerful search engines use it to index the images. ALWAYS FILL IN YOUR ALT TEXT

Description – This is great for giving your users more information on the topic of the image. If you use this users can click on the image and go into the more detailed description.