Image Size Guidelines for Components and Features of the USC Dornsife Website
The following table catalogues how images display at the 1200pt desktop view and recommends content management system (CMS) upload sizes that will ensure crisp images even on retina devices.
The design for the new USC Dornsife website is responsive, meaning that content automatically scales and rearranges for the best possible display based on the user’s screen size.
vw = viewport width
vh = viewport height
cw = component width
ch = component height
Component |
Display Size |
Upload Size |
Ratio |
Note |
| @1x at 1200pt | Recommended minimum | Responsive | ||
| Article: Hero | 900×506 px | 2000×1150 px | 16:9 | Promotes articles site-wide. |
| Article: Image Gallery | 650×365 px | 1950×1097 px | 16:9 | |
| Articles Carousel | 350×197 px | 1050x591px | 16:9 | |
| Contact Us: Map | 550×550 px | 1650×1650 px | 1:1 | |
| DCI Overlay Hero |
1000×563 px | 2000×1150 px | 16:9 | |
| Editorial Cards – Horizontal |
350×197 px | 1050x591px | 16:9 | |
| Editorial Cards – Vertical |
325×455 px | 975×1365 px | 5×7 | |
| Exceptional Featured Story | 1200×675 px | 2000×1150 px | 16:9 | |
| Featured Block | 600×600 px | 1800×1800 px | 1:1 | |
| Full-Width Image with Text | 1200×675 px | 2000×1150 px | 16:9 | Keep image focus to left or right and use appropriate orientation of component. |
| Hero with Featured Story | 1200×600 px | 2000×1000 px | 2:1 | |
| Homepage Hero: Card Flip | 500×500 px | 1500×1500 px | 1:1 | |
| Homepage Hero: CTA with Image | 400×400 px | 2000×2000 px | 1:1 or 2:1 | On tablet, images appear at 2:1 ratio and crop towards middle. |
| Homepage Hero: FW Video with Text | 100% vw x 100% vw | 2000×1150 px | Variable | Poster image will fill viewport and crop towards center. |
| Homepage Hero: Sequence Intro | 100% vw x 100% vw | 2000×1150 px | Variable | Poster image will fill viewport and crop towards center. |
| Homepage Hero: Story Carousel | 350×197 px | 1050x591px | 16:9 | |
| Interactive Content Pane | 100%vw x ch | 2000×1150 px | Variable | Use textural imagery. Image will crop towards center. |
| Interactive Quotes Pane | 100%vw x ch | 2000×1150 px | Variable | Use textural imagery. Image will crop towards center. |
| News & Events Promo: Instagram | 600×600 px | 1800×1800 px | 1:1 | |
| News & Events Promo: Event | 600×337 px | 1800×1013 px | 16:9 | |
| People Profile | 325×455 px | 975×1365 px | 5×7 | |
| Photo Wall | 500px wide in lightbox | 1500xH px | Variable | Images display with standard width but can be any height. |
| Program Overlay Hero | 1000×563 px | 2000×1150 px | 16:9 | |
| Minisite Homepage Hero: Image |
1200×675 px | 2000×1150 px | Variable | Page title appears centered over image. |
| Minisite Homepage Hero: Video | 1200×675 px | 1920×1080 px | Variable | Page title appears centered over image. |
| Minisite Program Hero | 1200×500 px | 2000×1150 px | 16:9 | |
| Minisite News & Events Promo: Events | 200×113 px | 600×338 px | 16:9 | |
| Rich Text: Left/Right Embedded Images | 350 px x Height | 1050 px x 3xHeight | Unrestricted | Image width is constrained by template but height is flexible. |
| Scrolling Image with Text | 50%vw x 100%vh | 1800×2400 px | Variable | Image will crop toward center to fill half of the user’s viewport. |
| Sign Up Block | 450px x ch | 1350 x 900px | 3:2 | Keep image focus in center or use textural imagery. If component height exceeds 300px, image will crop towards center to fill ch. |
| Social Media Promo: Facebook Posts | 500×281 px | 1500×844 px | 16:9 | |
| Social Media Promo: Instagram Posts |
300×300 px | 900×900 px | 1:1 | |
| Spotlight Quote | 325×325 px | 975×975 px | 1:1 | |
| Stacking Elements: Landscape Image |
300×169 px | 900×506 px | 16:9 | |
| Stacking Elements: Portrait Image | 300×375 px | 900×1125 px | 3:4 | |
| Video Listing: Poster Image | 650×365 px | 1950×1097 px | 16:9 | |
| Video Listing: Video | 1200×675 px | 1920×1080 px | 16:9 | |
| Video Pane: Portrait Poster | 300×533 px | 900×1600 px | 9:16 | |
| Video Pane: Portrait Video | 300×533 px | 1080×1920 px | 9:16 | |
| Video Pane: Landscape Poster | 400×225 px | 1200×675 px | 16:9 | |
| Video Pane: Landscape Video | 400×225 px | 1920×1080 px | 16:9 | |
| Video with Text: Poster Image | 900×506 px | 2000×1150 px | 16:9 |