Skip to Content

Image Editing

Contents
Contents

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. Other resources that can be used to sources images include Unsplash, Pexels, and Tourism NI. Just check the usage guidelines and confirm all imagery is safe to use. 

Resizing Images

There are a number of important things you need to do before uploading an image to the Media Library for use on a website: Resize the image, Optimise the image, and make sure you save it locally following the Correct Filename Convention.

There are a number of tools you can use to resize and optimise images:

  • Free web based applications such as Pixlr X and Photopea.
  • Proprietary desktop and cloud applications such as Adobe Photoshop.

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.

 

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 BEFORE they are added to the Web CMS. This means they must have the guidance below applied whilst the assets are held on your computer or within the SharePoint site for your business area.

The assets must adhere to the naming convention as follows:

  • 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

The Create New Image Option in Pixlr X
The Create New Image Option in Pixlr X

Follow these Steps

  1. Open Pixlr X
  2. Click Create New
  3. Enter the required content type image dimensions in Width and Height fields, eg, Width=800, Height=533
  4. Click Create
  5. Click the Add Element/Image icon
  6. Click Add Media (locate the image file on your own computer)
  7. Click the Zoom Out icon until until you see the drag handles around the image
  8. 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.
  9. 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.
  10. Click JPG
  11. 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.
  12. 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.

Links to Image Editing Tutorials

 

Close Menu - Off Canvas