When used correctly, photography can be a great tool for promoting our university on the web. Not only does it help with the visual appeal of the website, it can also be a powerful promotional tool. Sharing beautiful imagery of our campus, a fun photo of students spending time together, or a shot of one our lab courses gives a brief glimpse into the excitement of the Millersville experience.
Choosing the right image is a great first step, however developing an understanding of how your images will be displayed on the web is vital to creating a positive experience for our users.
Sizing images correctly for the web
Our Cascade templates have been designed to provide you with all the information needed to successfully design your pages. One example is the helper text which is included in areas where a specific image size is needed. Adhering to the image sizes noted in the helper text will prevent the following issues:
The image is too small
Images that are too small will oftentimes be resized automatically to fill the content area. When this happens, the images can become pixelated and distorted looking.
The image is too large
If the image is too large, it will be resized automatically as well. This problem may not be as obvious, since the image will likely look fine on most modern browsers.
Although this will not affect the look of your page, loading these large images can be very trying for our web users. Unnecessarily large images are one of the biggest causes of slow loading speeds for webpages. This can lead to people becoming frustrated and abandoning the page altogether.
Additionally, the large images take up more space on the web server, leading to higher charges for the university.
Tips for sizing images
- Use the correct filetype: For photos, JPG will typically provide the best results in terms of both quality and size. The only time a PNG should be used is if parts of the image are transparent, as JPG does not support image transparency. Formats like GIF and SVG are more suited for flat graphics, like logos and charts.
- Resize images to the correct dimensions: As mentioned earlier, specific sizes have been given for many of the image areas on the website. Make sure to resize your images to the correct dimensions before uploading them to Cascade.
- Optimize images for web: Image editing tools such as Photoshop provide export options that allow you to adjust the image quality to reduce file sizes. Photos displayed on the web typically do not need to be saved at full image quality in order to look good.
Tools for sizing and optimizing images
We recommend using Adobe Photoshop for sizing and optimizing your images. Photoshop is not only great for editing images, it also has a wide range of image optimization settings. Please see our guide on resizing images in Photoshop for instructions on the best way to crop and size and your images.
The content of this blog entry was accurate at the time of publication. You can find the most current information about image recommendations and other Cascade-related topics in our Cascade wiki documentation.
Virtual training sessions
Although we are not currently offering in-person training sessions, remote training is available upon request. Please submit a Help Desk ticket to arrange a time for your training.