ES Eventsanitäter — Asset Checklist

A focused, opinionated brief for the photographer / asset-acquisition lead. Pick everything in section 2 (must-haves) first; sections 3—​5 elevate the result.

0. Brand direction (read before shooting)

The site positions ES as the premium, calm, proof-driven choice — not the cheap option, not the heroic-action one either. Visuals should communicate:

  • Competence over drama — paramedics setting up gear, briefing, documenting; not running with stretchers.

  • Pre-event / between-event moments — preparation, planning, equipment checks. Less "action shot", more "professionals at work".

  • Restraint — clean compositions, plenty of negative space, no busy backgrounds.

  • Authentic over staged — real crew, real vehicles, real venues (with permission). No stock photography.

What to avoid:

  • Bloody patients, distressed faces, hospital cliches.

  • Identifiable patients or visitors (DSGVO — written consent or unrecognizable framing).

  • Smiling-into-camera "team photo" energy. Side-on, mid-action, looking at gear is stronger.

  • Competitor branding visible in backgrounds.

  • Heavy filters; the site palette assumes neutral, well-exposed photography.

1. Technical specs (apply to everything)

Property Spec

Source format

RAW capture, deliver as full-res TIFF or hi-res JPG

Web export — hero

2400×1500 (16:10) and 1920×1080 (16:9), AVIF + WebP + JPG fallback

Web export — portrait

1200×1600 (3:4), AVIF + WebP + JPG fallback

Web export — card

1600×1000 (16:10), AVIF + WebP + JPG fallback

File-size targets

hero ≤200 KB AVIF / ≤350 KB WebP; cards ≤120 KB / ≤200 KB

Color profile

sRGB, embedded

Naming

exactly as listed below; lowercase, hyphenated, no spaces

The site is DSGVO-strict (no Google Fonts CDN, no third-party trackers). Photos are self-hosted from /public/img/... — there is no CDN to lean on, so weight matters. Generate AVIF/WebP/JPG triplets so the browser picks the smallest it can render.

2. Must-haves (the site renders broken placeholders without these)

These are referenced today and will show grey boxes until you deliver them.

2.1 Team portraits — 3 photos, 3:4 portrait

Same lighting, same neutral background, consistent crop (head to mid-chest). Subject looks slightly off-camera, calm expression. Avoid white coats / clinical look — branded polo or quarter-zip works better.

  • public/img/team/christian-schmitz.jpg — Christian Schmitz (Gründer)

  • public/img/team/anna-mueller.jpg — Anna Müller

  • public/img/team/markus-weber.jpg — Markus Weber

2.2 Service-vertical heroes — 4 photos, 16:10 wide

One hero per vertical. Pick the moment that communicates the vertical’s character, not its biggest moment.

  • public/img/leistungen/festivals/hero.jpg — open-air festival ground at dusk/dawn with sanitäter station visible mid-frame. Not a packed crowd shot.

  • public/img/leistungen/sport/hero.jpg — track-side or pitch-side crew with kit ready. Trail-run, marathon, or stadium event.

  • public/img/leistungen/unternehmen/hero.jpg — corporate venue (conference hall, expo floor) with discreetly positioned medic / station. Suits in the background fine.

  • public/img/leistungen/clubs/hero.jpg — indoor venue, warm low light, single medic visible. Lean moody-but-controlled, not party-shot.

2.3 Article hero images — 2 photos, 16:9 wide

These are editorial-feeling, can be more abstract.

  • public/img/wissen/sanitaetsdienst-pflicht/hero.jpg — "Wann ist ein Sanitätsdienst Pflicht?" — paperwork, regulations, planning materials. A clipboard with a venue plan, or law book on a desk with a radio. Documentary tone.

  • public/img/wissen/sicherheitskonzept/hero.jpg — "Sicherheitskonzept Grundlagen" — flat-lay of a planning desk: site plan, marker, ID lanyard, radio. Top-down or 3/4 angle.

3. Strongly recommended (we built page layouts that assume these exist)

3.1 Equipment photography — 8—​10 photos, 16:10 wide

