Naming & Resizing Images for Web

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 OmniUpdate by using straightforward naming conventions.

To get started, refer to the template guide 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.

OmniUpdate 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

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.
    • 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, name the file 151014-squires-hall-billboard. If the size is just a random size, we would name it 151014-squires-hall-1920×1200.
  3. Click ‘Save’ after naming the file.
  4. Photos should then be saved in the “_files” folder in OmniUpdate to help with long-term site maintenance.

Image Tips

  • Photos for the UND website should not be larger than 300 kilobytes. Large image 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.
  • 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.
  • Looking for images? 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.

TTADA Photoshop Course

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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

All comments will be reviewed prior to posting.