Optimisation des images du site web

L'optimisation des images est l'un des aspects les plus “gratifiants” des performances de WordPress : pour une même structure de page et un même thème, si la taille, les dimensions, le formatage et la livraison des images sont corrects, le chargement s'améliorera immédiatement.

Mais l'optimisation des images est aussi le moyen le plus facile de semer la pagaille, non pas parce que c'est techniquement trop difficile, mais parce que l'information est trop fragmentée :
Vous avez lu quelques articles et vous savez qu’il faut “ compresser ”, utiliser “ WebP/AVIF ” et le “ chargement paresseux ”. Puis, en regardant la présentation des extensions, vous voyez aussi “ 100 crédits gratuits par mois ”, “ 20MB gratuit ” et “ 1 crédit par image ”. Plus vous lisez, plus c’est confus — au final, est-ce que le gratuit suffit ou non? Comment les frais sont-ils calculés? Est-ce que vous avez mal compris “ une même chose ”? Et surtout, le plus important :L'effet s'est-il réellement fait sentir après que vous l'ayez fait ou non ?

Cet article ne fait que trois choses :

1. Vous donner un exécutablefeuille de route (également fig.)(Ce qu'il faut faire en premier, ce qu'il faut faire en second)
2. Soyez clair quant à l'option choisie (quelle est la différence entre gratuit et payant et à qui convient-elle).
3. Écrire à l'avance les pièges les plus courants (afin de ne pas avoir à chercher à résoudre les problèmes lorsque vous aurez terminé).

1. le bilan : ce que WordPress offre et ce qu'il n'offre pas

Si vous ne comprenez pas d'abord ce que le noyau de WordPress fait déjà, il est facile de faire l'une des deux choses suivantes :

• Au lieu d'utiliser la “capacité gratuite” dont vous devriez profiter, vous dépensez du temps et de l'argent pour construire la roue encore et encore.
• Je pensais que WordPress “convertirait automatiquement toutes les vieilles images en WebP/AVIF”, mais il s'avère que ce n'est pas le cas !

Le noyau de WordPress intègre ces fonctionnalités clés :

• Images réactives (srcset/sizes)Depuis WordPress 4.4, le noyau produira des images pour la rubrique srcset 与 sizeset utilise les images de taille multiple générées lors du téléchargement pour permettre au navigateur de choisir une ressource plus appropriée à charger en fonction des conditions de l'écran.
• Chargement paresseux natifWordPress 5.5 et plus : WordPress 5.5 et plus permet le chargement paresseux des images par défaut, en utilisant les standards HTML. loading la mise en œuvre de l'attribut.
• Prise en charge du téléchargement de WebPDepuis WordPress 5.8, vous pouvez télécharger et utiliser WebP comme JPEG/PNG (à condition que votre environnement d'hébergement supporte WebP).
• Prise en charge du téléchargement d'AVIFDepuis WordPress 6.5, vous pouvez télécharger et utiliser AVIF comme JPEG/PNG (cela dépend aussi de l'hébergement).

