Skip to main content
University of North Dakota
University of North Dakota
    • Email
    • Employee Self-Service (HRMS)
    • Finance (PeopleSoft)
    • Campus Connection
    • Flex Spending
    • Starfish
    • Digital Measures
  • Calendar
  • Directory
  • Scope of this search:
Campus Services
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts
    • 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 Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts
    • 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 Show/hide children
    • Website Content Standards
  • CMS Support Show/hide children
    • Accordions/Tabs
    • Alerts
    • Analytics
    • Assets
    • Images
    • Snippets
  • WordPress Blogs & E-Newsletters
  • Events Calendar
  • Digital Signs
  •  

Images

When placing images on the web, it’s important to be thoughtful about the size and file name given to the photo used.

The image guidelines created by the UND Web Team ensures the user experience is optimized for both desktop and mobile devices, and that organization is maintained within Omni by using straightforward naming conventions.

To get started, refer to the template guide below and determine the size of photo you need and for suggested naming structures. Image sizing requirements have been listed for all image types on the Universal, College, and Landing Page templates.

Editing Photos

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 the most popular: Adobe Photoshop. But you can also use any image editor already on your computer, or you could try a free web-based resizer like PicResize.

How to Size Photos in Photoshop

Faculty and staff unfamiliar with Adobe Photoshop are encouraged to attend TTADA’s Photoshop course that provides hands-on learning of basic tools and concepts. If Photoshop is unavailable to you, please reach out to your department to learn about obtaining a license.

Using Photoshop, crop the image to the desired size:

  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.
    • 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.
  4. Photos should then be saved in the “_files” folder in Omni to help with long-term site maintenance.

Image 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. See tables below for guidance on final image file sizes.
  • 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 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.
  • Images with complex subject matter, i.e. images with a lot of texture, color variation, shapes, etc., will lead to a larger file size. Images with simple subject matter will have the opposite result and naturally have a smaller file size because less information needs to be stored. Because of this, a judicious approach to image selection can go a long way in meeting the file size objectives outlined in the tables below.
  • Always optimize from a high quality source image. Attempting to optimize an optimized image can lead to more grain and artifacts than optimizing a high quality source image further than previous attempts. Optimizing an optimized image can even lead to the file size increasing.
  • Images with landscapes and architecture as the subject matter can often utilize a Quality 45% setting and still produce great results.

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 Image 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, and additional archived photography can be requested by emailing marketing@UND.edu.

Universal Template Image Specs

universal template

Snippet Image Size Specs
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 Size Specs
College Banner 1920x900
Mobile Banner 768x960
College Feature 760x507
Column 600x400
Video 1024x576

Landing Page Template Image Specs

landing page template

Snippet Image Size Specs
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
    • TikTok
    • Twitter
    • LinkedIn
    • Campus Map
    • Employment
    • Vector Solutions Training
    • UND Today
    • U Letter
    • Campus Renewal
    University of North Dakota

    © 2022 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
    ©