Resizing images to use on University websites

When creating and updating University webpages it is important to load and use image files that are appropriately sized. Using images that are too big can cause pages to load slowly or, in some circumstances fail to load at all. Website users will get a 504-error message page and not see any of the page content.   

This is particularly a problem on pages, like staff profile lists, where lots of images are used. If these images are too big the page may not load at all.

To avoid this check and if necessary, edit images before adding them to a university webpage.

What is the right size for images on the University Websites?

Some pages in the Jadu Control Centre will specify the size an image should be. See the example below. Otherwise, general guidance is that:

Screen shot of an example Jadu dialog box for adding images with the required image size shown underneath the Image heading

How do I resize images for the web?

Several applications are available to do this, including photoshop, but a simple application that all members of the university should have access to is Windows Photos.

  1. Search for Photos in the Windows Search box:
    Windows menu showing the Photos app
  2. With the Photos app open you can find and the image you want to use:
    Windows Photo app opening screen
  3. The application should show your recent images, or you can navigate through your folders to find the image you want:
    Windows Photo app showing the folder browser window
  4. Double click the image to open it:
    Windows Photo app showing the box round a selected image
  5. Then click on the three dots at the top of the screen
    Windows Photo app showing the three dots in the icons along the top of the window
  6. Then Select resize Image:
    Windows Photo app showing the "resize image" option in the pop up menu
  7. You will then see details about the image size. This example picture of a cat is fairly big – the width in pixels is 3872 and the height 2592.
    Windows Photo app showing image size in pixels in the resize dialog box
  8. To resize the image change either of the height or width numbers on this screen, the other number will change automatically to keep the image in proportion as you can see in this image:
    Windows Photo app showing the Resize dialog box
  9. At the bottom you can also see the new image is much smaller in terms of pixels, and that the file size is smaller.
    Windows Photo app showing the Resize dialog box with the current and new image sizes
  10. Click save, and on the Save as Screen give the resized image file a new name, so that you don’t replace your original image and know which version of the image to use on the website (here I added resized to the end of the filename).
    Windows Photo app "Save As" dialog box
  11. You will now need to upload the resized image from the location you saved it to, to the Jadu Control Centre image library, so you can use it on a webpage.