Mais attention :
“Soutien au téléchargement/à l'utilisation” ≠ “Conversion automatique/délivrance automatique”.
En d'autres termes : même si vous êtes déjà sous WP 6.5, ces JPG/PNG dans votre bibliothèque de médias ne se transformeront pas en WebP/AVIF d'eux-mêmes ; vous n'obtiendrez pas automatiquement le lien “output AVIF/WebP according to the browser's capabilities and fallback to the original image for unsupported browsers” (sortie AVIF/WebP en fonction des capacités du navigateur et retour à l'image originale pour les navigateurs non supportés) ! --Cette partie doit généralement être corrigée par un plugin ou un service.

2. feuille de route : l'optimisation de l'image en 5 étapes

Ce qu'il faut faire, pourquoi, ce qu'il faut faire pour se qualifier et ce qu'est une fosse typique.

2.1 Commencer par déterminer la bonne “taille” (la plus négligée, mais la plus gratifiante)

De nombreuses stations sont lentes, non pas parce que la compression n'est pas effectuée, mais parce que le système est trop lent.Téléchargement d'une image de grande taille dépassant largement la zone d'affichage：
Par exemple, si la page ne fait en réalité que 900 px de large et que vous demandez au visiteur de télécharger l'image originale de 3 000 px, le navigateur se contente de la “télécharger puis de la rétrécir”. Cela gaspille la bande passante, augmente le temps de décodage et ralentit le premier écran.

WordPress 4.4+Mécanisme d'image réactif（srcset/sizes) est conçu pour répondre à cette question.

Faire ce qui est considéré comme une passe :

• Lorsqu'une page est ouverte sur un téléphone portable, la taille de l'image téléchargée doit être nettement plus petite que sur un ordinateur de bureau.
• La même image se charge avec différentes tailles de ressources sur différents appareils (au lieu de toujours télécharger l'image originale).

Les pièges les plus courants :

• Certains thèmes/constructeurs traitent les diagrammes comme des images d'arrière-plan CSS, ou les affichent d'une manière personnalisée qui peut contourner la fonction srcsetIl en résulte une grande image de la
• Vous utilisez des lits d'images liés de manière externe, des blocs d'images de tiers, et vous pouvez également contourner le système de taille multiple généré par la médiathèque.

---

2.2 Compression (réduire le nombre de Ko, mais ne pas “écraser” la qualité)

Le principe de la compression n'est pas “plus c'est petit, mieux c'est”, mais “la différence est à peine visible à l'œil nu, mais la baisse de volume est évidente”.

Les règles sont les suivantes :

• Photographies/prises de vue réelles (personnes, produits, paysages)Compression à perte prioritaire (gain maximal)
• Captures d'écran de l'interface / images à forte teneur en texteLa compression devrait être plus conservatrice afin d'éviter les textes flous.
• Logo/IcôneLes documents suivants sont disponibles : SVG prioritaire ou discret sans perte (les documents avec perte sont faciles à coller sur les bords).

Faire ce qui est considéré comme une passe :

• Réduction significative de la taille des images sur la plupart des pages
• Pas de bruit visible, de bords flous, de ruptures de blocs de couleur, de texte flou

---

2.3 WebP / AVIF (stratégie de format : plus petit pour une définition égale)

WordPress prend déjà en charge le téléchargement WebP (5.8) vs. AVIF (6.5)。
Mais pour que le format “nouvelle génération” fonctionne vraiment, il faut généralement résoudre deux problèmes :

1. Comment convertir par lots des médiathèques historiques(Sinon, vous n'optimisez que pour les “nouvelles images téléchargées ultérieurement”).
2. Générer une copie ou remplacer l'image originale(Il s'agit d'une ligne de partage des eaux risquée ; nous nous concentrerons plus tard sur les fonctions “Remplacer et supprimer l'image d'origine” de Plus WebP).

Style d'écriture recommandé :

• WebP : généralement préféré par défaut (compatibilité plus stable)
• AVIF : une nouvelle orientation de la compression, adaptée aux images de grande taille/aux images de premier écran/aux images d'album (mais plus deDépendance à l'égard de l'environnement）

---

2.4 Le chargement paresseux doit être utilisé correctement (il ne s'agit pas d'une solution unique)

WordPress 5.5 et plusChargement paresseux par défautImage.
Il réduit l'utilisation de la bande passante lors du rendu initial :

• Chargement paresseux pour les “ressources hors écran”
• La grande image la plus critique du premier écran (et dans de nombreux cas l'image clé du premier écran) est souvent inadaptée au chargement différé.

---

2,5 Couche de livraison : CDN / Image CDN

La compression, le dimensionnement et le formatage permettent de résoudre le problème des “petits fichiers qui tiennent”.
Mais si les images sont toujours récupérées à distance depuis le site source, la latence réseau aura quand même un impact notable sur l’expérience. Il faut alors une solution de couche de diffusion (CDN/image CDN).

Deux directions typiques :

• Polissage Cloudflare：Documentation CloudflareLes méthodes de compression polonaises (sans perte/avec perte/WebP) sont présentées, et il est mentionné que la compression avec le format format=auto Le format WebP/AVIF est autorisé.
• Accélérateur de site Jetpack：Documentation JetpackExpliquez-lui qu'il optimisera les images et les distribuera sur son réseau avec les ressources statiques.

L'optimisation des images est responsable de la réduction de leur taille et de leur pertinence.CDN responsable d’une livraison plus proche et plus fiable

3. sélection : deux routes principales seulement

L'échec le plus fréquent en matière d'optimisation d'images n'est pas l'absence de plugins, mais un trop grand nombre de plugins entraînant un traitement en double :
A compresse, B compresse, A convertit en WebP/AVIF, B convertit, A change d'URL, B réécrit - on ne sait même pas ce qui se passe dans la station.

Règles :

Il n'y a qu'une seule voie à suivre : soit une compression locale entièrement gratuite, soit une compression des trois dans le nuage.

• Itinéraire A (tous les trajets locaux gratuits) :Plus WebP ou AVIF + EWWW Image Optimizer(ou un seul)
• Itinéraire B (triple option de compression du nuage) :ShortPixel / Imagify / TinyPNG

---

3.1 Itinéraire A : Local entièrement gratuit (plus WebP ou AVIF ou EWWW)

Cet itinéraire se caractérise par

• Vous ne dépendez pas de services de compression tiers “par mois/par feuille” (bien que certaines fonctions puissent être proposées en tant que services optionnels).
• Le coût est le suivant : le traitement par lots peut solliciter davantage le serveur CPU/IO, ce qui exige plus d’attention à la stratégie et aux risques“

3.1.1 Plus WebP ou AVIF: le cœur du système est “générer/remplacer”, il ne s'agit pas d'un “outil de compression” traditionnel.”

• Lors de la génération d'images en plein volume :L'ID du fichier image original est remplacé par WebP/AVIF, le fichier original est supprimé et l'URL dans le contenu est remplacée.。
• Le plugin fournit des commandes WP-CLI et rappelle : WP-CLI est plus fiable lorsqu'il y a beaucoup de fichiers.

Cela signifie qu'au lieu de “générer tranquillement un WebP pour vous”, il pourrait s'agir d'unMigration des actifs(Surtout si vous activez l'option “Remplacer et supprimer l'image originale”).

Différences entre les deux modèles

Mode 1 : Conserver l'image originale + générer une copie WebP/AVIF (plus stable)

• Avantages : plus facile de se replier en cas de problèmes de compatibilité
• Coût : L'utilisation du disque augmentera (image originale + nouveau format + vignettes de taille multiple).

Mode 2 : Remplacer et supprimer l'image originale (plus agressif)

• Avantages : les disques ne s'étendent pas aussi rapidement ; les références des stations passent directement au nouveau format.
• Risque : vous “changez les actifs + changez les références”, ce qui rend plus coûteux le dépannage des problèmes de compatibilité (en particulier si certains systèmes externes ou logiques de thème dépendent du nom de fichier/chemin/format d'origine).

Pièges typiques de Plus WebP ou AVIF

1. Après avoir remplacé toute la bibliothèque, certaines images de pages s'affichent de manière anormale.
   La raison n'est généralement pas que l'image est “cassée”, mais qu'un maillon de la chaîne de substitution d'URL, de mise en cache, de politique de vignettes, etc. n'est pas correct.
2. Plus le nombre de vignettes est élevé, plus la portée du changement est importante.
   Le téléchargement d'une image par WordPress génère plusieurs tailles ; les thèmes/plugins peuvent également ajouter d'autres tailles. Le remplacement complet signifie que vous risquez de modifier un très grand nombre de fichiers.
3. Le fait d'effectuer une migration de format ne signifie pas nécessairement que le volume est toujours le plus petit
   WebP/AVIF sont généralement plus petits, mais la “stratégie de taille” et la “stratégie de compression” restent essentielles. Ne considérez pas Plus WebP comme “un clic plus rapide”.

---

3.1.2 Optimiseur d'images EWWW: représentatif de la compression locale libre

La page du plugin EWWW est très bien positionnée :

• Il peut être optimisé sur votre serveur à l'aide de divers outils (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp, etc).
• Si vous avez besoin d’une compression plus élevée ou de réduire davantage l’utilisation de CPU, vous pouvez aussi décharger sur son serveur (facultatif) les traitements qui consomment du CPU.

Quel rôle devrait jouer l'EWWW dans la Route A ?

Si vous utilisez Plus WebP comme “stratégie de migration/remplacement de format”, EWWW est mieux adapté :

• Compression et optimisation des volumes(en particulier la réduction du poids des ressources brutes telles que JPG/PNG)
• Optimisation par lots de la médiathèque historique(visant la “réduction du volume” plutôt que le “remplacement de l'URL”)

Fosse typique d'EWWW

1. Charge élevée du serveur lors de l'optimisation des lots
   Comme la compression locale consomme des ressources I/O CPU, l’approche n’est pas de “ ne pas l’utiliser ”, mais de la faire par lots, hors pointe, et au besoin d’opter pour une solution de déchargement ou infonuagique.
2. “L'expression ”une image WebP est générée" ne signifie pas que le frontend doit produire une image WebP.
   De nombreux plugins souffrent de ce malentendu : la génération est une chose, les stratégies de diffusion (réécritures, picture tags, cache hits, etc.) en sont une autre.
3. Faire la même chose avec d'autres plugins
   Si vous optez pour la solution A, essayez de ne pas superposer des compressions de type ShortPixel/Imagify/TinyPNG ; si vous optez pour la solution B, n'activez pas la logique de remplacement Plus WebP. Principe de base :Une seule voie pour arriver au bout.

---

3.2 Itinéraire B : Triple choix de compression dans le nuage (ShortPixel / Imagify / TinyPNG)

Cette voie convient aux personnes qui “veulent économiser les ressources du serveur, veulent faire des lots avec moins d'efforts, et acceptent la facturation par crédit/par volume”.
Mais le point le plus trompeur concernant la compression des nuages est le suivant :Les crédits gratuits ne sont pas aussi simples que les “feuilles gratuites” !.. Le nombre de tailles de vignettes, la génération ou non de WebP/AVIF et la remise en pression répétée ou non peuvent avoir une incidence significative sur la consommation.

Voici quelques explications : ce qui se passe avec la gratuité, comment les crédits sont déduits, quels sont les pièges les plus probables et quels sont les types de sites appropriés.

---

3.2.1 ShortPixel100 crédits gratuits/mois, mais les crédits sont consommés par les vignettes et les agrandissements WebP/AVIF.

Qu'en est-il de la gratuité et de la rémunération ?

La description du plugin ShortPixel indique clairement :

• 100 crédits gratuits par mois
• Il existe également des “Extra Unlimited Monthly Credits” (la page du plugin donne des informations sur les prix correspondants).
• Également disponible sous forme de “packs de crédits uniques qui n'expirent jamais” (avec des informations sur le prix de départ)

Conseil :

• Gratuit : donner un certain nombre de crédits par mois pour des sites légers ou des tests.
• Packs jetables : ils conviennent aux sites possédant de grandes médiathèques et souhaitant écouler leur stock en une seule fois (achetez-les une fois et utilisez-les, ils n'expirent généralement pas).
• Mensuel/illimité : convient aux sites dont les images sont mises à jour en permanence et dont l'optimisation est stable à long terme.

La base de données officielle de ShortPixel a également fait une mise à jour sur “One Time Pack vs Unlimited Monthly”.explication expliciteLes forfaits mensuels illimités sont facturés au mois (ou à l’année), offrent des crédits illimités et comprennent un quota fixe de CDN; les crédits à achat unique n’expirent pas, ce qui vous permet de les utiliser selon vos besoins avec plus de contrôle.

En bref : comment les crédits ShortPixel sont-ils calculés ?

Documentation officielle de ShortPixel KB a été très direct :

• WordPress génère plusieurs vignettes lorsque vous téléchargez une image ;
• Chaque optimisation de vignette compte pour un crédit；
• Si vous choisissez de générer un fichier WebP ou AVIF, l'optionChaque version WebP/AVIF de l'image originale et de la vignette consomme un crédit supplémentaire.；
• Vous pouvez exclure certaines vignettes de l'optimisation afin de réduire la consommation de crédits.

Exemple de crédits：

Supposons que vous téléchargiez une image et que le thème/plugin génère 8 vignettes :

• Optimiser uniquement l'image originale + les vignettes : 1 (original) + 8 (vignettes) = 9 crédits
• Si vous souhaitez également générer des fichiers WebP/AVIF : une version next-gen supplémentaire pour chacune des 9 versions ci-dessus → +9 crédits.
  En d'autres termes, ce que vous pensez être “une image” peut en fait consommer près de “crédits à deux chiffres”.

Ainsi :“100 crédits gratuits” n'est pas la même chose que “100 images gratuites”.

Les pièges les plus courants de ShortPixel

1. Les 100 crédits gratuits s'épuisent rapidement
   Cause première : beaucoup de vignettes + crédits supplémentaires pour la génération de WebP/AVIF.
   suggestion：

• Évaluez d'abord le nombre de vignettes du site
• Exclure les tailles de vignettes inutiles (n'optimiser que les tailles qui seront réellement utilisées)
• Déterminer la stratégie de compression avant de procéder à une exécution en masse afin d'éviter une consommation répétée d'essais et d'erreurs.

2. Empiler d'autres plug-ins de conversion en même temps
   Si vous avez des remplacements Plus WebP et que ShortPixel génère/insère des balises next-gen, la logique s'empile et devient plus difficile à dépanner. Pour la voie B, laissez ShortPixel s'en charger seul.
3. Je pensais que si je l'installais, ce serait “WebP/AVIF au premier plan”.”
   Page du plugin ShortPixelMentionné qu'il convertit WebP/AVIF et peut ajouter des images next-gen à la page d'accueil (par exemple en les étiquetant).
   Mais il est toujours important de vérifier les résultats après l'avoir fait.

---

3.2.2 ImagifierGratuit 20MB/mois; le quota est déduit selon la taille de l’image originale + le nombre de miniatures, et une recompression sera déduite à nouveau

Montant libre et positionnement

Page de prix officielle d'ImagifyL'écriture est claire :Compte gratuit : quota mensuel de 20MB。
Sa page de plugins indique clairement qu'il peut compresser, redimensionner et convertir les fichiers WebP/AVIF.

Comment le quota est-il déduit ?

Documentation officielle d'Imagify “La rubrique ”Comment l'utilisation des quotas est-elle calculée ?" explique très clairement le mécanisme de déduction :

• Le nombre de vignettes influe sur la consommationPar exemple, si vous avez 10 tailles de vignettes, l'optimisation d'une image devient l'optimisation de 11 images (original + 10 vignettes), qui contribuent toutes à la consommation du quota.
• Déduction du quota en fonction de la taille du document originalLe quota de 100KB est déduit du quota de 100KB : par exemple, si vous envoyez une image de 100KB à Imagify, 100KB seront déduits du quota.
• La modification du niveau de compression et la ré-optimisation consommeront à nouveau du quota.。
• La même clé API peut être utilisée pour plusieurs sites, mais les quotas sont partagés entre eux.

Il s'agit du “mode de compréhension fondamental” d'Imagify :
Il s'agit plutôt d'un pack de trafic : il déduit autant que vous envoyez ; plus vous avez de vignettes, plus il déduit ; et vous répéterez la déduction si vous réappuyez à plusieurs reprises.

Exemple de quota Imagify facile à lire

Supposons que vous téléchargiez une image originale de 800 Ko et que le site génère 8 vignettes.

• Imagify optimise pour inclure “l'image originale + 8 vignettes” (si vous choisissez de les optimiser toutes), ce qui signifie que cette seule action consomme un quota proche de la “taille originale de tous ces fichiers combinés”.
  C’est pourquoi certains sites ont l’impression que “ 20MB s’épuise vite ” : ce n’est pas qu’Imagify n’est pas suffisant, c’est que les images que vous téléversez sont trop volumineuses, qu’il y a trop de miniatures, et qu’il est possible que vous réessayiez plusieurs niveaux de compression.

Les pièges les plus courants d'Imagify

1. Gratuit 20MB insuffisant pour effectuer le nettoyage complet de l’historique du site“
   20MB convient généralement mieux aux tests et aux mises à jour légères; si votre bibliothèque multimédia est déjà très volumineuse, une suppression complète en une seule fois nécessitera probablement une mise à niveau.
2. L'ajustement répété des niveaux de compression entraîne une duplication de la consommation des quotas.
   Imagify précise queLa réoptimisation consommera à nouveau le quota.
   Je vous suggère de préciser la “stratégie” sur cette page :

• Commencez par un petit nombre d'images pour déterminer le niveau de compression et l'aspect visuel.
• Déterminer la stratégie et la mettre en œuvre en masse
  Éviter les essais et les erreurs répétés sur l'ensemble de la bibliothèque

3. Plusieurs sites partageant une clé API entraînent une “réduction inexplicable des quotas”.”
   Si vous utilisez la même clé API pour plusieurs stations, le quota est partagé.
   Ainsi, dans les scénarios d'équipe/multi-stations, il est préférable d'être clair : quelles stations sont partagées et lesquelles sont utilisées individuellement afin d'éviter des budgets incontrôlables.

---

3.2.3 TinyPNG(Tiny Compress Images) : 500 crédits/mois gratuits ; le passage à WebP/AVIF entraîne une “déduction de 1 crédit par taille”.”

Le crédit gratuit et ses idées de facturation

La page du plugin WordPress de TinyPNG est très claire :

• 500 crédits par mois gratuits
• Dans la rubrique “Installation générale de WordPress”, vous pouvez probablement compresser le fichier Environ 100 images/mois
• Cependant, si la conversion AVIF ou WebP est activée :Chaque taille d'image consomme un crédit supplémentaireOn peut donc supposer qu'il ne peut être que compressé et converti Environ 50 images/mois(en fonction du nombre de tailles de vignettes que vous avez).

Entre-temps, Tinify (les développeurs de TinyPNG/TinyJPG) ont également fait leur Page de tarification de l'APIDescription : Inscrivez-vous et bénéficiez de 500 compressions gratuites par mois ; ensuite, vous serez facturé en fonction du nombre de compressions réussies, sans abonnement obligatoire.

Résumez en une phrase la manière dont TinyPNG est compris :
Il compte les crédits ; plus vous avez de tailles de vignettes et plus vous avez activé WebP/AVIF, plus les crédits sont consommés rapidement.

Exemples faciles à lire de crédits TinyPNG

Supposons que votre site génère 8 tailles de vignettes pour chaque image :

• Compression uniquement : original + 8 vignettes → 9 crédits requis
• Si la conversion WebP/AVIF est activée : un crédit supplémentaire par taille → probablement près du double !
  Cela correspond à la description sur la page du plugin : après l'activation, le nombre de cartes gratuites passe d'environ “100 cartes/mois” à “50 cartes/mois”.

Les pièges les plus courants de TinyPNG

1. Pensée 500 crédits = 500 images
   Ce n'est pas le cas. Il est consommé par “image size/variant”. La page du plugin avertit clairement que “Les conversions déduisent 1 crédit supplémentaire pour chaque taille d'image”.
2. Les thèmes/progiciels de commerce électronique génèrent trop de tailles et les crédits gratuits diminuent considérablement.
   Plus il y a de tailles, plus les crédits sont faciles à mettre à l'échelle et à consommer.
3. Après avoir activé la conversion, vous constatez que les crédits sont soudainement inutilisés.
   Il ne s'agit pas d'un bogue, mais d'un mécanisme de facturation.
   Conseils stratégiques :

• Si la phase libre est principalement utilisée pour la compression et la réduction du poids, vous pouvez commencer par la compression uniquement, puis activer la conversion lorsque vous êtes sûr que la structure de votre site est stable et que vous avez vraiment besoin de la technologie next-gen.

4) Recommandation de sous-scénario : comment choisir différents types de sites ?

De même, WordPress, les sites de contenu, les sites de commerce électronique, les portfolios et les sites de membres n'ont pas les mêmes “points de pression” pour les images.

4.1 Sites de contenu/blogs (beaucoup d'articles graphiques, fréquence moyenne des mises à jour)

Recommandations prioritaires :

1. Stratégie de dimensionnement (étape 1)
2. Compression (étape 2)
3. WebP (étape 3)

Un itinéraire plus adapté :

• Vous voulez sauvegarder : Route B Triple Choice (ShortPixel / Imagify / TinyPNG)
• Si vous voulez être libre : itinéraire A (Plus WebP + EWWW), mais il est recommandé de commencer par le “mode conservateur (sans supprimer l'image originale)” pour évaluer le risque.

Fosse typique :

• La première image de la page de l'article est très grande, ce qui constitue une mauvaise stratégie de chargement paresseux.Ralentit le premier écran

4.2 Site de commerce électronique/de produits (nombreuses vignettes, nombreuses variantes d'images, stabilité d'abord)

Le commerce électronique est le plus susceptible d'être le problème, non pas “l'effet de compression n'est pas bon”, mais “l'optimisation de certaines tailles n'est pas correcte, il manque des vignettes, les composants frontaux ne peuvent pas obtenir l'image”.

Recommandations prioritaires :

1. La stabilité d'abord : stratégie de compression conservatrice, ne pas remplacer immédiatement toute la bibliothèque.
2. Évaluation de la taille des vignettes : les thèmes de commerce électronique génèrent généralement plus de tailles, et la consommation est amplifiée (ShortPixel/TinyPNG est particulièrement visible).
3. Effectuer une validation à petite échelle avant la mise en lot (très important)

Un itinéraire plus adapté :

• La voie B est généralement plus simple : ShortPixel/Imagify/TinyPNG peuvent tous être mis en lot, et il est essentiel que vous compreniez le mécanisme des quotas et que vous en évaluiez le coût à l'avance.
• L'itinéraire A est parfait, mais soyez plus prudent avec le comportement “écraser les ID/supprimer les images originales/remplacer les URL” de Plus WebP : il s'agit d'une migration d'actifs, et il n'est pas recommandé de tout remplacer d'emblée.

4.3 Portfolio/station photographique (qualité d'image unique sensible, images de grande taille, exigences élevées en matière de visualisation)

Recommandations prioritaires :

1. Stratégie de taille (contrôle de la zone d'affichage)
2. Stratégie de compression (il vaut mieux être plus grand que d'écraser les détails)
3. WebP/AVIF (les gains sur les grandes scènes sont évidents, mais vérifiez la vue)

Un itinéraire plus adapté :

• ImagifierLe site est plus facile à gérer sur le plan budgétaire (vous savez combien vous devez déduire pour chaque grande image), mais vous évitez les répressions répétées.
• ShortPixelSi la taille de la vignette n'est pas très grande, les crédits sont également très intuitifs ; mais si vous générez de nombreuses tailles +next-gen, la consommation de crédits sera amplifiée, et vous devrez planifier à l'avance.

5) Comparaison quotas/facturation : mettre en perspective “la gratuité ne suffit pas”.

Lequel est le plus avantageux et combien de temps durera la gratuité ?

5.1 Trois modèles de rétrofacturation

• ShortPixel(crédits)Crédits basés sur “l'image originale + le nombre de vignettes” ; des crédits supplémentaires seront déduits pour chaque version correspondante de WebP/AVIF générée.
• Imagifier(quota MB)Déduire le quota en fonction de la “taille du fichier original” ; plus il y a de vignettes, plus il y a de déductions ; la réimpression entraînera une nouvelle déduction.
• TinyPNG(crédits)Les frais d'utilisation sont les suivants : 500 crédits par mois ; l'activation de la conversion WebP/AVIF entraîne la déduction de crédits supplémentaires pour chaque taille d'image.

5.2 Méthodes d'estimation rapide

Vous pouvez l'estimer comme suit :

1. Choisissez n’importe quelle image originale que vous téléversez souvent et regardez sa taille approximative (p. ex. 300KB / 1MB / 3MB)
2. En fonction du nombre de tailles de vignettes que votre site génère (par exemple 5 / 10 / 20)
3. Décidez si vous voulez générer WebP/AVIF (oui/non)

Utilisez ensuite le “calcul mental” suivant pour comprendre la consommation :

• ShortPixelCrédits : ≈ (1 + nombre de vignettes) crédits par image ; si l'on génère du WebP/AVIF, ≈ double à nouveau (puisque la version next-gen prend également des crédits).
• ImagifierChaque image ≈ (taille originale + taille de chaque vignette) déduit le quota ; changer le niveau de compression et recompresser déduira à nouveau le quota.
• TinyPNG: 500 crédits gratuits ; si votre site génère beaucoup de tailles par image, et que la conversion est activée, le nombre de crédits gratuits diminue de manière significative (la page du plugin donne une estimation visuelle de “~100 crédits/mois” contre “~50 crédits/mois”).

6. alertes aux risques

Risque 1 : Ne pas laisser plusieurs plugins faire la même chose encore et encore

C'est la “source de désastre” la plus fréquente.”

• Itinéraire A :Plus WebP ou AVIF + EWWW(Répartir le travail entre les deux, ne pas effectuer de conversions et de livraisons similaires en même temps, ou n'installer qu'un seul des deux).
• Itinéraire B : ShortPixel / Imagify / TinyPNG choisir trois(en choisir un pour la compression et la nouvelle génération)

Risque 2 : La fonction “Ecraser l'ID / Supprimer l'image originale / Remplacer l'URL” de Plus WebP est une migration d'actifs.

C'est nous qui soulignons :Plus WebP La description indique clairement que la génération complète écrase l'identifiant de l'image originale, supprime le fichier original et remplace l'URL du contenu.
Cela signifie qu'il ne s'agit pas d'une “petite mise en place qui peut être retirée à tout moment”, mais d'un changement au niveau de l'actif.

La stratégie proposée devrait être la suivante :

• Essai à petite échelle d'abord (quelques dizaines à quelques centaines)
• Confirmer que l'affichage frontal, les vignettes et les mises à jour du cache fonctionnent correctement.
• Reconsidérer le traitement complet de la bibliothèque

Risque 3 : La consommation réelle de “crédits gratuits” pour la compression en nuage dépend du nombre de vignettes et de la sélection "next-gen".

• ShortPixelLes vignettes et la technologie next-gen affectent de manière significative les crédits.
• TinyPNGL'activation de WebP/AVIF déduit un crédit supplémentaire pour chaque taille d'image.
• ImagifierLes vignettes sont déduites en fonction de la taille de l'image originale, plus le nombre de vignettes déduites est important, plus la pression est forte, plus la déduction est importante !

Risque 4 : “WebP/AVIF généré” ne signifie pas “WebP/AVIF fourni par le front office”.”

De nombreuses personnes ont l'impression de ne pas être plus rapides après la conversion parce que le frontend continue à produire des fichiers JPG/PNG (la mise en cache, la réécriture, le balisage et la négociation avec le navigateur ne sont pas au bon endroit).

7. comment vérifier qu'elle a pris effet après avoir été effectuée

4 points de validation très simples :

1. si la même page est rafraîchie une deuxième fois et se charge plus régulièrement et plus rapidement(Mise en cache et optimisation de l'aspect physique du fonctionnement)
2. Les tailles des images chargées sur les téléphones mobiles et les ordinateurs de bureau sont-elles sensiblement différentes ?(réactif) srcset/sizes (qu'ils fonctionnent ou non)
3. Contrôle ponctuel de quelques images : présence de fichiers/ressources WebP ou AVIF(Le site utilise-t-il réellement nouvelle génération）
4. Examinez quelques images : zoomez pour voir si elles sont visiblement brouillées, si le texte est flou...(la masse comprimée n'est pas excessive)

Si ces quatre éléments correspondent, l'itinéraire que vous avez choisi a été exécuté. Prochaine étape. Couche de livraison“l'ensemble sera plus stable.

8. les recommandations d'action

1. Choisissez d'abord votre itinéraire :

• Essayer d'être aussi libre que possible.Plus WebP ou AVIF + EWWW (ou l'un d'entre eux seulement)
• Vous souhaitez économiser les ressources du serveur, payer par crédit pour une plus grande tranquillité d'esprit.Les formats : ShortPixel / Imagify / TinyPNG - choisissez-en un !

2. Effectuer d'abord un petit test (quelques dizaines)
3. Assurez-vous que tout va bien avant de procéder au chargement
4. La stabilité des livraisons doit encore être améliorée :lire CDN Accélération

problèmes courants

1) Combien de plug-ins dois-je installer ? Puis-je les installer tous ?

Essayez de n'emprunter qu'un seul itinéraire.

• Route A : Plus WebP ou AVIF + EWWW Image Optimizer (ou l'un des deux)
• Itinéraire B : ShortPixel / Imagify / TinyPNG - choisissez-en un !
  Dans la même station, en même temps, laisser plus d'un plug-in faire “compression / transfert WebP / AVIF / changement d'URL / réécriture de livraison”, le plus probable est de devenir de plus en plus chaotique, mais aussi le plus difficile à vérifier.

2) WordPress ne prend-il pas déjà en charge WebP/AVIF ? Ai-je encore besoin d'un plugin ?

Elle doit être séparée :
“Soutien au téléchargement/à l'utilisation” ≠ “Conversion automatique/délivrance automatique”.
WordPress 6.5 ne convertit pas automatiquement les anciens JPG/PNG en WebP/AVIF, et ne fait pas non plus automatiquement l'exportation AVIF/WebP vers les navigateurs et le fallback pour vous. Il faut généralement un plugin ou un service pour faire fonctionner la médiathèque historique.

3) Quelle est l'étape la plus “gratifiante” de l'optimisation de l'image ?

Il s'agit généralement Commencez par définir les “tailles” (srcset/sizes).。
De nombreux sites sont lents non pas parce qu'ils n'ont pas de compression, mais parce que la page ne fait que 900 px et qu'on demande à l'utilisateur de télécharger une image de 3000 px. La compression permet d'économiser des Ko, mais la “mauvaise taille” vous fera télécharger plusieurs fois plus de données pour rien.

4) Comment puis-je être sûr que je charge la “plus petite” et non l'image originale pour toujours ?

Observez deux phénomènes :

• Lors de l'ouverture d'une page sur un téléphone portable, la taille de l'image téléchargée est sensiblement plus petite que sur un ordinateur de bureau.
• La même image se charge avec différentes tailles de ressources sur différents appareils
  Si l'image originale est téléchargée indéfiniment, c'est souvent parce que le thème/constructeur traite l'image comme une image d'arrière-plan CSS ou une sortie personnalisée, en contournant le redimensionnement multiple de la bibliothèque de médias avec srcset.

5) L'expression “WebP/AVIF généré” signifie-t-elle que le frontend doit produire du WebP/AVIF ?

Pas d'égalité.
La génération n'est que la “couche fichier” réalisée ; la livraison de WebP/AVIF par le frontend dépend des réécritures, des politiques de balisage des images, des occurrences dans le cache, de la négociation du navigateur en vigueur, etc. Lorsque vous avez terminé, assurez-vous de “vérifier ponctuellement quelques images pour les types de ressources”.

6. plus Qu'y a-t-il de si dangereux dans WebP ou AVIF ? Puis-je utiliser toute la bibliothèque en un seul clic ?

Son point de risque n'est pas la “compression”, c'estChangements dans les niveaux de migration des actifs：

• La génération complète peut écraser l'identifiant du fichier image original, supprimer le fichier original et remplacer l'URL dans le contenu.
  la raison pour laquelleIl n'est pas recommandé de remplacer toute la bibliothèque dès le départLes tests à petite échelle d'abord (dizaines ~ centaines) et les sauvegardes disponibles, puis le traitement de la bibliothèque dans son intégralité.

7) Quel est le choix entre les deux modes de Plus WebP : conserver l'image originale ou remplacer et supprimer l'image originale ?

Simple à comprendre :

• Mode 1 : Conserver l'image originale + générer une copie WebP/AVIF (plus stable)Les images peuvent être modifiées, mais le disque augmente (image d'origine + nouveau format + vignettes de taille multiple).
• Mode 2 : Remplacer et supprimer l'image originale (plus agressif)Les disques sont moins sujets au gonflement, mais vous “changez les actifs + changez les références”, ce qui rend plus coûteux le dépannage des problèmes de compatibilité.
  Plus le site est complexe (e-commerce/multi-plugin/multi-size), plus il est recommandé de commencer par un modèle plus stable.

8) La compression locale gratuite d'EWWW Image Optimizer est-elle suffisante ? Va-t-elle surcharger le serveur ?

EWWW ressemble davantage à un compresseur local qui travaille en arrière-plan : il consomme CPU/IO。
Il est courant que la charge augmente pendant l'optimisation des lots, ce qui ne signifie pas qu'elle “ne fonctionne pas”, mais plutôt que la stratégie doit être correcte : lots, faibles pics et options de déchargement/cloud si nécessaire.
Si vous cherchez à faire des économies ou si vous êtes à court de ressources serveur, la route B est plus adaptée au serveur.

9. les 100 crédits gratuits/mois de ShortPixel, pourquoi ai-je l'impression qu'ils ont disparu en quelques photos ?

en raison de Les crédits ne sont pas le “nombre de photos”.”La prochaine génération sera agrandie par une vignette avec la prochaine génération :

• L'image originale + chaque vignette compte comme crédit
• Si un WebP/AVIF est généré, un crédit supplémentaire est consommé pour chaque version correspondante.
  Ainsi, ce que vous pensez être “1 image” peut en réalité consommer près de “crédits à 2 chiffres”. shortPixel

Pourquoi les 20MB/mois gratuits d’Imagify s’épuisent-ils aussi vite?

Imagify est plutôt un “pack trafic” :

• Comme vous l'avez envoyé.Taille du fichier originaldéduction des quotas
• Plus vous avez de vignettes, plus vous consommez
• Changer le niveau de compression pour ré-optimiser consommera à nouveau le quota.
• Même clé API pour plusieurs sites, partage des quotas
  Donc, “ 20MB s’épuise rapidement ” est souvent causé par des images trop volumineuses, trop de miniatures ou des essais répétés.

11. TinyPNG est gratuit pour 500 crédits/mois, pourquoi le plugin dit qu'il n'y a que 100 crédits/mois et ensuite 50 crédits/mois avec WebP/AVIF ?

Parce que les crédits TinyPNG sont également agrandis par “size/variant” :

• Une installation WordPress normale compresse probablement environ 100 feuilles par mois.
• Activer la conversion AVIF ou WebP :Chaque taille d'image consomme un crédit supplémentaireVous ne pouvez donc probablement compresser et convertir qu'environ 50 images par mois (en fonction du nombre de tailles de vignettes).
  Donc 500 crédits ≠ 500 images.

12. combien de vignettes y a-t-il sur mon site ? Pourquoi est-ce si important ?

WordPress génère plusieurs tailles pour le téléchargement d'une image ; les thèmes/plugins (en particulier pour le commerce électronique) peuvent ajouter d'autres tailles.
Les crédits/quotas de compression dans le nuage sont généralement “l'original + les vignettes ensemble”, donc plus vous avez de vignettes, moins vous avez de crédits gratuits à utiliser.

13. le chargement paresseux est-il toujours plus rapide ? Pourquoi certaines personnes disent-elles que le chargement paresseux ralentit les choses ?

Le chargement paresseux convient aux “ressources hors écran”.
Si le premier écran de la grande image la plus critique est également retardé le chargement, peut ralentir l'expérience du premier écran. WordPress 5.5 depuis le chargement paresseux par défaut est très bien, mais ne pas “une taille unique pour tous”.

14. Je prends l’itinéraire A ou B, quand ai-je besoin de CDN / image CDN?

La compression, le dimensionnement et le formatage permettent de résoudre le problème des “petits fichiers qui tiennent” ;
CDN offre une livraison plus proche et plus fiable。
Lorsque le chargement des images à partir du site d’origine sur une longue distance entraîne une latence évidente, ajouter ensuite CDN/image CDN (par exemple Cloudflare Polish / Jetpack Site Accelerator) rendra l’ensemble plus stable, et la lecture plus fluide. Accélération WordPress CDN。

15) Quel est le moyen le plus simple de vérifier que “ça marche vraiment” une fois que j'ai terminé ?

La méthode de vérification la plus rapide :

• si la même page est rafraîchie une deuxième fois et se charge plus régulièrement et plus rapidement
• Les tailles des images chargées sur les téléphones portables et les ordinateurs de bureau sont-elles sensiblement différentes (est-ce que srcset/sizes entre en jeu) ?
• Contrôle ponctuel de quelques images : présence de fichiers/ressources WebP ou AVIF
• Examinez quelques images : zoomez pour voir si elles sont visiblement brouillées, si le texte est flou...