📾 Guide Complet des Images - sexualite-authentique.fr

📾 Guide Complet des Images - sexualite-authentique.fr

Ce document liste toutes les images utilisées dans le site, leur emplacement exact, et ce que vous devez mettre.

🎯 Images par page

PAGE 1 : Accueil (index.html)

Image 1 : Hero - Photo de danse en mouvement

  • Fichier : index.html
  • Ligne : ~60
  • Code actuel : 
    <img src="https://images.unsplash.com/photo-1518834107812-67b0b7c58434?w=600&h=700&fit=crop&auto=format&q=80"
     alt="Danse libre - LibertĂ© d'ĂȘtre"
     loading="lazy">
  • À remplacer par : Votre photo de danse libre / Contact Impro en mouvement
  • Style : COULEUR
  • Dimensions recommandĂ©es : 600x700px minimum
  • Ambiance : Énergie, mouvement, libertĂ© d’ĂȘtre
  • Placement futur : /assets/images/hero-danse-mouvement.jpg
  • Code Ă  mettre : 
    <img src="/assets/images/hero-danse-mouvement.jpg"
     alt="Danse libre - LibertĂ© d'ĂȘtre"
     loading="lazy">

PAGE 2 : Accueil - Section Qui Suis-Je (index.html)

Image 2 : Portrait professionnel N&B

  • Fichier : index.html
  • Ligne : ~200
  • Code actuel : 
    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=300&h=400&fit=crop&auto=format&q=80&sat=-100"
     alt="Duy Dang - Coach en Sexualité Authentique"
     loading="lazy">
  • À remplacer par : Votre portrait professionnel
  • Style : NOIR & BLANC
  • Dimensions recommandĂ©es : 300x400px minimum
  • Ambiance : Sobre, profond, regard direct
  • Placement futur : /assets/images/portrait-duy-nb.jpg
  • Code Ă  mettre : 
    <img src="/assets/images/portrait-duy-nb.jpg"
     alt="Duy Dang - Coach en Sexualité Authentique"
     loading="lazy">

PAGE 3 : Qui Suis-Je (qui-suis-je.md)

Actuellement, cette page n’a PAS d’image.

Image 3 (Ă  ajouter) : Portrait ou photo de danse

  • Fichier : qui-suis-je.md
  • Emplacement suggĂ©rĂ© : AprĂšs le titre, avant le premier paragraphe
  • À ajouter : Votre portrait en couleur OU une photo de vous en danse
  • Style : COULEUR ou N&B selon prĂ©fĂ©rence
  • Dimensions recommandĂ©es : 400x500px
  • Code Ă  ajouter : 
    ![Portrait Duy Dang](/assets/images/portrait-duy-couleur.jpg)

📁 Structure des dossiers images recommandĂ©e

Créez cette structure dans votre repo :

/assets/images/
├── portraits/
│   ├── duy-portrait-nb.jpg          # Portrait N&B principal
│   ├── duy-portrait-couleur.jpg     # Portrait couleur
│   └── duy-portrait-sepia.jpg       # Portrait sĂ©pia (optionnel)
│
├── danse/
│   ├── hero-danse-mouvement.jpg     # Photo hero page d'accueil
│   ├── danse-contact-impro-1.jpg    # Contact Impro
│   ├── danse-contact-impro-2.jpg    # Autre photo danse
│   └── danse-libre-scene.jpg        # Danse en groupe (optionnel)
│
├── ambiance/
│   ├── nature-lumiere.jpg           # Nature, lumiùre douce
│   ├── eau-vapeur.jpg               # Pour mĂ©taphore 99°/100°
│   ├── mains-connexion.jpg          # Connexion humaine
│   └── foret-profondeur.jpg         # Profondeur, cheminement
│
└── blog/
    ├── blog-header-1.jpg            # Header articles
    ├── blog-header-2.jpg
    └── blog-header-3.jpg

🎹 SpĂ©cifications techniques par type d’image

