Image Size Guidelines

Miami’s website is often the first introduction to our campus, academic offerings, and community. It is important that our images represent the university in the best light.

To do this, University Communications has created Image Training to show you how to add images to your web pages and provide guidelines on resizing images for different areas of use (main carousels, news pages, and other widgets). Following correct naming conventions and using alternate text for images will help improve the usability, accessibility, and search engine rankings of your website.

Faculty and staff have access to a library of professional images shot by university photographers through PhotoShelter, Miami's digital asset management system. We also recommend using an image editing tool called Pixlr  (a free, web-based service) to help you easily resize and shape your images.

 


Main Carousels

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

Universal page, "thin-wide" layout (main carousel)

Thin-wide layout means that the left navigation appears in the left column of the page.

Example: Application for Admission

  • Width: 860px
  • Height: Variable (260px minimum, 400px maximum recommended)
  • Existing banner images will be stretched by the template to fit in the new space, it is not necessary to resize all of these images unless you want to.

Universal page, "wide" layout (main carousel)

Wide layout means that there is no navigation in the left column. The image and content extend across the full width of the page.

Example: Financial Aid

  • Width: 1030px
  • Height: Variable (300px, 350px, or 400px recommended*)
  • Existing banner images will be stretched by the template to fit in the new space, it is not necessary to resize all of these images unless you want to.

Landing page (carousel)

Landing pages are used only for main division, department, or office homepages. The image extends across the full width of the page with no borders

Example: High School Admission

  • Width: 1200px
  • Height: Variable (250-400px* recommended)

News Article

  • Width: 1030px
  • Height: variable (400px recommended)

Mobile Images for All Page Layouts

Carousels provide fields to add a mobile version of your images. 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 the Financial Aid page and reduce your browser window width to see this in action.

  • Width: 700px
  • Height: 600-700px*

Social Media

  • Facebook - 1200 x 628 (470 x 246 minimum)
  • Instagram Post - 1080 x 1080 (appears as 612 x 612 in feed)
  • Instagram Story - 1080 x 1920
  • Twitter - 1024 x 512 (appears as 440 x 220 in feed) (2:1 ratio)

News Articles: Sharing on Social Media

Make sure the "Facebook Thumbnail" field has an image attached if you would like for an image to automatically appear when sharing a news article on Facebook or Twitter. Reusing the image for a banner will work. The image must be less than 5mb or it won't appear, preferably less than 500kb.

Size (2:1 ratio):

  • Width: 800px
  • Height: 400px

Content Rows with Slots and/or Widgets

For Landing and Universal page types.

If MORE THAN ONE slot or widget per row

Example: Global Initiatives/ISSS

  • Maximum Width: = 700px
  • Height: Variable

Only ONE slot or widget per row

Example: Transfer Preview Days
Virtual tour banner at the bottom of the page.

  • Maximum Width: = 1170px
  • Height: Variable

Left Column content slots and widgets

Example: Accepted Students

  • Width: 700px
  • Height: Variable

Footers

Secondary Footer

Example: IT Services

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