Photos must be sized appropriately for different uses. This helps avoid an awkward cropping after the photo is loaded into the site (and makes your pages look great).
Tip: Select an image focal point in the CMS to avoid the most important part of your image being cropped by the screen.
![Example of article billboard image layout.](/sites/default/files/marketing/article_billboard.png)
Article Billboard
1500x940px
![Example of hero pano image layout.](/sites/default/files/marketing/pano_0.png)
Hero Pano
1500x455px
![Example of full width image layout.](/sites/default/files/marketing/full-width.jpg)
Full-width
950x550px
![Example of inline horizontal image layout.](/sites/default/files/marketing/inline-horizantal.jpg)
Inline Horizontal
400x300px
![Example of inline vertical image layout.](/sites/default/files/marketing/inline-vertical.jpg)
Inline Vertical
755x945px
![Example of half divided container image layout.](/sites/default/files/marketing/1.2-div-container.jpg)
1/2 Div Container
560x345px
![Example of third divided container image layout.](/sites/default/files/marketing/1.3-div-container.jpg)
1/3 Div Container, 1/4 Div Container
560x345px
![Example of gallery image layout.](/sites/default/files/marketing/gallery.jpg)
Gallery
825x487px
![Example of an image as an aside.](/sites/default/files/marketing/aside_0.png)
Aside
585x415px
![Example of a spotlight image layout.](/sites/default/files/marketing/faculty_spotlight.png)
Faculty Spotlight
846x475px
![Example of headshot images layout.](/sites/default/files/marketing/accordian.png)
Headshot
560px width max, 560px height max
Technical Specs
Images need to be sized appropriately but also saved using the following specs:
– Under 1 MB (under 200 kb is industry standard and ideal)
– 40% quality JPG compression (use your best judgment on increasing the quality if needed)
– No metadata
– Use Photoshop's crop tool (w x h x dpi)
– Use Photoshop's Export As function to save images
To check the size of an image in your browser, you can use Chrome's Image Info extension.
Image Editing
A few easy online apps to try are Fotor and Squoosh, which will crop to specific pixel dimensions. Photoshop is also a free option via the university’s Enterprise Adobe Creative Cloud account.
Naming Conventions
It is best practice to follow proper naming conventions. For files on the web, keep the name short, descriptive and omit unnecessary information (“edit_005” for example). Images on the web should be saved with dashes (not underscores) in between and pixel dimensions should be included. Please use the following file name convention:
“YearMonthDay”-“description and/or name”-“pixel dimensions”
Example: 20190409-Jasmine-Adgerson-300x200.jpg