Une image de site doit être utile, lisible et adaptée à son emplacement. Son poids n’est qu’une partie du sujet : le cadrage, les dimensions et le texte alternatif influencent aussi la qualité de la page.
Dans Phoenix, préparez les médias dans WordPress, puis vérifiez que le design exploite les informations natives au lieu de réduire chaque image à une URL.
Définir le rôle de l’image
Avant l’export, demandez-vous ce que la personne doit comprendre grâce au visuel. Une capture d’administration peut expliquer où modifier un bloc. Une photo peut présenter une personne. Une illustration abstraite peut simplement accompagner un titre.
Cette décision guide le texte alternatif. Une image informative reçoit une description adaptée à son rôle dans la page. Une illustration purement décorative peut avoir un attribut alt vide. L’attribut doit donc être présent, mais il n’a pas besoin d’être rempli dans tous les cas.
Évitez les expressions mécaniques comme « image de » lorsqu’elles n’apportent rien, et les accumulations de mots-clés sans rapport avec le contenu réel.
Séparer titre, légende et texte alternatif
WordPress propose plusieurs informations pour un média. Le titre sert à l’identifier dans la médiathèque. La légende peut être visible à côté de l’image. Le texte alternatif décrit sa fonction ou son information lorsque l’image n’est pas perçue.
Le helper Phoenix photo_title() observé dans les sources retourne le titre du média. Il ne lit pas automatiquement _wp_attachment_image_alt. Cette distinction est importante si vous voulez conserver une description rédigée dans la médiathèque.
Pour un rendu PHP, l’API native permet de garder les dimensions et les variantes d’image :
$attachment_id = get_post_thumbnail_id($post_id);
if ($attachment_id) {
echo wp_get_attachment_image($attachment_id, 'large', false, [
'class' => 'md-article-cover',
'decoding' => 'async',
]);
}
Vérifiez le HTML produit, notamment lorsque le texte alternatif du média est vide. Un remplacement automatique par le titre de la page peut être un repli pratique, mais ne garantit pas une description juste.
Préparer le bon format et le bon cadrage
Choisissez les dimensions à partir de l’usage réel. Une vignette de carte n’a pas besoin du même fichier qu’une image principale occupant une grande largeur. Conservez un original exploitable, puis servez une version adaptée.
Les formats modernes peuvent réduire le poids, mais comparez le résultat visuel et les capacités de votre chaîne WordPress. Une capture contenant du texte exige une lisibilité différente d’une photographie.
Pour un SVG décoratif livré avec le design, gardez un fichier connu et maîtrisé. Autoriser tous les téléversements SVG n’est pas nécessaire pour afficher une illustration locale du projet.
Préserver les dimensions dans le HTML
Les attributs width et height, ou un ratio cohérent, réservent de l’espace avant le chargement. Ils limitent les déplacements qui rendent une page désagréable à lire.
Évitez également d’étirer une image pour remplir une carte sans examiner le cadrage. object-fit: cover peut couper une information importante. Sur téléphone, un visage ou un libellé peut sortir du cadre alors qu’il était visible sur ordinateur.
Adapter le chargement à la place dans la page
Une image principale immédiatement visible ne devrait pas recevoir un chargement différé par habitude. Les visuels situés plus bas peuvent utiliser loading="lazy".
Le hero vidéo et photo doit être testé dans ses différents états. Une référence de média invalide ne doit pas laisser une image cassée ou une grande colonne vide.
Faire une vérification éditoriale
Relisez la page sans vous appuyer sur les images. Les informations essentielles doivent rester accessibles sous une forme pertinente. Pour une capture complexe, une explication dans le texte peut être plus utile qu’un attribut alternatif très long.
Contrôlez ensuite l’onglet Réseau : taille reçue, bonne variante et absence de fichier inutilement volumineux. Terminez par un essai sur téléphone avec une connexion moins rapide.
Ces décisions font partie de la recette d’accessibilité et des contrôles de performance. Une image réussie soutient le contenu sans rendre la page plus difficile à utiliser.
