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:
- For a Banner Image you should use an image sized 1200px x 600px
- For Featured Content Images elsewhere on Homepages and Document Pages an image size of between 800 x 400 up to 1100px x 550px should be used.
- For Staff Profile Images an image size of 400 x 400 pixels should be used. You may need to crop the image to the right shape before resizing this.
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.
- Search for Photos in the Windows Search box:
- With the Photos app open you can find and the image you want to use:
- The application should show your recent images, or you can navigate through your folders to find the image you want:
- Double click the image to open it:
- Then click on the three dots at the top of the screen
- Then Select resize Image:
- 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.
- 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:
- At the bottom you can also see the new image is much smaller in terms of pixels, and that the file size is smaller.
- 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).
- 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.