Skip to main content
University of North Dakota
University of North Dakota
    • Email
    • Employee Self-Service
    • Finance (PeopleSoft)
    • Campus Connection
    • Flex Spending
    • Starfish
    • Faculty Success
  • Calendar
  • Directory
  • Scope of this search:
Campus Services
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Council for Women+
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts Accounting
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
University of North Dakota
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Council for Women+
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts Accounting
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
Scope of this search:
Scope of this search:
  • Home
  • Campus Services & Resources
  • Web Support
  • Images
Skip Section Navigation
  • Web Support
  • Directory Instructions
  • Web Policy
  • CMS Support Show/hide children
    • Accordions/Tabs
    • Alerts
    • Assets and Forms
    • Image Sizes
    • Snippets
  • Content Standards
  • Blogs & E-Newsletters
  • Events Calendar
  • Digital Signs
  •  

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

Response File Size Rational and Recommendations
Accept 200KB or less Always aim for this level of optimization.
Question 200KB‑350KB
  • Image may need further optimization.
  • Most images in this classification can be sized below 250KB.
  • Images deemed acceptable in this range should be infrequent.

The concern regarding detriment versus value should intensify as an image's file size approaches the 350KB maximum.

  • A 325KB image should be more harshly judged than a 225KB image.
  • A 325KB image is extremely undesirable compared to a 225KB version.
  • If the file size of an optimzed image remains close to or above the 350KB maximum, and/or optimization has resulted in a low quality image, i.e. grain and pixilation become obvious, choose a new image.
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
  • Image may need further optimization.
  • Most images in this classification can be sized below 85KB.
  • Images deemed acceptable in this range should be infrequent.

The concern regarding detriment versus value should intensify as an image's file size approaches the 110KB maximum.

  • A 105KB image should be more harshly judged than a 80KB image.
  • A 105KB image is extremely undesirable compared to a 80KB version.
  • If the file size of an optimzed image remains close to or above the 110KB maximum, and/or optimization has resulted in a low quality image, i.e. grain and pixilation become obvious, choose a new image.
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

universal template

Snippet Image Pixel Size
Billboard 1920x640
Mobile Billboard 768x960
Sidebar Feature 330x220
Image 1024x683
Image (inline) 268x400
Video 1024x576
People 344x412
Feature 300x300
Gallery 1024x576

College Template Image Specs

college template

Snippet Image Pixel Size
College Banner 1920x900
Mobile Banner 768x960
College Feature 760x507
Column 600x400
Video 1024x576

Landing Page Template Image Specs

landing page template

Snippet Image Pixel Size
Landing Banner 1920x900
Mobile Banner 768x960
Landing Feature 669x446
Column 600x400
Slider 600x600
Feature Center 470x285
Grid 270x180

Help Ticket

    We use cookies on this site to enhance your user experience.

    By clicking any link on this page you are giving your consent for us to set cookies, Privacy Information.

    UND.info@UND.edu  |  701.777.3000
    • YouTube
    • Instagram
    • Facebook
    • Twitter
    • LinkedIn
    • Campus Map
    • Employment
    • Vector Solutions Training
    • UND Today
    • U Letter
    • Report Safety Concern
    University of North Dakota

    © 2023 University of North Dakota - Grand Forks, ND - Member of ND University System

    • Accessibility & Website Feedback
    • Terms of Use & Privacy
    • Notice of Nondiscrimination
    • Student Disclosure Information
    • Title IX
    ©