MEDIA PROTOCOL - VISUAL TEST PAGE
THE PROBLEM
Your site will contain five types of media: photos (press box, behind-the-scenes), phone screenshots (text messages, tweets), desktop screenshots, document scans (whiteboards, notes), and video stills. Each has different native dimensions, aspect ratios, and compression needs. The protocol standardizes all of them so they look intentional - not random.
Below are test renders for each image type, shown inside mobile and desktop device frames exactly as they'd appear on your site. Every image follows the protocol specs.
TEST 1
Press box shots, stadium views, behind-the-scenes. This is your most common photo type. Protocol renders these full-width at 1440px, compressed to WebP at 82%.
Horizontal photos fill the full content width on both mobile and desktop. On phones, the browser downscales from 1440px to ~780px - still Retina-sharp, zero wasted bandwidth.
TEST 2
Phone camera shots of whiteboards, hallway moments, vertical behind-the-scenes. These are taller than they are wide. The protocol does NOT force these to 16:9 - it keeps the natural aspect ratio and caps the width at 1440px (or native width if smaller).
Vertical photos display narrower than full-width - they center in the content column with space on either side (desktop) or fill most of the phone screen width. This looks natural and intentional.
TEST 3
This is your evidence - the 250,000 text messages, the iMessage threads with players and agents. These are narrow and tall. The protocol keeps them at native width (typically 1170px for iPhone) and does NOT stretch them.
Screenshots display at their natural width - narrower than full-width photos. This is intentional. They look like what they are: phone screens. Stretching them to fill the column would make text blurry and break the illusion.
TEST 4
Embedded tweets, Deadspin front pages, social media posts. These are wider than phone screenshots but often not full 16:9. Protocol renders at 1080-1440px width.
DEVICE COMPARISON
Here's how the same photo renders inside a mobile frame versus a desktop frame. The 1440px width serves both perfectly - the phone downscales, the desktop displays near-native.
SPEC SUMMARY
| Type | Width | Aspect | Max Size | Format |
|---|---|---|---|---|
| Horizontal photo | 1440px | 16:9 | 250KB | WebP 82% |
| Vertical photo | 1080px | Natural | 250KB | WebP 82% |
| Phone screenshot | 900px | Natural | 200KB | WebP 82% |
| Desktop screenshot | 1080-1440px | Natural | 200KB | WebP 82% |
| Document/whiteboard | 1440px | Natural | 350KB | WebP/PNG 85% |
| Video still | 1440px | 16:9 | 200KB | WebP 82% |
The protocol handles all five image types cleanly. Horizontal photos fill the column. Vertical photos and screenshots center naturally at narrower widths. Nothing is stretched, cropped, or distorted. Text in screenshots stays crisp. File sizes stay well under mobile performance thresholds.
The key insight: standardizing width, not dimensions. Every image shares a maximum width anchor (1440px for photos, 900-1080px for screenshots) but keeps its natural height. This creates visual consistency without forcing uniform crops.
NEXT STEP
Upload five images to this chat - one of each type below - and I'll process them to protocol spec and drop them into this page so you can see exactly how YOUR content looks:
Five images. I'll process them, render them in device frames, and give you the final answer on whether the protocol holds up with your actual content.