Images

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

WebP Image Format

UND recommends switching from JPEG to WebP image files. WebP allows websites to display high-quality images — but with much smaller file sizes and faster load times.

Editing Photos

WebP files cannot be edited in Omni like PNG and JPEG files. Photoshop is the preferred method to create WebP files and is available in Adobe Photoshop 23.2 or later. If you do not have Photoshop, use one of these a free WebP converter like Pixelied or Convertio.

WebP files can not be used in image gallery assets.

How to Size Photos in Photoshop

1. Open Photoshop 
2. Click “File” in the top tool bar 
3. Scroll down and click “Open” 
4. A File Explorer window will pop up where you will select your image 
5. Once selected, click “Open” 
6. Once your image is uploaded, now click “Image” in the top tool bar 
7. Scroll down to “Image Size” 
8. Resize image to the size you need 
9. Input 72 in Resolution 
10. Click “OK” 
11. Click “File” in the top tool bar 
12. Scroll down to “Save As A Copy” 
13. A File Explorer window will pop up for where you want to save and name your file, and choose your file type 
14. Choose where you want your file saved 
15. Name your file 
16. Under “Save as type”, Scroll down and select “WebP” in Format 
17. Click “Save” 
18. A new Photoshop window will pop up, “WebP Options” 
19. For image compression: 
    1. Select “Lossy”  
    2. Enter 70 for Quality – or lower if your image is not below 100 KB 
    3. Click “OK” 

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.

How to Write Photo Alt Tags

Every image is required to have alt text (alternative text) to describe what the image is for those using a screen reader. Alt text also helps search engines index images.

• Be concise but descriptive: For example, a headshot of John Doe should read “Headshot of John Doe” to tell what type of photo it is and who is in the photo. Only including the person’s name doesn’t describe the type of photo it is. Refrain from stating a picture is a picture.
  • Incorrect: picture of Merrifield Hall
  • Correct: close-up of Merrfield Hall entry
• Do not use the image file name as the alt tag. 
  • Incorrect: picunion1_large.jpg
  • Correct: Front door of the UND Memorial Union
• Avoid images with text: Images with text create significant accessibility issues. If you have no other option, be sure to provide detailed alt text, captions, or a nearby description.
• Do not write alt text for decorative elements: If the image is not a photograph, does not contain text, and serves only as a decoration, use a single space character as its alt tag so that screen readers will skip it silently.
• Be careful of hyperlinked images: If the image is linked the alt text should describe the link destination rather than what is represented in the image.
  • Incorrect: Three students in front of the library.
  • Correct: Read student success stories.

Where to Save Images

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

Hero and Billboard Files Sizes

Medium Image Files Sizes

Images with dimensions around 600x400 are considered medium.

Universal Template Image Specs

College Template Image Specs

Landing Page Template Image Specs

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.