H13 — Chapitre 8 - Images

Critère SEO H13 : Aspect ratio préservé — guide + exemple

PARTIE 1 - Fondamentaux Chapitre 8 - Images Mot-clé : aspect ratio préservé

Ce critère paraît “simple”, mais il crée beaucoup d’écarts en production.

Le critère **H13 — Aspect ratio préservé** fait partie de notre checklist SEO (335 critères). Ici, tu as une méthode **pratique** pour le vérifier et le corriger — avec un exemple concret.

Ce que couvre exactement ce critère

Le critère SEO H13 se focalise sur le respect de l'aspect ratio préservé des images intégrées dans une page web. Il s'agit d'éviter toute déformation visuelle en maintenant les proportions originales de largeur et hauteur lors de l'affichage. Ce critère fait partie du chapitre 8 - images, essentiel pour une optimisation on-page efficace et une meilleure expérience utilisateur.

Pourquoi c'est important (SEO + UX)

Conserver l'aspect ratio préservé évite les images déformées qui peuvent dégrader l'expérience utilisateur (UX) et augmenter le taux de rebond. Du point de vue SEO, Google valorise les pages bien structurées où les images sont correctement affichées, ce qui améliore la performance et la lisibilité du contenu. Ainsi, respecter le critère h13 contribue à un audit SEO positif.

Comment vérifier (pas à pas)

  1. Inspectez les images via l'outil de développement du navigateur (F12).
  2. Comparez les dimensions affichées avec les dimensions réelles des fichiers.
  3. Vérifiez que les attributs HTML width et height correspondent au ratio original.
  4. Utilisez des outils comme Lighthouse ou Screaming Frog pour détecter les images déformées.
  5. Complétez votre checklist images en notant les déformations éventuelles.

Comment corriger proprement

Pour corriger une image déformée, ajustez les attributs width et height en respectant le rapport largeur/hauteur original. Utilisez CSS pour contrôler la taille sans écraser l'aspect ratio (exemple : max-width: 100%; height: auto;). Privilégiez les formats d'images adaptés (WebP, JPEG optimisé) et redimensionnez les images avant l'importation pour éviter les déformations.

Exemple concret (illustratif)

Supposons une image originale de 800x600 px (aspect ratio 4:3). Si elle est affichée en 400x400 px sans ajustement, elle sera déformée. Le bon code HTML est :
```html
<img src="photo.jpg" width="400" height="300" alt="Exemple image respectant aspect ratio">
```
Ou avec CSS :
```css
img { max-width: 100%; height: auto; }
```

Checklist à cocher

  • [ ] Vérification de l'aspect ratio préservé pour chaque image
  • [ ] Pas d'attributs width/height déformant
  • [ ] Utilisation de CSS pour maintenir les proportions
  • [ ] Images redimensionnées avant import
  • [ ] Contrôle via outils d'audit SEO (Lighthouse, Screaming Frog)
  • [ ] Correction effective des images non conformes
FAQ

Questions fréquentes — H13

Quelle est l’erreur la plus fréquente sur “Aspect ratio préservé” ?

Corriger une page isolée sans corriger le template/import : l’erreur revient à la prochaine génération.

Quel outil est le plus rapide pour contrôler à l’échelle ?

Pour ce type de critère, un crawl (ex. Screaming Frog) + une vérification ciblée dans Squoosh est généralement le combo le plus rapide.

Comment éviter que ça se reproduise sur 10K pages générées ?

Figer une règle d’auto‑génération (title/structure/schema/URLs) + ajouter un contrôle automatique (crawl ou test) avant import en production.

Prêt à passer de la théorie à l'action ?

Validez ce critère avec un audit, puis approfondissez la méthode dans l'Academy.

Auditer avec l'outil → Apprendre dans l'Academy →