Commencer par le rôle de l’image
Repérez si l’image est une photographie, une capture avec du texte, un schéma ou une décoration. Vérifiez aussi son emplacement : visuel principal visible immédiatement, image au milieu d’un article ou vignette de catalogue. Ces usages n’ont pas les mêmes contraintes de détail, de cadrage et de chargement.
Une image optimisée doit rester utile : un produit lisible, un plan compréhensible, une réalisation dont on voit les détails. Réduire le poids sans vérifier le rendu peut enlever précisément l’information recherchée. La bonne méthode consiste à partir de l’emplacement, préparer plusieurs variantes et contrôler le fichier réellement téléchargé par le navigateur.
Gardez un original de qualité hors du circuit de compression. Vérifiez les droits, la source et le crédit à conserver. Pour une page de réalisation, préférez une vue qui montre le travail présenté ; une photo décorative ne remplace pas la preuve. Ce choix accompagne la préparation des contenus et médias d’une page web.
Dimensionner en pixels selon l’affichage
Mesurez la largeur occupée par l’image dans la page, puis prévoyez les variantes nécessaires selon les écrans et leur densité. Les dimensions ci-dessous illustrent des emplacements possibles et des variantes pour une densité double ; adaptez-les au gabarit réel, sans agrandir un original trop petit.
| Usage | Taille | Contrôle |
|---|---|---|
| Vignette de catalogue | Exemple : 320 pixels CSS de large ; variante de 640 pixels. | Sujet identifiable au petit format et absence de téléchargement de l’original. |
| Photo dans un article | Exemple : colonne de 720 pixels CSS ; variante de 1440 pixels. | Détails utiles lisibles et ressource adaptée à la largeur de colonne. |
| Visuel pleine largeur | Exemple : 1200 pixels CSS sur ordinateur ; variante de 2400 pixels. | Cadrage mobile pertinent, netteté et chargement du visuel principal. |
| Capture ou schéma | Largeur déterminée par la taille des textes ; prévoir un agrandissement si nécessaire. | Lettres et légendes lisibles à l’affichage, sans halos de compression. |
La valeur dpi utilisée pour l’impression ne fixe pas à elle seule la qualité affichée sur le web. Ce sont notamment les dimensions en pixels, l’encodage et les conditions d’affichage qu’il faut examiner. Ne rééchantillonnez pas une petite image vers une grande taille en espérant récupérer du détail absent.
Testez le cadrage sur mobile : une machine ou un bâtiment peut sortir du champ si le conteneur recadre l’image. La solution peut être un autre cadrage, pas une compression supplémentaire. Une révision des interfaces et des parcours doit tenir compte de cette lecture réelle.
Comparer les formats sur le même contenu
Pour une photographie, comparez JPEG, WebP et AVIF lorsque votre chaîne de publication les accepte. Pour une capture comportant de petites lettres ou des aplats, examinez particulièrement les contours et le texte : un encodage efficace sur une photo peut rendre une interface illisible. PNG peut rester pertinent selon le contenu et les contraintes de transparence ou de fidélité.
Exportez des candidats depuis le même original. Comparez-les à leur taille d’affichage, puis agrandissez les zones sensibles pour repérer les défauts : halos, dégradés abîmés, lettres brouillées. Choisissez le fichier le plus léger parmi ceux qui conservent l’information nécessaire. Il n’existe pas de plafond de poids valable pour toutes les images.
WordPress prend en charge AVIF depuis la version 6.5 si l’environnement serveur peut le traiter. Cela ne signifie pas que vos JPEG seront convertis automatiquement. Essayez un fichier dans la médiathèque, vérifiez la génération des variantes et ouvrez les images produites avant de lancer un traitement de lot.
Vérifier les variantes produites par WordPress
Après import, choisissez une taille adaptée dans le bloc ou le widget plutôt que l’original par habitude. Inspectez le HTML : srcset propose des fichiers de différentes largeurs et sizes décrit la place attendue dans la mise en page. Le navigateur utilise ces informations avec les caractéristiques de l’écran pour sélectionner une ressource.
Ne supposez pas que chaque image placée en arrière-plan bénéficie du même mécanisme qu’une image de contenu. Contrôlez la sortie réelle du thème ou du constructeur. Évitez aussi d’activer plusieurs outils qui réécrivent simultanément les mêmes fichiers et attributs : identifiez lequel gère la conversion et lequel assure la distribution.
Distinguer l’image principale des images différées
Une image visible dès l’ouverture de la page ne doit pas être retardée par une règle générale de chargement différé. Repérez d’abord l’élément qui compte pour l’affichage principal. Pour les images situées plus bas, loading="lazy" peut différer le téléchargement. Des dimensions HTML cohérentes aident le navigateur à réserver la place.
Si vous envisagez fetchpriority="high", réservez-le au visuel principal identifié et vérifiez son effet ; le multiplier ne crée pas de bande passante. Le diagnostic de vitesse d’un site web permet de distinguer un fichier trop lourd d’une découverte tardive ou d’un problème serveur.
Écrire une alternative adaptée au contexte
L’attribut alt décrit l’information utile apportée par une image informative. Pour une image purement décorative, une alternative vide évite une annonce sans intérêt. Si l’image constitue un lien, son alternative doit aider à comprendre sa destination. N’ajoutez pas une liste de mots-clés ou le nom du fichier comme description automatique.
Un schéma complexe peut demander une explication textuelle à proximité. Une légende sert à donner un contexte visible, une date ou un crédit ; elle ne remplit pas exactement le même rôle que l’alternative. Ces décisions s’intègrent à une rédaction utile pour le référencement.
Checklist de validation avant traitement en série
- Ouvrir une page représentative sur mobile et ordinateur, avec les caches du navigateur neutralisés pour l’essai.
- Dans l’onglet Réseau, relever le fichier image réellement reçu, ses dimensions et son poids transféré.
- Appliquer les contrôles du tableau à l’usage concerné, puis vérifier la stabilité de la mise en page et le chargement des images plus basses.
- Comparer avant et après dans les mêmes conditions ; conserver les originaux et une possibilité de retour.
Si le navigateur télécharge encore l’original sur une petite vignette, corrigez la sélection des tailles avant de recompresser toute la bibliothèque. Une intervention de maintenance orientée vitesse doit pouvoir montrer ce qui a changé, sans promettre un gain identique sur toutes les pages.
Sources officielles
Documentation consultée le 19 octobre 2026.