Optimisation d'image pour le référencement : ce qui déplace réellement les principaux éléments vitaux Web

La plus grande victoire de performances que j'aie jamais livrée sur le site de marketing de WP Adminify n'était pas un plugin de mise en cache ou un ajustement CDN. Il supprimait une image. Notre ancien héros était une capture d'écran de 2 400 px en PNG, que j'ai exportée à "qualification totale" parce que je croyais obstinément penchée. Ce fichier était de 1,4 Mo. Sur un Android de milieu de gamme sur la 4G, c'était le plus grand élément de peinture de contenu – et il faisait environ 4,1 secondes pour LCP. Je l'ai échangé contre un WebP de 84 ko à la largeur réelle de l'écran et le LCP a chuté sous 1,9 s le même après-midi. Pas de code. Juste une petite image.

C'est la chose frustrante à propos du référencement d'images. Ce n'est pas exotique. Les images sont généralement la chose la plus lourde de la page - souvent près de la moitié des octets totaux - et pourtant la plupart d'entre nous les traitons comme une réflexion après coup. Nous déposons une caméra-originale dans le CMS, tapons "capture d'écran" dans le champ Alt et passons à autre chose. Ensuite, nous nous demandons pourquoi le rapport de base sur les sites Web de la Search Console est en rouge sur mobile.

Ce guide est la liste de contrôle que j'ai réellement exécutée sur Toolz.dev et les sites clients, écrite du point de vue de quelqu'un qui expédie ce genre de choses. Je vais être honnête sur ce que font les outils gratuits et - tout aussi important - ce qu'ils ne font pas. Chaque outil d'image sur toolz.dev s'exécute entièrement dans votre navigateur sur un <canvas>, donc rien de ce que vous déposez n'est téléchargé n'importe où. Cela a de réelles conséquences sur votre flux de travail, certains bons, ennuyeux. Nous allons arriver aux deux.

tl;dr : Redimensionnez l'image à sa largeur d'affichage réelle, puis compressez, puis servez un format moderne. En pratique, ce sont trois passes : Redimensionnement d'images Pour couper les dimensions du pixel, Compresse d'images Pour appuyer sur les octets, et Convertisseur de format Pour obtenir WebP. width/height Attributs Pour arrêter le changement de mise en page, écrire un texte alternatif qu'un humain dirait à voix haute et paresseux, chargez tout ce qui se trouve sous le pli. Faites cela et votre LCP et CLS s'améliorent tous les deux - les deux principaux éléments vitaux Web axés sur l'image sur lesquels Google se classe.

Pourquoi les images sont-elles si importantes pour le référencement ?

Deux des trois principaux éléments vitaux Web sont des problèmes d'image déguisés. La plus grande peinture de contenu est, sur la plupart des pages de contenu, l'image du héros qui termine son téléchargement. Le décalage de mise en page cumulé est très souvent une image qui charge tard et pousse le texte sur une ligne. Les deux sont des entrées de classement confirmées, et les deux sont des éléments que vous corrigez mieux en gérant les images, et non en écrivant davantage de contenu.

Il y a un deuxième canal de trafic que les gens oublient : Google Images. Pour de nombreux sites de commerce électronique, de recettes, de voyages et de conception, la recherche d'images est une tranche significative de visites organiques, parfois un cinquième. Ce trafic dépend entièrement de choses qu'un crawler peut lire - le nom du fichier, le texte alternatif, la copie environnante et si l'image est encore suffisamment petite pour être indexée rapidement.

Et puis il y a le seul ennuyeux mais réel : la bande passante coûte de l'argent et de la patience. Une page qui délivre 3 Mo d'images fait rebondir les utilisateurs mobiles sur des connexions mesurées avant qu'ils ne voient votre titre. Les pages plus rapides permettent aux gens de garder les gens, et l'engagement, mais Google le mesure, ne fait pas de mal.

Quel format d'image devez-vous réellement utiliser ?

Le choix de format est l'endroit où la plupart des économies sont en cours de fonctionnement et les règles sont plus simples que les guerres de format qui les font entendre.

jpeg est pour les photographies - tout ce qui a des dégradés lisses et des milliers de couleurs. C'est avec une perte de perte, ce qui est exactement ce que vous voulez pour une photo. À la qualité 75–85, la compression est invisible pour une visionneuse normale et le fichier est une fraction de l'original. Ne l'utilisez pas pour quoi que ce soit avec des bords durs, du texte ou de la transparence.

