Tech Tip - Bigger isn’t always better!

Having engaging photos and videos on your school website is great for showcasing your school, but it's important you don't compromise the site load speed or drain the user's data in the process. In this tech tip, our website wizard, Lee Smith, shares his solutions for how you can add visual content to your school website without slowing it down. 

Photo Optimisation

Most professional school photographers will provide your images in two formats: web resolution and high resolution. 

For your school website you will need the web resolution versions – these will be large enough to look crisp and clear on screen, but small enough in file size to be optimised for web usage.  

High resolution images should only be used for print projects or offline printing where the quality needs to be much higher and the size of the photo is often required to be a lot bigger or clearer.  

In terms of optimum file size – we recommend that school website images don’t exceed 500kb in size (to enhance website speed, decrease loading times and assist with mobile data usage). Ideally images should be 2000px in width and then resized using the in-built CMS cropping functionality to fit the relevant image area – content, slideshow or custom image area.  

On a responsive school website, the images may look slightly different on different sized devices and screen sizes – this is because of the changing resolutions; however, our websites are coded to ensure that the focal centre point of the image will always be captured. 

Video Optimisation

Videos can come in various qualities from 240p (very pixelated) to the recently released 8K (best available so far) with 1080p (high definition) having been the most used standard for quite some time. 

It can be tempting, even exciting, to consider having a 4K quality or higher video on your school website homepage. But, is bigger always better and have you considered your audience?  

Download Speed 

Every download has a file size which must be transmitted over the Internet to their device. 

This download may be accessed via WiFi, a wired connection or via mobile data (4G) especially if a user is out of the house, at work or does not have a strong WiFi signal.  

When using a 4G connection, an individual’s data could be limited based on their contract, potential daily download restrictions from their broadband provider or Fair Use Policies. 

According to recent data around 55% of traffic across the Internet uses a mobile or tablet device, which may not always be connected to WiFi but may be using 4G. 

A 4K video produces files that are around 4 times bigger than a 1080p video. If a user has, for example, a 30GB per month plan with their mobile provider and your school has a 4K homepage video on your school website, then it will take up almost 1GB of their data just to view the homepage of your website! That’s a lot of data!  

Another way to explain it is, if you have a 210 second 4K video, then your video file size could be around 775MB in size. This will mean that a user will need to be using a device and Internet service provider capable of sending files at 4MBps (MB per second) to display the video without any stuttering or buffing.  

If you were to use a 1080p video, then the file size would be around 200MB and would only need around 1MBps transfer speeds.   

4K vs 1080p 

The other thing to consider, when deciding whether to use a 4K vs 1080p video quality is to look at the devices’ ability to display the video at its native resolution.  

If you are using a 1920 x 1080 resolution desktop monitor, which is generally the widest resolution currently in use for day to day desktop use, although your video could theoretically be in 4K, the monitor will only display the video at a maximum of 1080p as it won’t fully support the 4K resolution.  

The only way to do this would be to zoom to 200% to get the 1:1-pixel ratio, which defeats the purpose of having the 4K video in the first place.  

We would always recommend that schools use a 1080p video for their homepage as this means the file size will be smaller, the quality will still be high, and the video will be accessible by any user on any device.  

Whilst there is, of course the inclination to always have a video look as good as it possibly can, it needs to work for the demographic of your audience and be accessible to as many visitors as possible.  

For a few fantastic examples of 1080p videos we’ve created for school websites, have a look at: 

• Rendcomb College
• Leicester Grammar School
• Cotham School
• Moor House School

Video Hosting 

Finally, a common question we get asked is about video hosting and where is best to store video content.  

For optimisation reasons, we would recommend that any videos used on the website are uploaded to YouTube or Vimeo first, so that they can benefit from the higher quality and staggered loading times available on these providers. 

If you do not have one already, you can set up an account for the school (especially on YouTube) where the videos are unlisted. Unlisted means they can only be viewed if you have the link to them and they will not appear in searches (so you can control where they are used).  

The YouTube API (an application programming interface is technical speak for the computing interface which allows multiple software platforms to speak to each) can also analyse the data sent/retrieved bitrate and other information such as the device resolution, to ensure the video is streamed at the most appropriate size for the requesting viewer.

We hope this is helpful and assists you the next time you’re commissioning a new school website, multimedia project or looking to upload new visual content.