List of Image Sizes and Instructions

Owned by
Lauren Grant
Last updated: Mar 03, 2020
2 min read

  • Always add an alt tag (description)! 

  • Sizes (all in px) 

    • Home page hero for mobile 650(w) x 600(h) at 72dpi 

      • Save the image as ase-home-mobile.jpg in Media → banners 

    • Home page hero for tablet 815(w) x 440(h) at 72dpi 

      • Save the image as ase-home-tablet.jpg in Media → banners 

    • Horizontal for any article (news, interior pages, etc) 1000(w) x 750(h) at 300dpi 

    • Vertical for any article (news, interior pages, etc) 800(h) x 600(w) at 300dpi 

    • Faculty portraits for the directory 800(w) x 600(h) at 72dpi 

  • Adding images in articles 

    • Place your cursor where you want the image to appear 

    • Click on the “Image” button below the content editor and choose your image. Don’t forget an alt description 

    • Click/highlight the image and look at the “Path” below the editor window. You will see p > img. Click on “p” 

    • From the “Styles” drop down choose one: 

      • “IMAGE-full-column” for the horizontal image to fill the width of the main column  

      • “IMAGE-horizontal-float-left” for the horizontal image to take up half of the column width and text to be on the right and to wrap around 

      • “IMAGE-horizontal-float-right” for the horizontal image to take up half of the column width on the right and text to be on the left and wrap around 

      • “IMAGE-vertical-float-left” for the vertical image to take up half of the column width on the left and text to be on the right and wrap around 

      • “IMAGE-vertical-float-left-small” for the vertical image to take up about a third of the column width on the left and text to be on the right and wrap around 

      • “IMAGE-vertical-float-right” for the vertical image to take up half of the column width on the right and text to be on the left and wrap around 

      • “IMAGE-vertical-float-right-small” for the vertical image to take up about a third of the column width on the right and text to be on the left and wrap around 

    • If you want two images side by side 

      • Click on the “Image” button below the content editor and choose your image. Don’t forget an alt description. Hit return/enter and click on the “Image” button again to add the second image. Hit return/enter one more time 

      • Click on the first image and look at the “Path” below the editor window. You will see p > img. Click on “img” 

      • From the “Styles” drop down choose “IMAGE-two-side-by-side-left” 

      • Click on the second image, find the “Path” and click on “img” 

      • From the “Styles” drop down choose “IMAGE-two-side-by-side-right” 


Related articles

Confluence Documentation | Web Privacy Policy | Web Accessibility