Des images bien préparées rendent votre site plus rapide, plus beau et mieux référencé sur Google. Voici les bonnes pratiques à suivre avant d’ajouter vos photos dans les pages de votre site SWING.
1. Choisir le bon format de photo
Selon le type d’image que vous souhaitez publier, il existe plusieurs formats possibles :
| Format | Quand l’utiliser | Particularité |
|---|---|---|
| JPG | Pour les photos classiques (paysages, personnes, bâtiments...) | Idéal pour les images riches en couleurs |
| PNG | Pour les logos ou images avec fond transparent | Qualité élevée mais fichiers plus lourds |
| WEBP | Format moderne utilisé sur les navigateurs récents (incompatible avec anciens navigateurs) | Très bon rapport qualité / taille |
| SVG | Pour les icônes vectorielles simples | Ne pas utiliser pour les photos |
2. Respecter les proportions des photos
Pour garder un affichage régulier et esthétique, conservez des proportions similaires (format horizontal ou carré) entre les photos d’une même série.
Toutes les images ont un format horizontal identique, par exemple
4:3 ou 16:9. Le haut et le bas des photos s’alignent parfaitement dans les colonnes.Mélanger des formats verticaux et horizontaux dans la même ligne. Les blocs deviennent irréguliers et la mise en page se décale.
Quelques repères simples
- Format horizontal (paysage) — idéal pour les bannières et les photos d’ambiance.
- Format vertical (portrait) — à réserver pour des mises en avant isolées (ex. : portrait d’équipe).
- Format carré — pratique pour les grilles de produits ou les galeries uniformes.
3. Adapter la taille de vos images
Une photo trop grande ralentit le site. Voici les dimensions conseillées selon l’usage :
| Usage | Largeur conseillée | Poids cible |
|---|---|---|
| Illustration dans un article | ≈ 1200 px | ≤ 200 Ko |
| Image d’en-tête ou bannière panoramique | 2000 à 2400 px | ≤ 250 Ko |
| Miniature ou aperçu | 600 à 800 px | ≤ 100 Ko |
| Logo ou pictogramme | 200 à 400 px | ≤ 100 Ko |
4. Compresser vos photos
Une photo compressée se charge plus vite tout en restant nette. Voici comment faire pour optimiser votre jpg :
- ✅ Notre astuce maison, utilisez NanoJPG ( ~44€ sur site fotomojo.fr ).
- Glissez votre photo jpg dans la zone prévue.
- Choisissez la dimension du grand côté selon les tailles conseillée ci-dessus
- Téléchargez la version compressée sur votre ordinateur.
5. Garder la qualité lors du transfert
Certaines applications réduisent automatiquement la qualité des images envoyées.
Évitez
- WhatsApp, Messenger, Facebook
- Captures d’écran au lieu de la photo originale
Préférez
- AirDrop (transfert direct sans perte)
- Cloud : Google Drive, Dropbox, iCloud…
- Email en choisissant “Image originale”
6. Donner un bon nom à vos fichiers
Le nom du fichier aide Google à comprendre le sujet de la photo. Utilisez des mots-clés simples et sans accent :
toiture-tavillons-gruyere.jpgatelier-tavillonneur-epicea.jpgIMG_1234.jpgphoto finale 2.JPG- Séparez les mots par des tirets (
-). - Utilisez des mots descriptifs (activité, lieu, matière...).
- Évitez les accents et caractères spéciaux (oui, les éspaces génèrent des %20).
Bonnes pratiques pour nommer vos images
Le nom du fichier aide Google à comprendre le contenu de votre photo. Il contribue directement au bon référencement de votre page. Voici quelques règles simples pour bien les nommer :
- Renommez vos images avant de les importer sur le site.
- Utilisez des mots-clés clairs et descriptifs correspondant à votre activité.
- Variez les expressions : mots-clés principaux, secondaires, et questions possibles.
- Ajoutez si possible 1 ou 2 variantes géographiques (ville, canton, région).
- Évitez les espaces, accents et caractères spéciaux → utilisez des tirets (
-). - Ne surchargez pas le nom du fichier : 4 à 6 mots suffisent.
- Renseignez aussi le texte alternatif (Alt) en reprenant le sens du nom de l’image.
comment-renover-sa-cuisine-avec-papier-autocollant-meubles-coverstyl-valais.jpg
- 🟥 Mots-clés principaux : comment, rénover, cuisine
- 🟦 Mots-clés secondaires : papier autocollant, meubles
- 🟩 Variante géographique : Valais
- 🟨 Marque ou terme spécifique : Coverstyl
7. Ranger les images dans la bonne section
Pour rester organisé, classez vos fichiers dans des dossiers logiques selon le principe ci-dessous :
/home/
├── logos/
├── actualites/
├── pages/
│ ├── accueil/
│ ├── prestations/
│ └── realisations/
└── produits/8. Ajouter une description à vos images
Quand vous insérez une image, remplissez toujours deux champs importants :
- Titre : pour vous repérer dans votre bibliothèque d’images.
- Texte alternatif (Alt) : courte description du contenu de l’image, utile pour Google et les visiteurs malvoyants.
Artisan posant des tavillons en épicéa à Gruyère
image1 ou photo couverture
9. Vérifier avant publication
- Regardez le rendu sur ordinateur, tablette et téléphone.
- Assurez-vous que la photo reste nette et bien cadrée.
- Vérifiez que les pages se chargent rapidement.
- Évitez un texte clair sur un fond clair (manque de contraste).
10. En résumé
- ✔️ Image redimensionnée
- ✔️ Poids inférieur à 250 Ko
- ✔️ Compression réalisée avec NanoJPG
- ✔️ Nom de fichier clair et sans accent
- ✔️ Titre et texte alternatif remplis
- ✔️ Fichier bien rangé
- ✔️ Vérification multi-écrans effectuée
11. Ne pas renommer ni déplacer les images déjà utilisées
Une fois qu’une photo a été importée dans le site et placée dans une page, il ne faut plus changer son nom ni son emplacement dans la bibliothèque d’images.
Choisissez le bon nom de fichier avant de téléverser la photo.
Si vous devez remplacer une image, utilisez le même nom et le même dossier pour que le lien reste valide.
- Renommer le fichier après l’avoir inséré dans une page.
- Déplacer l’image dans un autre dossier.
- Supprimer une image encore utilisée sur le site.
Chaque image insérée dans une page est reliée à un chemin précis (ex. : /images/pages/accueil/photo-artisan.jpg). Si le fichier est renommé ou déplacé, le site ne le retrouve plus, et la photo disparaît de la page.