Portraits

  • Format : JPG
  • Ratio : 3:4 (portrait) ou 1:1 (carrĂ©)
  • RĂ©solution : 72-150 DPI
  • Poids max : 300 KB
  • Style :
    • Portrait principal : N&B, fond neutre, regard direct
    • Portrait secondaire : Couleur naturelle, environnement chaleureux

Photos de danse

  • Format : JPG
  • Ratio : 4:5 ou 3:4
  • RĂ©solution : 72-150 DPI
  • Poids max : 500 KB
  • Style :
    • En mouvement, Ă©nergie
    • LumiĂšre naturelle ou d’ambiance
    • Couleur saturĂ©e mais naturelle

Photos d’ambiance

  • Format : JPG
  • Ratio : 16:9 ou 4:3
  • RĂ©solution : 72-150 DPI
  • Poids max : 400 KB
  • Sources possibles :
    • Vos propres photos
    • Unsplash.com (gratuit, haute qualitĂ©)
    • Pexels.com (gratuit)

📝 Liste de remplacement complùte

Fichier : index.html

Ligne Image actuelle À remplacer par Nouveau chemin
~60 Unsplash photo-1518834107812 Photo danse mouvement /assets/images/danse/hero-danse-mouvement.jpg
~200 Unsplash photo-1507003211169 Portrait N&B /assets/images/portraits/duy-portrait-nb.jpg

🔍 Comment trouver les images dans le code

MĂ©thode 1 : Recherche globale

