Responsive Media Specs
Quick-reference specifications for responsive photos and videos used across Purdue website blocks and layouts.
These image sizes are suggested and may be variable depending on your content.*
Call to Action
| Block | Desktop Aspect Ratio | Tablet Aspect Ratio | Mobile Aspect Ratio | Pixels |
|---|---|---|---|---|
| CTA Image Banner | 16:9 | 16:9 | 16:9 | 1920 x 1080 |
| CTA Stack | 16:9 | 16:9 | 16:9 | 518 x 291 |
| Mosaic Cards — Small | 16:9 | 16:9 | 16:9 | 640 x 360 |
| Mosaic Cards — Large | 4:5 | 4:5 | 4:5 | 480 x 600 |
Heroes
| Block | Desktop Aspect Ratio | Tablet Aspect Ratio | Mobile Aspect Ratio | Pixels |
|---|---|---|---|---|
| Animated Header Hero | 16:9 | 16:9 | 16:9 | 712 x 400 |
| Diagonal Link Hero | 16:9 | 16:9 | 16:9 | 1023 × 575 |
| Diagonal Hero | 4:3 | 9:16 | 4:3 | 1320 × 800 |
| Link Hero | 16:9 | N/A | N/A | 1920 x 1080 |
| Simple Hero | 16:9 | N/A | N/A | 1920 x 1080 |
| Standard Hero — Background | 2:1 | 2:1 | 2:1 | 1920 x 960 |
| Standard Hero — Vertical stack | 16:9 | Hidden on tablet | Hidden on mobile | 406 x 226 |
| Story Hero (Cascade only) | 16:9 | 16:9 | 16:9 | 950 x 534 |
Interaction
| Block | Desktop Aspect Ratio | Tablet Aspect Ratio | Mobile Aspect Ratio | Pixels |
|---|---|---|---|---|
| Flipping Cards — Front | 3:4 | 3:4 | 3:4 | 600 × 800 |
| Flipping Cards — Back | 3:2 | 3:2 | 3:2 | 600 × 400 |
| Pathway — Aligned | 16:9 | 16:9 | 16:9 | 712 x 400 |
| Pathway — Full width | 16:9 | 16:9 | 16:9 | 1344 x 756 |
| Post Grid | 16:9 | 16:9 | 16:9 | As uploaded |
Media
| Block | Desktop Aspect Ratio | Tablet Aspect Ratio | Mobile Aspect Ratio | Pixels |
|---|---|---|---|---|
| Image Slider | As uploaded or 16:9 | As uploaded or 16:9 | As uploaded or 16:9 | As uploaded |
| Instagram Feed | 1:1 | 1:1 | 1:1 | 665 x 665 |
| Media Grid — Featured | 16:9 | 16:9 | 16:9 | 760 x 427 |
| Media Grid — Side | 16:9 | 16:9 | 16:9 | 456 x 257 |
| Custom Video — Horizontal | 16:9 | 16:9 | 16:9 | N/A |
| Custom Video — Vertical | 9:16 | 9:16 | 9:16 | N/A |
Post/Content
| Block | Desktop Aspect Ratio | Tablet Aspect Ratio | Mobile Aspect Ratio | Pixels |
|---|---|---|---|---|
| 50/50 Animated Header | 16:9 | 16:9 | 16:9 | 950 x 534 |
| 50/50 Large Images | 4:3 | 9:16 | 9:16 | 1440 x 1080 |
| 50/50 Slideshow | 1:1 | 9:16 | 16:9 | 1600 x 900 |
| Cards — Story | 16:9 | 16:9 | 16:9 | 660 x 370 |
| Cards — Faculty | 1:1 | 1:1 | 1:1 | 727 x 727 |
| Cards — Simple | 16:9 | N/A | N/A | 660 x 370 |
| Content (Columns) | 16:9 | 16:9 | 16:9 | 712 x 400 |
| Content Featured | As uploaded | As uploaded | As uploaded | As uploaded |
| Post Links | 16:9 | 16:9 | 16:9 | 660 x 370 |
| Post Highlight/Showcase — Background | 16:9 | 16:9 | 16:9 | 1920 x 1080 |
| Post Highlight/Showcase — Slider | 1:1 | 1:1 | 16:9 | 970 x 546 |
| Purdue Quote | 3:2 | 9:16 | 16:9 | 1006 x 556 |
| Timeline — Aligned | 16:9 | 16:9 | 16:9 | 975 x 548 |
| Timeline — Full width | N/A | 16:9 | 16:9 | 975 x 548 |