png est sans perte. Utilisez-le pour les captures d'écran, les logos, les diagrammes et tout ce qui a des régions de couleur plate ou de la transparence. Le hic : pour une photographie, la PNG produit un fichier comiquement volumineux par rapport à JPEG. Mon erreur de héros de 1,4 Mo était exactement ceci - une capture d'écran photographique ish forcée en PNG.

Webp est le défaut pratique en 2026. Il fait à la fois des pertes et des pertes sans perte, prend en charge la transparence et l'animation et a généralement 25 à 34 % de moins que JPEG pour correspondre à la qualité. La prise en charge du navigateur est désormais universelle. C'est le format vers lequel je convertis presque tout.

avif Comprend encore plus fort – souvent plus petit que WebP – car il est basé sur le codec vidéo AV1. C'est un excellent format. Mais je dois être franc avec vous ici, car de nombreux guides (y compris le brouillon de cet article remplacé) vous disent de "sauter simplement convertir en AVIF" avec un outil en ligne, et ce n'est pas ainsi que fonctionne l'encodage de canevas de navigateur.

SVG est pour les vecteurs : icônes, logos, illustrations simples. Il évolue à l'infini et reste minuscule. C'est inutile pour les photos.

La mise en garde d'Avif que personne ne mentionne

Voici le peu honnête. toolz.dev's Convertisseur de format exportations PNG, JPEG ou WebP — et seulement ces trois-là. Il ne peut pas produire AVIF, et la plupart des convertisseurs intégrés ne le peuvent pas non plus. La raison est technique : l'outil dessine votre image sur un <canvas> et les appels canvas.toBlob('image/webp', quality). L'encodeur Canvas du navigateur est livré JPEG, PNG et WebP; il n'est pas livré d'un encodeur AVIF. Il n'y a donc aucun moyen de sortir un Avif d'une toile, point final.

tu peux encore alimenter Un fichier AVIF dans — Le navigateur décode joyeusement AVIF via new Image(), afin qu'un drop-in AVIF soit rendu sur une toile bien. Vous ne pouvez tout simplement pas en retirer un. C'est une asymétrie de décodage, d'encodage et de sortie, et cela fait trébucher constamment les gens.

Donc, mon conseil du monde réel : utilisez le convertisseur de format pour l'étape WebP, qui couvre 95 % de la victoire. Si vous voulez que AVIF soit au top, générez-le dans votre pipeline de construction avec sharp, avifenc, ou encodeur hors ligne de Squoosh - c'est là qu'avif appartient de toute façon, car son encodage est lent et vous ne voulez pas le faire à la main pour chaque image.

Comment compresser des images sans détruire la qualité ?

L'erreur que je vois le plus est de compresser la mauvaise chose dans le mauvais ordre. Comprimer une image de 4 000 px qui s'affiche à 800 px, c'est comme sceller sous vide une valise dont vous n'avez jamais eu besoin. Redimensionnez d'abord, compressez ensuite. Toujours.

Le workflow est donc : ouvert Redimensionnement d'images, définissez la largeur sur la plus grande taille sur laquelle l'image sera réellement rendue (vérifiez la mise en page - une image du corps du blog est souvent de 720 à 800 px, et non 1920). Le resizer s'intègre dans votre boîte cible et ne s'étire ni ne fait de recadrage, donc le rapport d'aspect est sûr. Prenez ensuite cette sortie dans Compresse d'images Et tirez la qualité jusqu'à ce que vous puissiez à peine le dire - généralement de 78 à 82 heures pour les photos. Aperçu à Zoom complet avant de valider ; les artefacts se cachent dans les dégradés et les tons de peau, et non dans la vignette.

Un chiffre à ancrer : Pour le contenu photographique, la qualité 80 est la réponse ennuyeuse et fiable. j'ai A/B'D 80 contre 90 sur des photos de produits réels et, à 100% de zoom sur un bon moniteur, la plupart des gens ne peuvent pas l'appeler. Mais 80 est souvent 40% plus petit. En dessous d'environ 60, vous commencez à voir des artefacts en blocs dans des zones lisses, donc c'est le plancher pour tout sauf une petite vignette.

Deux navigateurs qui vous confondent

Ces deux éléments me coûtent un temps de débogage réel, alors apprenez-les gratuitement.

PNG transparent → JPEG rend le fond noir, pas blanc. Une fois, j'ai converti un logo transparent en JPEG et les zones transparentes sont sorties en noir uni. J'ai supposé que l'outil était cassé et j'ai passé vingt minutes à le regarder. Ce n'est pas un bug, c'est la spécification HTML. Lorsque vous sérialisez une toile dans un format sans canal alpha (JPEG), les pixels transparents sont composés sur un noir solide. Si vous avez besoin de transparence, conservez la PNG ou utilisez WebP, qui prend en charge Alpha. Si vous voulez spécifiquement un fond blanc, placez en premier un calque blanc.

