Image Size Reference

Below is a list of all the image sizes used throughout the pages of Miami's website.

* Remember to keep consistent image sizes for features with rotating images

Banner Images

Universal subpage, "thin-wide" or "thin-wide-thin" layout (banner image bank)
Example: http://www.miamioh.edu/about-miami/index.html

  • Width: 800px
  • Height: Variable (300px or 400px recommended*)

Universal subpage, "wide" layout (banner image bank)
Example: http://www.miamioh.edu/about-miami/index.html

  • Width: 1020px
  • Height: Variable (300px or 400px recommended*)

School/Department homepage (featured slideshow)
Example: http://www.miamioh.edu/cca

  • Width: 1020px
  • Update - Height: between 250-400px*

News homepage (featured slideshow)

  • Width: 728px
  • Height: 400px

Mobile Images (NEW)
There is a recent addition to Banner Images, the Mobile Image. This is where you can insert an secondary image that is optimized for viewing on a mobile device (smart phone, tablet). Normally when a person views a page on a mobile device the banner image is simply reduced in size to fit; if you have text in your image it can become illegible. By including a Moblie Image, optimzed for a smaller screen, you can preserve legibility.
Example: Visit the home page and reduce your browser window width to see this in action.

  • Width: 400px recommended
  • Height: Variable, between 250 and 400px*

* Remember to keep consistent image sizes for features with rotating images


SPIF (Special-Interest Feature), rotating slideshow

Vertical orientation
Example: http://miamioh.edu
primary footer—SPIF titled “National Recognition”

Horizontal orientation
Example: http://miamioh.edu
left column—three SPIFs stacked

  • Width: = 220px
  • Height: Variable*

Media Stacks

Album cover
Example: http://miamioh.edu/cec/academics/departments/cpb/get-engaged/study-abroad/index.html
The first photo in each stack must be exactly

  • Width: Proportional 640px
  • Height: Proportional 416px

Individual subsequent items/slides
Example: http://miamioh.edu/cec/academics/departments/cpb/get-engaged/study-abroad/index.html
subsequent photos in each stack

  • Width: > 500px (640px recommended)
  • Height: Variable

Inline Image

Example: http://www.miamioh.edu/about-miami/leadership/index.html
President Hodge photo

  • Width: = 130px
  • Height: Variable

Feature Box

Example: http://www.miamioh.edu/academics/index.html
on right— “ROTC”

  • Width: = 220px
  • Height: Variable

Rich Text Widget

Example: http://miamioh.edu/student-life/index.html
center column—“I am Miami”

  • Width: = Variable (220px recommended for 3-column layout)
  • Height: Variable

Secondary Footer

Example: http://miamioh.edu
MacCracken Hall photo

  • Width: = 180px
  • Height: Variable (140px recommended)