Page assets (including images)

Anything loaded on a web page must be optimized first for low bandwidth environments and then progressively enhanced for higher bandwidths. This includes images, fonts, JavaScript, and any other asset loaded to a page.


For example, images could be saved in the CMS and generated at various resolutions. Perhaps:

  • Small ~12kb
  • Medium ~40kb
  • Large ~100kb

Every page would first be loaded with the small image, then JavaScript can detect screen size and make an educated guess as to which other sizes to load. The effect will be low-res images at first that quickly switch to hi-res in the appropriate environments.

Other assets

CSS, Javascript, fonts and images can all be further compressed using gzip. Any fonts should have their weights, styles, and character sets reduced to only what is used on a specific site.


Due to the page weight of most libraries (currently, jQuery is around 100kb), and the relative simplicity of Javascript actions assumed on UCL sites, we suggest avoiding libraries and using pure Javascript.