Ouvrez votre Ă©diteur et cherchez :

  • images.unsplash.com → Ce sont les placeholders Ă  remplacer
  • <img src= → Pour trouver toutes les balises images
  • ![ → Pour trouver les images Markdown

MĂ©thode 2 : Liste des fichiers contenant des images

  1. index.html → 2 images (Hero + Portrait)
  2. qui-suis-je.md → Aucune image actuellement (à ajouter si vous voulez)
  3. Articles de blog → Aucune image actuellement (vous pouvez en ajouter)

✅ Checklist de remplacement

  • CrĂ©er le dossier /assets/images/
  • CrĂ©er les sous-dossiers : portraits/, danse/, ambiance/, blog/
  • Photo 1 : Hero danse mouvement (COULEUR, 600x700px) → /assets/images/danse/hero-danse-mouvement.jpg
  • Photo 2 : Portrait N&B (300x400px) → /assets/images/portraits/duy-portrait-nb.jpg
  • Remplacer dans index.html ligne ~60 l’URL Unsplash par le chemin local
  • Remplacer dans index.html ligne ~200 l’URL Unsplash par le chemin local
  • (Optionnel) Ajouter des images dans les articles de blog
  • (Optionnel) Ajouter une image dans qui-suis-je.md

💡 Conseils

Photos de vous :

  • Demandez Ă  un photographe professionnel pour le portrait principal
  • Pour les photos de danse, demandez aux photographes prĂ©sents pendant les stages
  • Le portrait N&B doit ĂȘtre sobre, profond, authentique (pas de sourire forcĂ©)

Optimisation des images :

Avant de les mettre sur le site, optimisez-les avec :

  • TinyPNG.com (compression sans perte de qualitĂ©)
  • Squoosh.app (Google, trĂšs performant)

Cela accélÚrera le chargement du site.

Photos d’ambiance :

Si vous n’avez pas de photos personnelles, utilisez :

  • Unsplash.com → Recherchez : “intimate light”, “nature warmth”, “connection”
  • Pexels.com → Recherches similaires
  • Filtres : PrivilĂ©giez les tons chauds (terracotta, beige, olive)

🚀 Aprùs remplacement

Une fois les images en place :

  1. Testez localement : 
    bundle exec jekyll serve

    VĂ©rifiez que toutes les images s’affichent

  2. Committez : 
    git add assets/images/
git commit -m "Ajout des photos réelles"
git push
  3. Le site se mettra Ă  jour automatiquement sur GitHub Pages

🎹 Favicon (icîne du site)

Le favicon est la petite icîne qui apparaüt dans l’onglet du navigateur et dans les favoris.

Configuration actuelle

Le favicon est configuré et activé dans _config.yml :

favicon:
  enable: true
  path: "/assets/images/favicon"

Fichiers à créer

Pour que le favicon fonctionne, vous devez créer les fichiers suivants dans /assets/images/favicon/ :

  1. favicon-16x16.png - 16x16px (icĂŽne onglet petit)
  2. favicon-32x32.png - 32x32px (icĂŽne onglet normal)
  3. apple-touch-icon.png - 180x180px (icĂŽne iPhone/iPad)
  4. android-chrome-192x192.png - 192x192px (icĂŽne Android petit)
  5. android-chrome-512x512.png - 512x512px (icĂŽne Android grand)
  6. site.webmanifest - DĂ©jĂ  crĂ©Ă© ✅

Comment créer vos favicons ?

Option 1 : Utiliser un générateur en ligne (recommandé)

  1. Allez sur https://realfavicongenerator.net/
  2. Uploadez votre logo/symbole (idéalement 512x512px minimum)
  3. Personnalisez les couleurs si nécessaire :
    • Theme color : #8B3A3A (bordeaux)
    • Background color : #FAF8F5 (blanc cassĂ©)
  4. Téléchargez le pack complet
  5. Placez tous les fichiers dans /assets/images/favicon/

Option 2 : Créer manuellement avec un éditeur

  1. Créez une image carrée de votre logo (512x512px)
  2. Utilisez Photoshop/GIMP/Figma pour redimensionner aux différentes tailles
  3. Exportez en PNG avec transparence

Design recommandé pour votre favicon

Pour votre marque “SexualitĂ© Authentique”, voici quelques idĂ©es :

Option A : Initiales stylisées

  • Les lettres “S” et “A” entrelacĂ©es
  • Couleur : bordeaux (#8B3A3A) sur fond beige (#F5EBE0)

Option B : Symbole abstrait

  • Une forme organique rappelant la connexion/l’union
  • Couleurs terracotta et bordeaux

Option C : Simple et épuré

  • Un point/cercle bordeaux symbolisant le 100%
  • Sur fond transparent ou beige

Checklist

  • CrĂ©er ou commander un design de favicon
  • GĂ©nĂ©rer tous les formats avec realfavicongenerator.net
  • Placer les fichiers dans /assets/images/favicon/
  • Tester sur diffĂ©rents navigateurs (Chrome, Firefox, Safari)
  • VĂ©rifier que l’icĂŽne apparaĂźt bien dans l’onglet du navigateur

Note importante

Le fichier site.webmanifest est déjà configuré avec :

  • Nom : “SexualitĂ© Authentique”
  • Couleur thĂšme : bordeaux (#8B3A3A)
  • Fond : blanc cassĂ© (#FAF8F5)

Vous n’avez pas besoin de modifier ce fichier.

❓ Questions frĂ©quentes

Q : Puis-je utiliser d’autres formats que JPG ? R : Oui, PNG fonctionne aussi. WebP est idĂ©al (plus lĂ©ger) mais moins compatible.

Q : Mes photos sont trop lourdes (2-3 MB), que faire ? R : Utilisez TinyPNG.com ou Squoosh.app pour les compresser Ă  ~300 KB max.

Q : Je n’ai pas de photo professionnelle, que faire ? R : Demandez Ă  un ami photographe ou utilisez un smartphone avec bon Ă©clairage naturel. L’important est l’authenticitĂ©, pas la perfection technique.

Q : Dois-je mettre des images dans tous les articles de blog ? R : Non, ce n’est pas obligatoire. Vous pouvez commencer sans images dans les articles.

Besoin d’aide ? Contactez-moi ou consultez le fichier _data/photos.yml qui contient aussi le plan dĂ©taillĂ© des photos.

L'amour à 100% n'existe que dans l'authenticité à 100%

Une sĂ©ance de dĂ©couverte pour clarifier oĂč vous en ĂȘtes et voir si le passage Ă  100% est fait pour vous maintenant.

Profiter de notre séance diagnostic offerte