Practice + Pixel

Images

Drop files here and the site picks them up. Nothing is resized at build time, so ship the sizes below.

work/

Screenshots of client sites. Wired through _data/work.yml, not markup: set shot: and shot_mobile: on the entry and both pages update.

Field Where it shows Ratio Ship at
shot Home card, and the desktop figure on work/ 16:10, cropped to fill on the card 1600 x 1000
shot_mobile The narrow figure beside it on work/ Whatever the phone is 750 wide, full height

shot is cropped object-fit: cover in the Home card, so keep the interesting part of the page near the top. A portrait capture crops badly there: use a desktop-width screenshot for shot.

Naming: mana-desktop.png, mana-mobile.png, serenity-desktop.png, serenity-mobile.png.

about/

File Where it shows Ratio Ship at
headshot.jpg about/, left rail 4:5 portrait 720 x 900

Renders about 224px wide, so 720 covers 3x.

Alt text

Every slot writes its own alt text from the data, except the headshot. Replace that one by hand when the file lands.