Photo and Image Guidelines

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:

• GIF, PNG, JPG or SVG. Which One To Use?
• The Ultimate Guide to WordPress Image Management
• JPEG vs. PNG: When and why to use one format over the other

• 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.