Image Size

These are general guidelines as to the dimensions and file size of images that are uploaded to the web system.

File Size 

The max size of just about any image uploaded to the web system is 500 KB (1,024 KB = 1 MB).  If for some reason you need to upload a larger image (like a full-size research image that you want to make available for people to download), you should link to the file rather than display it/place it on a page.  A page that has such a large file or especially several large files displayed on it will take longer to load.  Linking to the large files however, won't have such an effect.

Dimensions 

Before being uploaded to the web system, all images should be cropped and resized as needed.  Please don't upload excessively large images.  

So what size should an image be?  We can't give you a definite answer as different situations call for different image sizes.  We can however show you some example sizes that tend to work well.  Even if these exact dimensions don't fit your needs, you can see what the various sizes look like on a page and use these dimensions as a starting point. 

FacutlyStaff.jpg
125 x 155 pixels

image_02.jpg
250 x 350 pixels

image_03.jpg
400 x 267 pixels

image_01.jpg
1300 x 310 pixels

Resources To Crop and Resize Images

  1. Training -  Lynda.com, a UNC Chapel Hill licensed online video-training library that is available for FREE to Faculty and Staff, has courses on how to use Photoshop.
  2. Free software access - Through the main campus ITS Virtual Labs you can access a wide variety of software programs to include Photoshop CS6.

Responsive Design

The School of Medicine's web site was designed to be responsive.  This means that the design will resize and look good on virtually any computer or device.  This responsive design pertains to all content in the web system to include images.  Images in the web system will  scale to fit the browser window but will not display larger than the actual image dimensions.  So if you place a 400 x 250 pixel image on a page, it my display smaller than those dimensions but not larger. 

Using The Web Systems Preset Image Sizes

When adding an image to display on a page, there is a drop-down box (on the right hand side of the Insert Image screen) that provides a list of various sizes at which to display the image.  Even though the dimensions listed make it appear as though the image will be cropped to a square shape, that is not the case.  It is only the longest side of the image that will be resized to the listed dimensions and the opposite side of the image will scale proportionally.  So if you have an image that was originally 1,000 x 800 pixels, and you selected the Preview size when placing it on the page, the longest dimension of the image (the 1,000 pixels) would now be 400 pixels and the other dimension (the 800 pixel side), would scale proportionately to 320 pixels.  Images can only be sized down. You cannot choose a size larger than the image that you started with.

Image Sizes

The various image sizes are created automatically by the web system every time an image is uploaded.  The sizes are as follows:

Original
Large (768 x 768)
Preview (400 x 400)
Mini (200 x 200)
Thumb (128 x 128)
Tile (64 x 64)
Icon (32 x 32)
Listing (16 x 16)

Examples of When To Use the Preset Image Sizes

Example One - Lets say you have an image that is too big to display on a page.  You could insert a Mini sized version of the image on the page and then make this smaller image a link to the original image.  This gives visitors the option of downloading/viewing the full sized image. 

Example Two - Lets say you are working on a faculty and staff directory for your site.  You've set up your site so that there is a directory page that lists all personnel and displays a small image of everyone next to their name.  You then have an individual page for each faculty/staff member which displays a larger image of the person.  Rather than resizing and uploading two images of the same person you could simply upload one image that is the size you want displayed on the individual faculty/staff members page.  On the directory page you could then select one of the preset image sizes, such as Mini, for each faculty/staff member.