Image & Visual Asset Guidelines¶
General Principles¶
- Authentic over stock — Real photos of the practice, team, and equipment always beat stock. Patients notice.
- Warm and clinical — Clean, well-lit, modern. Not sterile or intimidating. Not overly lifestyle/stock-like.
- Consistent — Same photographer, same editing style across all photos for a given practice. Visual coherence matters.
- Compliant — Ordre des chirurgiens-dentistes rules apply to all imagery (see Compliance section below).
Technical Specifications¶
Source File Requirements¶
Upload the highest quality source available. The pipeline (Pillow → WebP + srcset) handles optimization.
| Usage | Min resolution | Aspect ratio | Notes |
|---|---|---|---|
| Hero | 1920 x 1080 px | 16:9 (desktop), cropped to 4:3 (mobile) | Must work with text overlay — needs clear area for heading |
| Service card | 800 x 500 px | 16:10 | Subject centered — edges may be cropped on smaller viewports |
| Team portrait | 600 x 800 px | 3:4 | Head and shoulders. Consistent framing across all team members |
| Before/after | 800 x 600 px | 4:3 | Identical framing, lighting, and angle for both photos |
| Gallery | 1200 x (any) px | Preserve original | Min 1200px wide. Any ratio — grid adapts |
| Blog featured image | 1280 x 720 px | 16:9 | Relevant to article topic |
| Logo | Vector (SVG) | N/A | SVG preferred. PNG fallback at 2x display size (e.g. 400 x 100 px) |
| Favicon | 512 x 512 px | 1:1 | Simple, recognizable at 16px. Usually the logo mark alone |
File Format¶
- Source: JPEG or PNG (max 5 MB per file, enforced by Aletheia)
- Output: Auto-converted to WebP with responsive srcset (640w, 1280w, 1920w for heroes; 400w, 800w for cards)
- LQIP: 20px blur placeholder auto-generated for all images
- Alt text: Required on upload (Aletheia enforces). Descriptive, not keyword-stuffed.
Photography Briefs¶
Team Portraits¶
The most important photos on the site. Patients choose a dentist based on trust, and a professional portrait is the first impression.
Setup: - Framing: Head and shoulders, centered. Slight angle (not passport-straight). - Background: Neutral — light gray, white, or softly blurred practice interior. Same background for the entire team. - Lighting: Soft, even lighting. No harsh shadows. Natural light from a window works well. Avoid direct flash. - Expression: Friendly, approachable smile. Eyes to camera. Not laughing, not stern. - Dress code: White coat (blouse blanche) for practitioners. Clean, professional for assistants. Consistent across team. - Consistency: Same photographer, same session, same setup for all team members. Mixed-quality portraits undermine the whole page.
Common mistakes to avoid: - Phone selfies or webcam shots - Different backgrounds per person - Cropped group photos (uneven quality, awkward framing) - Overly retouched / AI-enhanced faces - Casual clothing
Ideal: Hire a local portrait photographer for a 2-hour session. ~15 minutes per person. Budget: 300-500 EUR per practice for 5-10 team members.
Cabinet Interior & Exterior¶
For "Notre philosophie", "Nos technologies", hero backgrounds, and trust-building.
What to shoot:
| Subject | Purpose | Tips |
|---|---|---|
| Reception/waiting room | First impression, welcoming feel | Wide angle. Fresh flowers or magazines visible. No patients in frame |
| Treatment room | Modern equipment, cleanliness | Clean, organized. Equipment visible but not intimidating. Soft lighting |
| Building exterior | Locating the practice, street presence | Daytime, good weather. Signage visible. No cars blocking |
| Equipment close-ups | "Nos technologies" page | Clean angle, in-situ (not on a shelf). Include context (chair, screen) |
| Team at work | Trust, human element | Candid but staged — team in action, not posed. Consent from any visible patient (or use mannequin/colleague) |
| Hallway / corridor | Spatial feel, accessibility | Show wide corridors, elevator if applicable, wheelchair accessibility |
Shooting tips: - Time: Early morning or late afternoon for best natural light. Never midday (harsh shadows). - Preparation: Tidy everything. Remove personal items, food, jackets. Fresh consumables (cups, tissues). - No patients: Never photograph real patients in treatment. Use empty rooms or staged scenes with staff. - Horizontal framing: All cabinet photos should be landscape (horizontal). The design system uses 16:9 and 16:10 ratios.
Equipment & Technology¶
For "Nos technologies" page (cards_grid or text_media blocks).
- Show the equipment in context — on its mount, in the room, connected. Not the product photo from the manufacturer.
- Clean and lit — wipe screens, remove clutter around the device.
- Include a sense of scale — a person's hand or the dental chair nearby helps patients understand the technology.
- Label it — Alt text and caption should name the technology in patient-friendly terms: "Scanner intra-oral 3D" not "CEREC Primescan AC"
Hero Images¶
The full-width hero is the first thing patients see. It sets the emotional tone.
Requirements: - Text overlay zone: The hero always has text (H1 + tagline + buttons) overlaid on the left, right, or center. The image needs a clear, low-detail area where text will sit. Busy images make text unreadable. - Mood: Warm, welcoming, professional. A smiling team photo works well. An empty modern reception area works too. Avoid clinical close-ups. - Resolution: 1920 x 1080 px minimum. The image spans full viewport width. - Gradient: The design system applies a gradient overlay for readability, but the source image still matters — dark images become too dark, overly bright images wash out.
Best hero subjects: 1. Team group photo (best: 3-5 people, natural poses, in the practice) 2. Reception/waiting area (modern, welcoming) 3. Practice exterior with signage (establishes location)
Avoid: - Stock photos of models pretending to be dentists - Close-ups of teeth or dental procedures (alienating) - Generic city skylines or landscapes
Before/After Case Studies¶
Clinical photography with strict rules.
Technical requirements: - Identical setup: Same angle, same distance, same lighting, same background for before and after - Intraoral photos: Use cheek retractors and intraoral mirrors for consistent results - Color calibration: Include a color reference card in one setup shot (can crop out later) - Background: Black or neutral gray (standard clinical photography background)
Compliance requirements (Ordre): - No guaranteed results implied — Always pair with disclaimer: "Les résultats peuvent varier selon chaque patient" - No patient identification — No full face photos unless written consent obtained. Intraoral/smile-only photos preferred. - Factual presentation — Caption describes the treatment performed, not the aesthetic improvement. "Pose de 6 facettes céramique" not "Transformation spectaculaire du sourire"
Minimum per case study: - 1 before photo + 1 after photo (same framing) - Treatment type (for API filtering) - Brief description (1-2 sentences, factual)
Stock Photography¶
When original photography isn't available, stock is acceptable for: - Blog post illustrations - Generic concept images (e.g. "patient smiling" for a Votre Besoin page) - Placeholder during site build (replaced by real photos before launch)
Stock Photo Rules¶
Do: - Use photos with natural lighting and real settings - Choose diversity in age, gender, ethnicity - Prefer European-looking dental settings (not American McMansion offices) - Use the same stock source per practice for visual consistency
Don't: - Use the same stock photos as competitor dental sites (reverse image search to check) - Use obviously posed "thumbs up at the dentist" stock clichés - Use AI-generated faces (uncanny valley, ethical concerns, detectable) - Use stock for team portraits (patients will notice in-person)
Recommended sources: - Unsplash (free, high quality, check license) - Pexels (free, good dental/medical selection) - Adobe Stock (paid, widest selection, if budget allows)
Illustrations & Icons¶
The design system uses Bootstrap Icons (via StatCard icon prop). No custom illustrations are needed at launch.
If adding illustrations later:
- Style: Line art or flat vector. Match the warm, professional tone. No cartoonish clipart.
- Colors: Use design token colors (--primary, --accent). No off-brand colors.
- Consistency: Same style across all illustrations. Commission from one source.
Alt Text Guidelines¶
Every image must have alt text (Aletheia enforces this on upload).
Rules:
- Describe what the image shows, not what it means: "Salle de traitement avec fauteuil dentaire et écran de radiographie" not "Notre cabinet moderne"
- Include relevant context: "Dr Jean Dupont, chirurgien-dentiste" not just "photo de dentiste"
- For decorative images (background textures, dividers): leave alt empty (pipeline handles alt="")
- For before/after: "Sourire du patient avant traitement" / "Sourire du patient après pose de 6 facettes céramique"
- Keep under 125 characters
- No keyword stuffing: "dentiste aubagne implant dentaire aubagne meilleur dentiste" is spam, not alt text
Image Checklist Template (per practice)¶
Copy to content/practices/{code}/image-checklist.md:
## Image Checklist — {Practice Name}
### Team Portraits
- [ ] Dr {Nom} — portrait 3:4
- [ ] Dr {Nom} — portrait 3:4
- [ ] {Assistant(e)} — portrait 3:4
(repeat for all team members)
### Hero Images
- [ ] Homepage hero — team group photo or reception (1920x1080, 16:9)
- [ ] Service hub hero(s) — 1 per enabled category (1920x1080)
### Cabinet Photos
- [ ] Reception / waiting room (horizontal)
- [ ] Treatment room (horizontal)
- [ ] Exterior with signage (horizontal)
- [ ] Equipment close-ups (1 per notable technology)
### Case Studies
- [ ] Case 1: {treatment type} — before + after (4:3, identical setup)
- [ ] Case 2: {treatment type} — before + after
(aim for 3-5 case studies at launch)
### Other
- [ ] Logo (SVG)
- [ ] Favicon (512x512)
- [ ] Blog post images (if launching with blog content)