When uploading images to a new or established website there are a few things you need to do to optimise your user experience.
- Establish the image dimensions you will need
- Optimise that image before upload
- 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.
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.
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 tinypng.com 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.