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 and Homepage Slides

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, 350px or 400px recommended*)

Universal subpage, "wide" layout (banner image bank)

Example: http://www.miamioh.edu/about-miami/index.html

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

School/Department homepage (featured slideshow)

Example: http://www.miamioh.edu/cca

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

Mobile Images

There is a recent addition to Banner Images and Hompepage Featured Slideshows, the Mobile Image. This is where you can insert a 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 Mobile Image, optimized 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: 600px
  • Height: 600px*

News homepage (featured slideshow)

  • Width: 728px
  • Height: 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* (200-300px recommended)

Inline Image

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

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

Feature Box

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

  • Width: = 220px
  • Height: Variable (200px-300px recommended)

Rich Text Widget

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

  • Width: = Variable (400px recommended)
  • Height: Variable (250px recommended)

Secondary Footer

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

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