Images

Photography brings our site to life. Use this page as a guide for working with images.

Copyright Note: Editors should only use images for which Purdue University Northwest holds the copyright or stock images that have beed purchased or licensed for use. If you have a question about whether an image should be used, please contact the Marketing and Communications team.

Standard Image Sizes

The website was designed with specific image sizes in mind. This creates a uniform look and feel across the site pages. See the chart below for image sizes and ratios.

Image TypeDimensions in pixelsImage Ratio
Landscape Images900 x 6003:2
Portrait Images550 x 6884:5
Headshot Images235 x 2351:1
Hero Images1440 x 60012:5
Pre-footer Images1775 x 7105:2
News imagesShorter side should be at least 350 pixelsAccepts landscape, portrait and square ratios

Image Preparation

Once you have determined which images best represent your area and complement the messaging on your pages, the images will need to be prepped for use within the CMS. Part of prepping the images involves ensuring that ratios and dimensions match the design specification. Equally important is optimizing the size of the image files to ensure that pages load quickly. Page load time is one of the biggest factors impacting the quality of the visitor experience, especially on mobile devices. Image optimization is the most important way to control page load time.

A good rule of thumb is to aim for less than 1MB for the overall size of a page. If a page only has a hero image or possibly one or two additional images, it should be easy to fit within the 1MB page weight threshold. If there are many images on a page, it becomes more difficult. For landing pages and other image-heavy pages, aim for 300KB or less for the banner image and around 100KB for images within page-level design/content components.

Photos should always be saved as .jpg prior to uploading to WordPress. Files in the .png format are inherently larger in size and should be reserved for icons or graphics.

The three key image preparation steps are, in order:

  1. Crop to the correct ratio
  2. Resize to the target minimum dimensions
  3. Optimize to make the size of the file smaller (if necessary)

Pre-WordPress Steps

  • Crop – Use a software application or online tool to crop the source image to the correct ratio per the design specification. We recommend croppola.com, a free and cloud-based tool. At this stage, don’t worry about the dimensions of the image, in fact larger image dimensions are better.
  • Adjust the filename to match the use of the image – Images should be saved via a naming convention that will make it easy for people to know the correct placement of the image on the site. Consider a file naming convention like [page-or-component-name]_[description-of-use].jpg. Examples of this naming convention in action: home_hero.jpg, john_doe_feature.jpg.

WordPress Steps

  • Upload & Resize – Images should be resized to dimensions that are slightly bigger than the largest case that is called for in the design. For WordPress, simply upload the image to the Media Library and resize it (if necessary) to the target dimensions using the tools available on the Edit Image panel. For high resolution photos, this step is crucial. It’s not uncommon for a 4000×4000 pixel photo to be larger than 4MB, while the same photo resized to 600×600 pixels will typically be less than 50KB. Note: Once you have sized the original image, WordPress will automatically crop and resize the image to the various sizes used throughout the design.
    • Adding an Image to the Media Library – To add an image while in the Media Library, click the “Add New” button.
    • Adding an Image while editing a Page – To add an image while editing a page, click the “Add Media” button above the module you are working in. Before clicking the button, make sure your cursor in located where you want the image to be placed in the content. This option allows adding a new image to the media library for use, or choosing an existing image to use from the media library. Note: This button is only available in select modules.
  • Optimize – For many images, the resize step will have a significant and adequate positive impact on the weight of the image file. In those cases, an additional optimization step is not necessary. However, optimization is very important for images with larger dimensions, particularly banner images. A plugin named “Smush” has been installed to automatically further optimize the images.
  • Add additional attributes – The media item has a name / title field that is separate from the image filename. We recommend using this field to provide a short description of the image. Avoid naming the item with pages or sections of the site or with image sizes or uses. For example, “students hanging out on lawn” is a better name than “admissions hero image students”. The name of the item can be copied and pasted into the Alt Text field. Also, where appropriate, provide a caption for the image directly on the media item.