Images

When placing images on the web, be thoughtful about the size, file name, and alt text.

These image guidelines were created to ensure the user experience is optimized for desktop and mobile devices.

Editing Photos

Modern Campus (Omni) does not have a good photo editor; therefore, you’ll need to use your own photo editing program. There are many photo editing programs, including Adobe Photoshop. But you can also use any image editor already on your computer, or try a free web-based resizer like PicResize.

Photoshop Training

Those unfamiliar with Adobe Photoshop are encouraged to attend TTADA’s Photoshop course that provides hands-on learning of basic tools and concepts.

How to Size Photos in Photoshop

1. Using the crop tool, select W x H x Resolution in the dropdown toolbar, then enter your photo size in pixels (px), drag the cropping bars to include the desired image and a resolution of 72 dpi. Press ‘Enter.’ The image is now cropped.
2. Once cropped, save for web (File > Export > Save for Web). Saving for web compresses the photo so that it will display clearly, but will load quickly on the page.
   • Set Quality to 52%. This might seem like a lot, but Photoshop's algorithm does a great job at reducing file size without the image becoming grainy. This is not a 48% reduction in the visible quality of the image. After 52%, the algorithm is more aggressive and some image quality may be less suitable below this optimization level. However, that does not mean the results of Quality 45% (or similar) would not help you achieve acceptable visual quality and file size that would meet optimization guidelines.
     • Tip: Images with landscapes and architecture as the subject matter can often utilize a Quality 45% setting and still produce great results.
   • Rename the file using the proper naming convention. Keep the original file name and add the size to the end. For example, if we size a photo for a billboard (which is 1920x640), name the file 151014-squires-hall-billboard. If the size is just a random size, we would name it 151014-squires-hall-1920x1200.
3. Click ‘Save’ after naming the file.

Image File Size Tips

• Large image file sizes impact page load time. This leads to a frustrating experience for end users and negatively impacts how the page will rank in search engines.
• Our site relies heavily on images, so every kilobyte saved impacts end user experience, usability, and site performance. Especially on mobile devices and networks with reduced speed or limited reception.
• Always save images to 72 dpi. This is the lowest resolution recommended.

JPEG vs. PNG

• Use JPEG for all photographs.
• Use PNG for:
  • Images needing a transparent background.
  • Simple graphics with limited gradation, texture, and color pallet (i.e. homepage Fighting Hawks graphic).

Adobe Recommendations for JPEG vs. PNG

Images with Text

Images with text are not allowed, in order to meet federal accessibility standards. If images with words are required information, please consult with the Web Team to determine if the image can be used and still meet accessibility standards. Oftentimes creating a web page with the text written out in HTML can meet accessibility standards.

Alternative Text Tags

All images are required to have alt text.

Alt Tag Instructions

Where to save images?

Photos must be saved in the “_files > images” folder to help with long-term site maintenance.

Hero & Billboard Files Sizes

Medium Image Files Sizes

Images with dimensions around 600x400 are considered medium.

UND Photo Gallery

We strongly encourage the use of UND professional photos instead of stock photos or amateur photos.

The UND Photo Gallery is available for general use with a UND login via Canto. Additional archived photography can be requested by emailing marketing@UND.edu.

Universal Template Image Specs

College Template Image Specs

Landing Page Template Image Specs