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.
WebP Image Format
Google launched the WebP format to make loading times faster. UND, at the guidance of search engine optimization experts, is recommending switching to WebP image files. WebP allows websites to display high-quality images — but with much smaller file sizes than traditional formats such as PNG and JPEG.
Editing Photos
Modern Campus (Omni) began allowing WebP files in 2023. 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
- Open Photoshop
- Click “File” in the top tool bar
- Scroll down and click “Open”
- A File Explorer window will pop up where you will select your image
- Once selected, click “Open”
- Once your image is uploaded, now click “Image” in the top tool bar
- Scroll down to “Image Size”
- Resize image to the size you need
- Input 72 in Resolution
- Click “OK”
- Click “File” in the top tool bar
- Scroll down to “Save As A Copy”
- A File Explorer window will pop up for where you want to save and name your file, and choose your file type
- Choose where you want your file saved
- Name your file
- Under “Save as type”, Scroll down and select “WebP” in Format
- Click “Save”
- A new Photshop window will pop up, “WebP Options”
- For image compression:
- Select “Lossy”
- Enter 70 for Quality – or lower if your image is not below 100 KB
- 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.
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.
Where to save images?
Photos must be saved in the “_files > images” folder to help with long-term site maintenance.
Hero & Billboard Files Sizes
Response | File Size | Rational and Recommendations |
---|---|---|
Accept | 200KB or less | Always aim for this level of optimization. |
Question | 200KB‑350KB |
The concern regarding detriment versus value should intensify as an image's file size approaches the 350KB maximum.
|
Reject | 350KB+ | Image is too large and must not be used. |
Medium Image Files Sizes
Images with dimensions around 600x400 are considered medium.
Response | File Size | Rational and Recommendations |
---|---|---|
Accept | 75KB or less | Always aim for this level of optimization. |
Question | 75KB‑110KB |
The concern regarding detriment versus value should intensify as an image's file size approaches the 110KB maximum.
|
Reject | 110KB+ | Image is too large and must not be used. |
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
Snippet | Image Pixel Size |
---|---|
Billboard | 1920x640 |
Mobile Billboard | 768x256 |
Sidebar Feature | 330x220 |
Image | 1024x683 |
Image (inline) | 268x400 |
Video | 1024x576 |
People | 344x412 |
Feature | 300x300 |
Gallery | 1024x576 |
College Template Image Specs
Snippet | Image Pixel Size |
---|---|
College Banner | 1920x900 |
Mobile Banner | 768x960 |
College Feature | 760x507 |
Column | 600x400 |
Video | 1024x576 |
Landing Page Template Image Specs
Snippet | Image Pixel Size |
---|---|
Landing Banner | 1920x900 |
Mobile Banner | 768x960 |
Landing Feature | 669x446 |
Column | 600x400 |
Slider | 600x600 |
Feature Center | 470x285 |
Grid | 270x180 |