Chaque réencodage résout les métadonnées EXIF et GPS. Étant donné que ces outils redessinent l'image sur une nouvelle toile, la sortie n'a pas d'exif, aucune information de caméra, aucune coordonnées GPS intégrées. C'est une véritable victoire en matière de confidentialité - vous ne publiez pas accidentellement la latitude/la longitude que votre téléphone estampillée sur une photo. Mais c'est aussi un bon choix si vous vous appuyiez sur des profils de couleurs intégrés ou sur des métadonnées de droits d'auteur, mais aussi. Pour le référencement, cela n'a pas d'importance, mais sachez que cela se produit.

Comment fonctionnent les images réactives et srcset ?

Un téléphone affiche des images à peut-être 390px de large. L'expédition d'un fichier de 1920px gaspille la plupart des octets que vous venez de compresser soigneusement. srcset Corrige cela en remettant au navigateur un menu de tailles et en le laissant choisir.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Matte-black wireless headphones on a walnut desk"
  width="800" height="600" loading="lazy" />

Pour créer ces trois fichiers, exécutez la même source via Redimensionnement d'images à 400, 800 et 1 200 px, puis convertissez chacun en WebP. sizes L'attribut est la partie que les gens sautent, et le sautant tranquillement casse le tout - sans cela, le navigateur suppose que l'image remplit la fenêtre et attire le plus grand candidat. Dites-lui à quel point l'image est vraiment rendue et qu'elle télécharge la bonne.

Comment écrivez-vous du texte alternatif qui aide réellement ?

Alt Text est l'autre moitié de Image SEO et c'est la moitié des développeurs qui se précipitent. Il effectue trois travaux à la fois : c'est ce qu'un lecteur d'écran lit à haute voix à un utilisateur aveugle, c'est ainsi qu'un robot comprend ce que montre l'image et c'est le texte de repli si l'image ne se charge pas. Bien faire les choses, c'est surtout écrire comme une personne, pas comme un robot-mot-clé.

La règle que j'utilise : décrivez l'image de la manière dont vous la décririez à quelqu'un lors d'un appel téléphonique. Spécifique, naturel, court - sous environ 125 caractères, afin que les lecteurs d'écran ne le tronquent pas maladroitement. Sauter "image de" ou "photo de", parce que le lecteur d'écran annonce déjà qu'il s'agit d'une image; dirigeant avec ces pertes, l'auditeur. Et si votre mot-clé cible correspond vraiment à l'image, incluez-le une fois, naturellement. S'il ne vous va pas, laissez-le de côté - une photo d'un clavier n'a pas besoin d'"acheter des écouteurs sans fil bon marché" coincés dans son alt.

Quelques avant/après de vraies critiques que j'ai fait :

• alt="image" → alt="Matte-black wireless headphones on a walnut desk"
• alt="chart" → alt="Bar chart of monthly revenue rising from $10K in January to $45K in December"
• alt="best cheap headphones buy now free shipping sale" (mot-clé-bourré) → alt="Over-ear headphones with the carrying case open beside them"

Une nuance que les gens se trompent : les images purement décoratives - un diviseur, une fioriture de fond - devraient avoir un vidanger alt="", pas une description. Un alt vide indique au lecteur d'écran de le sauter entièrement, ce que vous voulez pour la décoration. Réservez le texte réel de l'alt pour les images qui transportent des informations.

Pendant que vous y êtes, nommez également le fichier descriptif. wireless-headphones-matte-black.webp battements IMG_4532.jpg Parce que les moteurs de recherche lisent le nom de fichier comme un signal, et les traits d'union (et non les traits de soulignement) sont le séparateur Google analyse au fur et à mesure que les mots se brisent.

Dans quelle mesure cela change-t-il réellement les principaux éléments vitaux ?

LCP (Plein de plus grand contenu) : Votre héros est généralement l'élément LCP. Servez-le aux bonnes dimensions, dans Webp, à une qualité de ~80, et - à un niveau critique - faites non paresseux-chargez-le. Lazy-loading Le héros au-dessus du pli est un moi-même classique, il retarde l'élément exact que LCP mesure. Si c'est le héros, <link rel="preload" as="image"> il à la place.

CLS (Shift de disposition cumulé) : Toujours mettre width et height sur le <img>. Ces deux attributs permettent au navigateur de réserver l'espace avant l'arrivée de l'image, de sorte que le texte ne saute pas lorsqu'il charge. C'est le correctif CLS le moins cher qui existe et je trouve toujours que des sites manquent.

