Skip to main content

Photo and Image Guidelines

(PDF version of this document.)
This document is intended to be a general reference for Finance and Operations Communicators when choosing images for use on our websites.

As a rule of thumb, all images uploaded to Finance and Operations websites should have a resolution of 72 pixels/inch (DPI) and be no larger than 1600px wide and the file size should be smaller than 500KB.

When possible, please save all images for Finance and Operations website use on a shared drive (e.g. B:\Departments\215400-VCFA_Communications_Shared_Svc\Websites) or share a copy to foweb@unc.edu via e-mail or OneDrive.

JPG vs. PNG vs. GIF vs. SVG

File size dictates the time it takes to load your page, the larger the file size, the longer it will take to load. People often don’t have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high-quality images should be kept between 100KB and 60KB. Smaller images should be around 30KB and lower.

The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size.

Websites use four common file types. The end of a filename (called the extension) tells what type it is.

JPG (Joint Photographic Experts Group)
  • good for photographs
  • Saving a photo as jpg removes detail from the photo
  • Good photo editors let you control how much detail is removed (the “compression”)
  • Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size
PNG (Portable Network Graphics)
  • for both photographs and line art
  • compresses photos without losing detail, but usually makes larger photo files than JPEGs
  • great for line art, like logos, with solid areas of the same color
GIF (Graphics Interchange Format)
  • can be poor for photographs
  • in general GIFs are currently only used for animated image applications
SVG (Scalable Vector Graphics)
  • an XML based markup that can contain two-dimensional vectors
  • vectors can be simple shapes, paths, or just about anything you can do in Illustrator
  • not commonly used on most websites

There are hundreds of articles on the web that will explain the differences amongst JPGs, GIFs, PNGs and SVGs and how and when to use them. These three are very helpful:

UNC Creative provides some good general usage guidelines for photos:

  • Photographs of people should most often be candid. Captured moments help viewers get an inside glimpse of Carolina and invites them to be part of the community.
  • To convey a sense of vitality and academic rigor, imagery should show activity and intellectual pursuit. Avoid passive shots.
  • Balance shots of individuals with ones that include more than one person in order to show a culture of collaboration.
  • Profile photographs should be friendly and approachable.
  • Use a variety of close-ups and wide shots. Close-ups create warmth and familiarity, while wide shots convey expansiveness.
  • When using photos of the campus, architectural structures or interior shots, give a sense of openness by lowering the horizon line or cropping images in a wide format.
  • Represent racial, gender, age and professional diversity.

UNC Photo Resource

Sign up for an account at UNC’s Photoshelter site for access to their library of UNC campus photos.

Image Uses and Sizes

WordPress enables you to upload a featured image to a page that will serve as a top level image for the page. These are usually used on home pages. In rare instances, a featured parallax image may be used on an interior page. Parallax images are tricky since WordPress will zoom in on a portion of the image in a full screen view and then reveal more of the image as the screen is resized.
Example of parallax image with size recommendation:667 pixels by 1600 pixels
A 12:5 aspect ratio works best in most instances, but depending on the image, you may need to play with the size. The focus of the zoomed image is usually the horizontal and vertical middle third of the original. Save originals of these images to the shared drive uncropped and at a slightly higher size to make resizing and optimization easier. After optimization, parallax images should be under 500KB and saved to the website’s photos folder on the shared drive.
Example of headshot portrait with size recommendation: 700 pixels by 500 pixels

  • JPG
  • 5:7 aspect ratio
  • < 50KB
Example of Post featured image with size recommendation: 400 pixels by 600 pixels

  • JPG
  • 3:2 aspect ratio
  • <75KB
Badges should be saved to the shared communications drive at 420px height x 800px width. In some instances, they will be resized to 400px x. 210px, but the larger size in the shared folder will ensure a higher quality image in all circumstances.
Example of web badge with size recommendation: 420 pixels by 800 pixels
Save as:

  • PNG
  • 420px height x 800px width
  • File size < 100kb

In instances where the badge contains a photographic element, save it as a JPG.

Noun Project is a great source for downloading free icons with creative commons permissions. It’s a good starting point for brainstorming, but our SCE design team has been an outstanding resource, creating striking icons quickly.

Example of icon with size recommendation: 400 pixels by 400 pixels

Icons should be saved to the website’s folder in the shared communications drive as:

  • 400px by 400px PNG files, or as…
  • vector images in Adobe Illustrator…
  • …with hex color #4B9CD3

Cropping and resizing can be done before uploading to your WordPress Media library. Most icons are being used at 225px square. Some smaller ones are 150px square.

UNC Creative provides specific guidelines for the use of the University logo and University Unit and Department logos.

On Finance and Operations websites, all logos are uploaded as PNGs with heights and width varying based on the department or unit name.

If you need to change a logo on your site for any reason, please contact SCE Communications.

General Questions

Email foweb@unc.edu