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

Medium Image Files Sizes

Images with dimensions around 600x400 are considered medium.

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

College Template Image Specs

Landing Page Template Image Specs