Resizing Images
There are two key things you need to do before adding an image to a webpage: Resize the image and Optimise the image.
There are a number of tools you can use to resize and optimise images, including:
Note: Queen's University Belfast is not responsible for the content or results on any external image editing tool. If you have further questions on this please contact digital@qub.ac.uk
You can view all the required image dimensions for each content type in our Content Type guidance
Optimising Images
Image optimization means reducing the file size of your images as much as possible, without sacrificing quality, so your page load times remain low, maximising site performance on both desktop and mobile.
It works by using compression technology to reduce file sizes without losing image quality.
You typically optimise your image at the same time as resizing it, using the image editing tool of your choice.
Sourcing Images
Ensure you have responsibly sourced any image you use on your website. Following the development of a content plan for each of your web pages, the next step is to source or create the assets required to accompany your website copy. You must have consent to use any third party assets before they are uploaded to the Media Library. This is to ensure that you do not infringe any copyright. Any copyright issues which may include legal action, will be the responsibility of the user who uploaded an unverified resource to the Media Library, so please take care and ensure the resources are freely-usable.
You can download copyright approved images from the QUB Brandhub
Follow the Correct Filename Convention
Now that you have sourced assets responsibly and created an accessible file that is optimised for the web, the last step is to name the file following the correct convention.
When you are saving image files, they must use the following naming convention:
- Use only lowercase letters (a to z), numerals (0-9) and hyphens (-).
- Do not use spaces. Instead, use hyphens to separate words.
- Do not use special characters (e.g., £, %, &, á) or underscores.
Correct
- lanyon-building-at-night.jpg
- queens-business-school-student-hub.jpg
Incorrect
- Lanyon Building.jpg
- Queen's_Business_School & student Hub.jpg
The Web Support Team reserves the right to change (or request changes to) filenames if they do not meet digital best practice.
How to resize and optimise images using Pixlr X
Follow these Steps
- Open Pixlr X
- Click Create New
- Enter the required content type image dimensions in Width and Height fields, eg, Width=800, Height=533
- Click Create
- Click the Add Element/Image icon
- Click Add Media (locate the image file on your own computer)
- Click the Zoom Out icon until until you see the drag handles around the image
- Click and drag each drag handle to shrink the image to the required appearance. Depending on the dimensions, you will lose some of the image itself, so you need to make your own decision on what you want to keep.
- Click Save. When you click Save, you will see the Image Optimisation options. These are asking you if you want to save the image as High, Medium or Low quality.
- Click JPG
- Click Med to optimise the image to 70%. You can also use the Quality sliding bar to define a precise percentage. Typically 60-70% is an effective range to optimise to.
- Click Save As and save the image to the required folder on your computer, making sure you are following the correct naming convention for your file.
The image has now been resized to the correct dimensions, optimised for use on your web page and uses the correct naming convention.
You next step is to upload the image to the Media Library and insert it into the required content type.