INP (interaction avec la prochaine peinture) : Les images ne conduisent pas directement InP, mais une page étouffée sur 3 Mo d'images non optimisées est la faim du fil principal et le réseau de la capacité dont votre Javascript a besoin pour répondre. Des images plus légères, des interactions plus branlantes, indirectement.

Quelques choses que j'ai apprises de la manière agaçante

Audit avant de vous optimiser. Exécutez la page via Pagespeed Insights et corrigez d'abord le fichier le plus lourd, le délinquant de 1,2 Mo compte plus que de réduire de 4 Ko une icône. Nommer des fichiers comme un humain : wireless-headphones-matte-black.webp battements IMG_4532.jpg Dans la recherche d'images, car le robot d'exploration lit le nom de fichier comme un signal de contenu. Écrivez le texte alternatif que vous diriez en fait décrire la photo à quelqu'un au téléphone - spécifique, naturel, mot-clé-inclus Seulement là où il s'inscrit, jamais bourré de mots clés. Et n'oubliez pas votre image de partage de graphique ouvert, une image correctement dimensionnée 1 200 × 630 que vous avez créée. Redimensionnement d'images est ce qui apparaît dans les aperçus sociaux et, parfois, la recherche.

Questions fréquentes

L'optimisation des images affecte-t-elle vraiment le classement SEO ?

Oui, grâce à Core Web Vitals. LCP et CLS sont des signaux de classement Google confirmés, et les deux sont fortement pilotés par l'image. Les images optimisées améliorent généralement les scores de la vitesse de page mobiles par une marge notable et sur un mobile qui peut se traduire par le mouvement de classement. Il déverrouille également Google Images en tant que source de trafic distincte.

Puis-je convertir des images en Avif avec un outil en ligne gratuit ?

Habituellement non, et le convertisseur de format toolz.dev peut. Les convertisseurs intégrés à la navigation <canvas>, et le navigateur Canvas Encoder ne produit que JPEG, PNG et WebP - il n'y a pas de codeur AVIF disponible. Convertissez en ligne WebP pour la plupart des gains et générez des AVIF dans votre pipeline de construction avec des outils comme Sharp ou Avifen si vous en avez besoin.

Dois-je utiliser WebP ou AVIF en 2026 ?

Webp est le paramètre sécurisé par défaut et ce que j'ai en premier lieu - un support universel, des économies importantes et vous pouvez le faire dans le navigateur. Avif compresse encore plus fort et vaut la peine d'être ajouté pour les grandes images de héros et de galeries, mais générez-le au moment de la construction et servez-le via <picture> avec un repli WebP.

Dans quel paramètre de qualité dois-je compresser JPEG et WebP ?

La qualité 80 est la réponse fiable pour les photos. Il est généralement impossible de les distinguer de l'original lors de la visualisation normale tout en étant considérablement plus petit. Aperçu à 100 % de zoom avant de valider, car les artefacts apparaissent dans les dégradés et les tons de peau. En dessous de 60, la compression devient visible.

Pourquoi mon PNG transparent est-il devenu noir après la conversion en JPEG ?

Parce que JPEG n'a pas de canal alpha. La spécification de la toile HTML indique que les pixels transparents sont composés sur un noir solide lorsque vous sérialisez dans un format non alpha. C'est un comportement attendu, pas un bug. Conservez l'image en tant que PNG ou WebP pour préserver la transparence, ou composez-la sur un fond blanc d'abord si vous voulez du blanc.

Ces outils téléchargent-ils mes images sur un serveur ?

non . Les outils d'image sur Toolz.dev traitent tout localement sur un canevas de votre navigateur - le fichier ne quitte jamais votre appareil. Un effet secondaire qui mérite d'être connu : chaque ré-encodage des métadonnées exif et GPS, ce qui est bon pour la confidentialité, mais signifie que les données de caméra et les profils de couleur sont également supprimés.

Quelle est la taille de fichier idéale pour une image Web ?

Comme cible approximative : images de héros sous ~ 200 Ko, images dans le contenu sous ~ 100 Ko et vignettes inférieures à ~ 30 ko. Celles-ci sont très réalisables une fois que vous redimensionnez la largeur réelle de l'écran et desservez le WebP. Le nombre exact est moins important que l'habitude de redimensionner puis de compresser-puis-convertir.

Lecture et outils connexes :

• Compresse d'images — Coupez la taille du fichier après le redimensionnement
• Redimensionnement d'images — Créez des tailles de réactivité et des images sociales
• Convertisseur de format — Exporter PNG, JPEG ou WebP
• Le guide des outils d'image du développeur
• Compression d'image expliquée