Skip to main content
Explore URMC
menu
URMC / Web Services / Web Editor Style Guide / Images & Videos

 

Images & Videos

Images

Keep the following in mind before using images on the URMC site:

  • Images should be optimized for the web, and should not be more than 500 KB. If you need help resizing your images, please contact Web Services. Keep in mind that for the standard 3-column layout, the middle column where your content goes is 510 pixels wide. Resize your image to fit in these spaces.
  • Images should be professional, appropriate, and necessary: Web Services can help you put a professional touch on your website by finding images from our stock photography. We also have access to professional photography obtained by the University for their publications.Think about how the image augments the content. Does it illustrate a key point? Does it create the appropriate impression to the target audience? Is more than one image needed to convey your message? Images should not be sprinkled throughout a page for the sole purpose of breaking up or adding interest to dense text.
  • Images should be nonproprietary, properly licensed: Images taken from other websites or published sources outside of the URMC should not be used unless they are licensed for use on our website.

A note about photographs of non-UR staff: Patients and other visitors should not be depicted on URMC websites unless the proper legal permissions have been obtained in writing.

  • Images are required to have alternate text: In Kentico, when you insert an image into a page, you will be prompted to add "alt" text. This alternate text appears on some browsers when a user mouses over an image, and it is also a visually impaired user’s only way to know what the content of the image is. Always write alternate text as though it were a caption for your photo. It doesn't need to be long (it should be less than 250 characters), but a user should be able to understand your image without being able to see it.
  • JPEGs are for photos, GIFs are for line art: We recommend that you use JPEG for photographs and images with gradient or continuous tone because they support millions of colors. Use GIF for line art, such as logos and charts. GIFs also support transparent backgrounds, where JPEGs do not.

Image Styles

imgFrameLeft

Entrance to School of Medicine

There are several options available for styling images. You can "float" an image to the right or left, with text wrapping around them, either with or without a border. The image to the left is using the style "imgFrameLeft." The image is aligned to the left while the text wraps around to its right. A light gray border and padding are also applied automatically with this style.

imgFrameRight

Nurse checking on patient's monitor By contrast, the image to the right is using the style "imgFrameRight." The image is floated to the right while text wraps around its left side. Note that to get this paragraph to not wrap around the image above, we applied a style called "clear" to the paragraph, which in effect turns off any preceding alignment.

imgFrame

Nurse checking on patient's monitor

The image above uses a style that has no float applied to it. This is what you want to use if the image you are using is not associated with a paragraph of text, but you still want the frame around it. Depending on where you apply this style to an image, it will depend whether it aligns left, right, or center.

Circular Image

Heart transplant patient, Carrie Fisher, holding her son

This style will crop the image into a circle with a yellow border. Image must be at least 300px by 300px. It can be a square or a rectangle but note that this style will crop from the center of the image. Can be floated left and right.

Videos

Videos should be hosted on YouTube, Vimeo, or URMC Mediasite. If your department does not already have an account with one of these services, you will need to make a request with the Social Media team.

Video Styles

media-left

Need to include a youtube video on your site? Similar to the image styles, the media styles allow for embedded or iframed elements to be floated left or right with the appropriate amount of padding for text. The amount of padding on the media classes is double that of the image classes as they do not have a border w/ margin applied.

media-right

This is the media-right class. It has the same amount of padding as media-left but is floated to the right.