La plus grande victoire de performance que j'ai jamais livrée sur WP Adminify' ; le site marketing était ' ; un plugin de mise en cache ou un tweak CDN. Il supprimait une image. Notre ancien héros était une capture d'écran PNG 2 400 px I' ; exportée sur " ; full quality" ; parce que je croyais obstinément que PNG signifiait net. Ce fichier mesurait 1,4 Mo. Sur un Android de milieu de gamme sur 4 G, c'était le plus grand élément Contentful Paint - et cela faisait glisser LCP à environ 4,1 secondes. Je l'ai échangé contre 8 Ko Webp à la largeur d'affichage réelle et LCP est tombé sous les 1,9 s le même après-midi Pas de code Juste une image plus petite.
That' ; est la chose frustrante à propos du référencement d'images. It' ;s pas exotique Les images sont généralement la chose la plus lourde sur la page - souvent près de la moitié du total des octets - et pourtant la plupart d'entre nous les traitons après coup Nous déposons un appareil photo-original dans le CMS, tapez " ; capture d'écran" ; dans le champ alt, et passons à autre chose Ensuite nous nous demandons pourquoi le Noyau Web Vitals signaler dans Search Console saigne en rouge sur mobile.
Ce guide est la liste de contrôle que j'exécute réellement sur les sites Toolz.dev et clients, rédigée du point de vue de quelqu'un qui expédie ces trucs. I' ; sera honnête sur ce que font les outils gratuits et - tout aussi important - ce qu'ils font' ; t. 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/heightattributs pour arrêter le changement de disposition, écrire du texte alternatif qu'un humain dirait à haute voix et charger paresseusement tout ce qui se trouve sous le pli. Faites cela et votre LCP et CLS s'améliorent tous les deux - les deux Core Web Vitals pilotés par l'image sur lesquels Google se classe réellement.
Pourquoi les images sont-elles si importantes pour le référencement ?
Deux des trois Core Web Vitals 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 de héros terminant son téléchargement Le décalage de mise en page cumulatif est très souvent une image se chargeant tard et bousculant le texte sur une ligne Les deux sont des entrées de classement confirmées, et les deux sont des choses que vous corrigez en gérant mieux les images - pas en écrivant plus de contenu.
Là' ; est un deuxième canal de trafic que les gens oublient : Google Images Pour beaucoup de 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. Que le trafic dépend entièrement des choses qu'un robot d'exploration peut lire - le nom du fichier, le texte alternatif, la copie environnante et si l'image est même 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 It' ; s avec perte, ce qui est exactement ce que vous voulez pour une photo À la qualité 758 la compression est invisible pour un spectateur normal et le fichier est une fraction de l'original Don' ; ne l'utilisez pour rien 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 plates ou la transparence Le catch : pour une photographie, PNG produit un fichier comiquement grand par rapport à JPEG Mon erreur de héros de 1,4 Mo était exactement cela - une capture d'écran de type photographique 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 compresse encore plus fort - souvent significativement plus petit que WebP - parce que it' ; s construit sur le codec vidéo AV1. It' ; est un excellent format Mais je dois être direct avec vous ici, parce que beaucoup de guides (y compris le projet de cet article remplacé) vous disent de " ; juste convertir en AVIF" ; avec un outil en ligne, et que' ; sn'est pas comment 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 peut et n°39 ; t sortir AVIF, et la plupart des convertisseurs dans le navigateur 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 AVIF joyeusement 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 Squoosh' ;s encodeur hors ligne - that' ;s où AVIF appartient de toute façon, parce que son encodage est lent et que vous ne voulez pas le faire à la main pour chaque image ».
| format | le mieux pour | lâche? | Toolz.dev Converter peut-il le produire ? |
|---|---|---|---|
| jpeg | photos | oui | oui |
| png | Captures d'écran, logos, transparence | non | oui |
| Webp | Presque tout sur le Web | l'un et | oui |
| avif | Compression maximale sur les images lourdes | oui | Non - utilisez un outil de construction |
| SVG | Icônes, logos, art vectoriel | N/A | Non (vecteur, pas toile) |
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(cochez votre mise en page - une image de corps de blog est souvent de 720 px, pas de 1920).Le redimensionneur s'adapte à l'intérieur de votre boîte cible et ne s'étire jamais et ne recadre jamais, donc le rapport hauteur/largeur est sûr. Ensuite, prenez cette sortie Compresse d'images et abaissez la qualité jusqu'à ce que vous puissiez à peine le dire - généralement 78 qualité8 pour les photos. Zoom avant de vous engager ; les artefacts se cachent dans les dégradés et les tons de peau, pas 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 It' ; n'est pas un bug - it' ; est la spécification HTML. Lorsque vous sérialisez un canevas dans un format sans canal alpha (JPEG), les pixels transparents sont composés sur du noir uni Si vous avez besoin de transparence, gardez PNG ou utilisez WebP, qui prend en charge alpha. Si vous voulez spécifiquement un fond blanc, posez d'abord une couche blanche.
Chaque réencodage résout les métadonnées EXIF et GPS. Parce que ces outils redessinent l'image sur une toile fraîche, la sortie n'a pas d'EXIF, pas d'info caméra, pas de coordonnées GPS intégrées That' ; est une véritable victoire en matière de confidentialité - vous' ; ne publiez pas accidentellement la latitude/longitude que votre téléphone a estampillée sur une photo. Mais c'est & #39 ; c'est aussi un gotcha si vous vous fiez à des profils de couleurs intégrés ou à des métadonnées de droits d'auteur ; c'est aussi le cas Pour le référencement, c'est le cas et le numéro 39 ; 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 attribut est la partie que les gens sautent, et le sauter brise tranquillement le tout - sans cela, le navigateur suppose que l'image remplit la fenêtre d'affichage et attrape le plus gros candidat Dis-lui à quelle largeur l'image se rend vraiment et il télécharge le bon.
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 façon dont vous et n°39 ; le décrivez à quelqu'un lors d'un appel téléphonique Spécifique, naturel, court - sous environ 125 caractères donc les lecteurs d'écran don&n°39 ; t la tronquent maladroitement Sauter " ; image de" ; ou " ; photo de," ; parce que le lecteur d'écran annonce déjà qu'il et n°39 ; c'est une image ; conduisant avec ces déchets l'auditeur&n°39 ; c'est l'heure de l'auditeur&n°39 ; sans fil pas besoin.
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 - une cloison, un fond fleurissent - 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, à la qualité ~80, et - de manière critique - faites-le 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 d'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 raser 4 Ko d'une icône Fichiers de noms comme un humain : wireless-headphones-matte-black.webp battements IMG_4532.jpg dans la recherche d'image parce que le robot d'exploration lit le nom de fichier comme signal de contenu. Écrivez du texte alternatif vous' ; je dirais en fait de décrire la photo à quelqu'un au téléphone - spécifique, naturel, mot-cléinclus seulement là où il convient, jamais bourré de mots clés. Et don' ; n'oubliez pas votre ouvrir le graphique partager l'image ; un 1200×630 correctement dimensionné que vous avez fait en 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 & #39 ; l'encodeur de canevas ne génère que JPEG, PNG et WebP - là et #39 ; aucun encodeur AVIF n'est disponible. Convertissez-vous en WebP en ligne pendant la majeure partie de la victoire et générez AVIF dans votre pipeline de construction avec des outils comme Sharp ou Avifenc si vous en avez besoin. ».
Dois-je utiliser WebP ou AVIF en 2026 ?
WebP est la valeur par défaut sûre et ce que j'atteins pour la première - support universel, grosses économies, et vous pouvez le faire dans le navigateur AVIF compresse encore plus fort et vaut la peine d'ajouter pour les grandes images de héros et de galerie, 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 supprime les métadonnées EXIF et GPS, ce qui est bon pour la confidentialité mais signifie que les données de caméra intégrées et les profils de couleurs 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 redimensionnement
- Redimensionnement d'images- faites des tailles réactives et des images sociales
- Convertisseur de format- exportez PNG, JPEG ou WebP
- Le guide des outils d'image du développeur
- Compression d'image expliquée
