Last Updated: 10/21/2021 - 12:12

Using Images

Photography is one of the campus' most widely used and influential identity assets. The Web Theme provides the range needed when it comes to the different ways images can be used; whether it be hero images, background images, or thumbnails.

 

Visual Identity Guidelines

 

If you have your own images and would like to use them in compliance with the visual identity, for best results you should optimize your photos and save them at the lowest possible file size that doesn't affect the resolution of the image. It's also important to keep in mind the placement of the desired images, as portrait photos used in a hero image composition will not meet the correct aspect ratio and therefore will not scale appropriately. 

sample img

sample img

lagoon sample

Optimizing Images 

Large images slow down your web pages which creates a less than optimal user experience. Optimizing images is the process of decreasing their file size, using either a plugin or script, which in turn speeds up the load time of the page. Lossy and lossless compression are two methods commonly used.

The two primary things to consider are the file format and type of compression you use. By choosing the right combination of file format and compression type you can reduce your image size by as much as 5 times. You’ll have to experiment with each image or file format to see what works best.

  • PNG – produces higher quality images, but also has a larger file size. Was created as a lossless image format, although it can also be lossy.
  • JPEG – uses lossy and lossless optimization. You can adjust the quality level for a good balance of quality and file size.

The two file sizes referenced are here just the two most popular the moment. GIFs still have their place for animation, but newer formats have come up, namely WebP and JPEG XR. They are unsupported now but will have a place in the near future. 

There are many ways to compress and optimize images and it's critical to find a tool that works as you will need it to use it every time you upload an image.  Plugins are great, as are generators and software applications like Adobe Photoshop and Gimp. Some other notables include:

Lastly, when possible, consider using SVGs in your project, whether they be an SVG logo lockup, icons, text, or simple images, they are a great lossless option that guarantees fast results. 


SourceKinsta Blog: How to Optimize Images for Web and Performance

For information on Hero Images please visit the content editors page