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 firstname.lastname@example.org 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:
- 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
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.
- 420px height x 800px width
- File size < 100kb
In instances where the badge contains a photographic element, save it as a JPG.
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.
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.