/leistungen/equipment shows four vehicle cards and two station cards. Currently no image paths; pages render text-only. Adding photography makes this page the equipment-proof showcase the spec asks for.

  • 4× vehicle photos: KTW Mercedes Sprinter, KTW VW Crafter, Einsatzleitwagen, First-Response VW T6. 3/4-front angle, clean background (cool grey concrete or asphalt), morning light.

  • 2× station photos: 6×3m mobile station set up; 3×3m tent set up. Show the side that has the cross / signage.

  • 2—​4× detail shots: open vehicle rear showing kit, equipment laid out flat-lay, station interior. These can fill out the page or seed the home page "equipment strip" later.

Add these to content/equipment/equipment.md as an image: field on each vehicle / station entry once shot.

3.2 Home page hero — 1 photo, ~21:9 ultra-wide

The home hero currently renders the deep-navy gradient with KPI stats. The spec calls for a hero image. A single ultra-wide photograph at the top would dramatically lift first-impression.

  • public/img/home/hero.jpg — Wide environmental shot: dusk silhouette of a deployed station with venue lights in background, or a Sanitäter-marked vehicle at a festival ground at golden hour. Strong horizon line so the deep-navy gradient can sit underneath / blend.

Composition tip: leave the left third negative so the headline + KPI stats overlay legibly. Provide a slightly darker version for desktop and a tighter crop for mobile (~16:10).

3.3 Logo + favicon — vector source + raster exports

The site has no logo asset; the nav prints <span>ES <span>Eventsanitäter</span></span> as type. Acceptable as a fallback but limits brand presence.

Need:

  • public/img/brand/logo.svg — primary mark, single color version (deep-navy) AND signal-red version.

  • public/img/brand/logo-wordmark.svg — horizontal wordmark "ES Eventsanitäter".

  • public/favicon.ico (multi-res 16/32/48), public/icon-192.png, public/icon-512.png, public/apple-touch-icon.png (180×180).

  • public/img/brand/og-default.jpg — 1200×630 OG image with logo + tagline for when individual pages don’t override.

4. Nice-to-have (next iteration)

These don’t block launch but raise quality if you’re already booking a shoot day:

  • Per-article hero images for future articles (each new content/wissen/*.md should ship with one).

  • Process page hero strips for each of the 5 steps on /so-arbeiten-wir — could turn the sidebar into a visual sequence rather than a TOC.

  • Team page filter chips — once you have ≥6 portraits, filter-by-certification becomes meaningful.

  • Per-vertical CTA imagery — currently every CTA is a dark band; a single contextual photo on the right elevates each one.

5. Where to source if budget is tight

Honest ranking:

  1. Hire a local photographer for 1—​2 shoot days at a real event you’re already covering. €1.5—​3k. Best ROI for an authentic site; everything in section 2 + 3 in one go. Recommend Aachen / Köln-based: ask in the local NRW photographer network or via the regional Berufsfotografen-Verband. Brief them with this document.

  2. Stock as a stopgap, only for editorial article heroes (section 2.3). Use Unsplash for free + Stocksy for licensed. Search "emergency planning", "site plan paperwork", "two-way radio desk". Avoid generic "paramedic" stock — it screams stock.

  3. Do not use AI-generated photos of your staff or equipment. It will eventually be spotted, and the brand promise here is authenticity.

6. Delivery checklist

When assets arrive, the wiring is mechanical:

# 1. Drop the AVIF/WebP/JPG triplet under public/img/<area>/...
public/img/team/christian-schmitz.jpg
public/img/team/christian-schmitz.webp
public/img/team/christian-schmitz.avif

# 2. The markdown frontmatter already references the .jpg path —
#    no code change needed for the must-haves in section 2.

# 3. For equipment (section 3.1), add `image:` fields to
#    content/equipment/equipment.md and update src/pages/leistungen_equipment.rs
#    to render them in each card.

# 4. For home hero (section 3.2), update src/pages/home.rs Hero usage
#    to pass `image=` and `image_alt=` props.

# 5. For favicon + OG (section 3.3), update src/lib.rs `shell()` to add
#    <link rel="icon" ...> and default <meta property="og:image" ...>.

The codebase is ready. Photos are the missing layer.