Image Optimisation
Presser Ces Ko
L'optimisation de l'image affine votre site Web
Moins de poids, plus de vitesse
Qu'est-ce que Image Optimisation?
L'optimisation des images est un processus très simple. C’est également la chose qui accélérera le plus votre site, surtout si vous avez un site Web riche en images. Essentiellement, optimiser une image consiste simplement à réduire la taille du fichier. La technologie est en constante évolution et de nos jours, les meilleurs formats d'image à utiliser sont WEBP et AVIF. Les deux formats sont entièrement pris en charge par les navigateurs modernes et des informations détaillées sur l'aspect technique de ces techniques de compression d'images sont disponibles sur Ce développeur Web page.
En raison de la qualité des appareils photo modernes et des images de stock disponibles, la taille des fichiers image peut être très volumineuse – certains peuvent même atteindre 5 à 10 Mo, voire plus. Les images de cette taille ne peuvent tout simplement pas être utilisées sur des sites Web, car elles prennent beaucoup trop de temps à télécharger et risquent d'affecter votre scores de vitesse de page mal. Ce que vous devez faire, c'est les réduire en taille. C'est là qu'intervient le logiciel d'optimisation d'image.
L'optimisation des images peut être effectuée de deux manières : soit manuellement, soit avec un logiciel. La méthode manuelle est idéale si vous réalisez un nouveau site internet, mais pour les sites Web existants contenant souvent des centaines d’images ou plus, il est beaucoup plus efficace d’opter pour un logiciel d’optimisation d’images. Il existe de nombreux plugins d'optimisation d'image disponibles, mais celui que je recommande le plus est Imaginer. Il est gratuit jusqu'à 200 images par mois, prend en charge WEBP et, d'après mon expérience, fonctionne avec tous les types de sites Web.
Comme auparavant, je fournirai une bonne vidéo présentant ses principales fonctionnalités, tout en écrivant des conseils et des éléments à surveiller en cours de route.
Presser Ces Ko
L'optimisation de l'image affine votre site Web
Moins de poids, plus de vitesse
Qu'est-ce que Image Optimisation?
L'optimisation des images est un processus très simple. C’est également la chose qui accélérera le plus votre site, surtout si vous avez un site Web riche en images. Essentiellement, optimiser une image consiste simplement à réduire la taille du fichier. La technologie est en constante évolution et de nos jours, les meilleurs formats d'image à utiliser sont WEBP et AVIF. Les deux formats sont entièrement pris en charge par les navigateurs modernes et des informations détaillées sur l'aspect technique de ces techniques de compression d'images sont disponibles sur Ce développeur Web page.
En raison de la qualité des appareils photo modernes et des images de stock disponibles, la taille des fichiers image peut être très volumineuse – certains peuvent même atteindre 5 à 10 Mo, voire plus. Les images de cette taille ne peuvent tout simplement pas être utilisées sur des sites Web, car leur téléchargement prend beaucoup trop de temps et affectera considérablement vos scores de vitesse de page. Ce que vous devez faire, c'est les réduire en taille. C'est là qu'intervient le logiciel d'optimisation d'image.
L'optimisation des images peut être effectuée de deux manières : soit manuellement, soit avec un logiciel. La méthode manuelle est idéale si vous créez un nouveau site Web, mais pour les sites Web existants contenant souvent des centaines d'images ou plus, il est beaucoup plus efficace d'utiliser un logiciel d'optimisation d'image. Il existe de nombreux plugins d'optimisation d'image disponibles, mais celui que je recommande le plus est Imaginer. Il est gratuit jusqu'à 200 images par mois, prend en charge WEBP et, d'après mon expérience, fonctionne avec tous les types de sites Web.
Comme auparavant, je fournirai une bonne vidéo présentant ses principales fonctionnalités, tout en écrivant des conseils et des éléments à surveiller en cours de route.
L'optimisation des images est un processus simple. C’est également la chose qui accélérera le plus votre site, surtout si vous avez un site Web riche en images. Essentiellement, optimiser une image consiste simplement à réduire la taille du fichier.
La technologie est en constante évolution et de nos jours, les meilleurs formats d'image à utiliser sont WEBP et AVIF.
Les deux formats sont entièrement pris en charge par les navigateurs modernes et des informations détaillées sur l'aspect technique de ces techniques de compression d'images sont disponibles sur Ce développeur Web page.
En raison de la qualité des appareils photo modernes et des images de stock disponibles, la taille des fichiers image peut être très volumineuse – certains peuvent même atteindre 5 à 10 Mo, voire plus. Les images de cette taille ne peuvent tout simplement pas être utilisées sur des sites Web, car leur téléchargement prend beaucoup trop de temps et affectera considérablement vos scores de vitesse de page. Ce que vous devez faire, c'est les réduire en taille. C'est là qu'intervient le logiciel d'optimisation d'image.
L'optimisation des images peut être effectuée de deux manières : soit manuellement, soit avec un logiciel. La méthode manuelle est idéale si vous créez un nouveau site Web, mais pour les sites Web existants contenant souvent des centaines d'images ou plus, il est beaucoup plus efficace d'utiliser un logiciel d'optimisation d'image.
Il existe de nombreux plugins d'optimisation d'image disponibles, mais celui que je recommande le plus est Imaginer. Il est gratuit jusqu'à 200 images par mois, prend en charge WEBP et, d'après mon expérience, fonctionne avec tous les types de sites Web.
Comme auparavant, je fournirai une bonne vidéo présentant ses principales fonctionnalités, tout en écrivant des conseils et des éléments à surveiller en cours de route.
Comment utiliser Imaginer
Comment Optimiser Vos images
Une question de marque
Imagify propose trois niveaux d'optimisation : standard, agressif et ultra. Ces niveaux concernent essentiellement la qualité de l’image. L'un des inconvénients de l'optimisation de l'image est que vous perdez en qualité d'image. Il est petit et normalement imperceptible, mais il peut devenir perceptible si vous tenez à une qualité d'image ultra élevée. Ce serait souvent le cas sur des sites Web comme des sites de photographie, d’art ou de bijoux, etc.
Le fait-il Dégrader Beaucoup d’images ?
Cela dépend en grande partie du type d’images que vous utilisez. Par exemple, la qualité standard ne les dégradera pas du tout, alors que la qualité ultra les pixellisera quelque peu, mais pas trop. Ce site Web est défini sur la qualité « agressive » à titre d'exemple. L'avantage étant que les images sont beaucoup plus petites que le réglage standard et donc un chargement plus rapide, avec pratiquement aucune perte de qualité d'image.
Certaines personnes optent directement pour le réglage ultra et remarquent vraiment la différence. Lorsque vous commencez à optimiser, assurez-vous de cocher la case pour conserver les originaux. De cette façon, si vous n’aimez pas le réglage ultra, vous pouvez revenir à une qualité supérieure.
Généralement, le paramètre agressif dégradera la qualité de vos images d'environ 15% jusqu'à un niveau de 85%. Ceci est imperceptible à l’œil humain et constitue le cadre le plus courant. Si la qualité de l'image n'est pas vitale ou si vous utilisez des graphiques de style dessin animé plutôt que des photos, optez pour l'ultra. C'est toujours parfaitement acceptable. Normalement, avec un réglage ultra, vous réduirez d'environ 85% la taille de votre image. Cela signifie qu'une image de 1 Mo diminuera jusqu'à une taille comprise entre 100 et 150 lb, ce qui fait une énorme différence dans la taille de l'image. temps de chargement des pages et vitesse de la page scores.
Puis-je Faire tout Mes images une fois ?
Oui, vous pouvez – regardez la vidéo pour un guide sur le fonctionnement d’Imagify. UN le meilleur conseil est d'inclure également votre thème dossier dans les optimisations. Votre thème contiendra de nombreuses images, dont certaines seront utilisées autour de votre site Web. En insérant vos images de thème, vous maximiserez les images que vous pouvez optimiser sur votre site Web.
Pour évaluer le nombre d’images que vous devez optimiser, consultez votre médiathèque. Il vous dira combien d'images vous avez. Multipliez ensuite cela par 4 (en moyenne). En effet, WordPress crée plusieurs versions de vos images pour un design réactif (vignette, 300 x 300 px, etc.). Vous devez optimiser chaque version de chaque image pour bénéficier de tous les avantages de l’optimisation des images sur tous les appareils.
Optimisation manuelle
L'optimisation manuelle des images est vraiment destinée aux puristes. L'un des avantages est que vous téléchargez une image entièrement optimisée, à la bonne taille et que vous n'avez donc pas besoin d'exécuter de logiciel d'optimisation d'image. Vous économisez également de l'espace sur le serveur car vous n'y avez pas d'images en taille réelle. Cependant, cela prend beaucoup de temps, donc pour la plupart des gens, je recommanderais simplement d'utiliser Imagify.
J'ai Le temps – De quoi s'agit-il ?
Tout d'abord, vous devez connaître les dimensions de l'image que vous utilisez. Il existe un bon guide sur tailles d'image et bonnes pratiques sur cette page. Une fois que vous connaissez la taille de vos images, vous pouvez recadrer n'importe quelle grande image à sa taille exacte à l'aide de n'importe quel outil logiciel d'image. Paint.net est gratuit et normalement suffisant pour cela.
Après avoir créé vos images à la bonne taille, vous pouvez les optimiser à l'aide d'un outil en ligne. L'un des meilleurs qui existe depuis des années est TinyPNG.com. Il vous suffit de télécharger vos images, puis de télécharger la version beaucoup plus petite qui sera créée. Deux conseils lors du téléchargement de ces images sur WordPress :
Tout d'abord, cela semble idiot, mais assurez-vous de télécharger la version nouvellement optimisée sur votre site Web à partir du dossier « Téléchargements ». Il est si facile de télécharger une mauvaise image depuis votre bureau ou depuis l'endroit où vous stockez vos images. Deuxièmement, utilisez un nom légèrement différent pour le nouveau titre de l'image. C'est à cause de la mise en cache. Votre installation WordPress peut ne pas reconnaître la nouvelle taille de l'image pendant un certain temps si vous téléchargez l'image avec le même nom de fichier.
Après avoir fait cela, vous pouvez aller plus loin et convertir les images nouvellement optimisées au format WEBP. Faites-le avant de les télécharger. Allez au CloudConvert site web. Il suit exactement le même processus que TinyPNG, sauf qu'il faut choisir de les convertir en WEBP. Téléchargez ensuite les fichiers et téléchargez-les sur votre serveur.
Utiliser un logiciel tel qu'Imagify est beaucoup plus simple, mais au final, vous aurez téléchargé des images brutes optimisées, vous n'aurez donc pas besoin d'utiliser des outils de conversion d'image ou d'exécuter des conversions WEBP en permanence.
Dois-je utiliser WEBP ?
WEBP est un format d'image plus récent développé par Google. Ses images sont beaucoup plus petites que les formats JPG et PNG traditionnels et donc oui, vous devriez les utiliser – à condition que votre serveur prenne en charge la conversion des images traditionnelles en WEBP.
WEBP a en fait vu le jour en 2010, mais malgré cela, il est toujours considéré comme un format « émergent ». Vous lirez peut-être que vous avez besoin des images JPG / PNG originales comme solution de secours ainsi que des formats WEBP, mais la vérité est que Chrome, Firefox, Safari et tous les autres principaux navigateurs les prennent en charge, donc n'avoir que des versions WEBP est désormais acceptable.
Est-ce que mon serveur Soutien Eux?
Imagify dispose d'un paramètre automatique pour l'activer sur votre serveur. La plupart des optimiseurs d'images qui convertissent en WEBP le font. Il vérifiera et vous dira si votre serveur ne servira pas d'images WEBP. Fondamentalement, ce qui doit se produire, c'est que WordPress doit réécrire vos fichiers image de l'une des deux manières suivantes pour fonctionner. Certains serveurs le permettent, d'autres non :
Le meilleur moyen est d'utiliser des balises d'image. Il s'agit d'une commande HTML5 qui remplacera le
partie à un étiqueter
Kinsta est NGINX et est déjà configuré pour WEBP au cas où vous auriez une configuration de serveur non compatible.
Combien de temps cela prend-il?
Imagify est un processus automatisé très rapide. Le temps nécessaire dépend vraiment de la taille des images que vous utilisez. Une image normale de moins de 1 Mo prendra quelques secondes pour être optimisée.
Pensez à multiplier par 4 le nombre d'images affichées dans votre médiathèque pour permettre d'optimiser toutes les tailles responsive. Supposons donc que vous ayez 100 images, 400 seront optimisées. Multipliez cela par une moyenne de 5 secondes chacun et vous obtenez l’idée. Cela prendra un peu plus d’une demi-heure.
Les images plus grandes peuvent prendre plus de temps et les boutiques peuvent prendre beaucoup de temps à terminer. Par exemple, si vous disposez de 10 000 images de médiathèque, vous devez optimiser 40 000 images responsives. Multipliez cela par 5 secondes chacun et vous obtenez 2/3 jours pour optimiser vos images.
Cependant, le site Web moyen est loin d'avoir autant d'images, le processus devrait donc être terminé en une heure environ.
Imagify – Regardez la vidéo
Grâce à Éminence Web Pour la vidéo
Satisfait des résultats ?
Vous avez donc réalisé toutes vos images. Allez vider à nouveau tous vos caches et exécutez un vitesse de page test. Vous remarquerez désormais que votre site Web se charge beaucoup plus rapidement, en particulier sur les appareils mobiles.
Une fois que vous êtes satisfait de vos images, passez à l’étape suivante. La prochaine partie du processus d'optimisation est la section de mise en cache WP-Rocket, qui fera grimper encore plus vos scores.
Prêt à continuer?
Étape 5 : mise en cache du navigateur
Améliorons encore ces scores
Comment Optimiser Vos images
Une question de marque
Imagify propose trois niveaux d'optimisation : standard, agressif et ultra. Ces niveaux concernent essentiellement la qualité de l’image. L'un des inconvénients de l'optimisation de l'image est que vous perdez en qualité d'image. Il est petit et normalement imperceptible, mais il peut devenir perceptible si vous tenez à une qualité d'image ultra élevée. Ce serait souvent le cas sur des sites Web comme des sites de photographie, d’art ou de bijoux, etc.
Le fait-il Dégrader Beaucoup d’images ?
Cela dépend en grande partie du type d’images que vous utilisez. Par exemple, la qualité standard ne les dégradera pas du tout, alors que la qualité ultra les pixellisera quelque peu, mais pas trop. Ce site Web est défini sur la qualité « agressive » à titre d'exemple. L'avantage étant que les images sont beaucoup plus petites que le réglage standard et donc un chargement plus rapide, avec pratiquement aucune perte de qualité d'image.
Certaines personnes optent directement pour le réglage ultra et remarquent vraiment la différence. Lorsque vous commencez à optimiser, assurez-vous de cocher la case pour conserver les originaux. De cette façon, si vous n’aimez pas le réglage ultra, vous pouvez revenir à une qualité supérieure.
Généralement, le paramètre agressif dégradera la qualité de vos images d'environ 15% jusqu'à un niveau de 85%. Ceci est imperceptible à l’œil humain et constitue le cadre le plus courant. Si la qualité de l'image n'est pas vitale ou si vous utilisez des graphiques de style dessin animé plutôt que des photos, optez pour l'ultra. C'est toujours parfaitement acceptable. Normalement, avec un réglage ultra, vous réduirez d'environ 85% la taille de votre image. Cela signifie qu'une image de 1 Mo diminuera jusqu'à une taille comprise entre 100 et 150 lb, ce qui fait une énorme différence dans le temps de chargement de la page et les scores de vitesse de la page.
Puis-je Faire tout Mes images une fois ?
Oui, vous pouvez – regardez la vidéo pour un guide sur le fonctionnement d’Imagify. Un bon conseil est d’inclure également votre dossier de thème dans les optimisations. Votre thème contiendra de nombreuses images, dont certaines seront utilisées autour de votre site Web. En insérant vos images de thème, vous maximiserez les images que vous pouvez optimiser sur votre site Web.
Pour évaluer le nombre d’images que vous devez optimiser, consultez votre médiathèque. Il vous dira combien d'images vous avez. Multipliez ensuite cela par 4 (en moyenne). En effet, WordPress crée plusieurs versions de vos images pour un design réactif (vignette, 300 x 300 px, etc.). Vous devez optimiser chaque version de chaque image pour bénéficier de tous les avantages de l'optimisation des images sur tous les appareils.
Optimisation manuelle
L'optimisation manuelle des images est vraiment destinée aux puristes. L'un des avantages est que vous téléchargez une image entièrement optimisée, à la bonne taille et que vous n'avez donc pas besoin d'exécuter de logiciel d'optimisation d'image. Vous économisez également de l'espace sur le serveur car vous n'y avez pas d'images en taille réelle. Cependant, cela prend beaucoup de temps, donc pour la plupart des gens, je recommanderais simplement d'utiliser Imagify.
J'ai Le temps – De quoi s'agit-il ?
Tout d'abord, vous devez connaître les dimensions de l'image que vous utilisez. Il existe un bon guide sur tailles d'image et bonnes pratiques sur cette page. Une fois que vous connaissez la taille de vos images, vous pouvez recadrer n'importe quelle grande image à sa taille exacte à l'aide de n'importe quel outil logiciel d'image. Paint.net est gratuit et normalement suffisant pour cela.
Après avoir créé vos images à la bonne taille, vous pouvez les optimiser à l'aide d'un outil en ligne. L'un des meilleurs qui existe depuis des années est TinyPNG.com. Il vous suffit de télécharger vos images, puis de télécharger la version beaucoup plus petite qui sera créée. Deux conseils lors du téléchargement de ces images sur WordPress :
Tout d'abord, cela semble idiot, mais assurez-vous de télécharger la version nouvellement optimisée sur votre site Web à partir du dossier « Téléchargements ». Il est si facile de télécharger une mauvaise image depuis votre bureau ou depuis l'endroit où vous stockez vos images. Deuxièmement, utilisez un nom légèrement différent pour le nouveau titre de l'image. C'est à cause de la mise en cache. Votre installation WordPress peut ne pas reconnaître la nouvelle taille de l'image pendant un certain temps si vous téléchargez l'image avec le même nom de fichier.
Après avoir fait cela, vous pouvez aller plus loin et convertir les images nouvellement optimisées au format WEBP. Faites-le avant de les télécharger. Allez au CloudConvert site web. Il suit exactement le même processus que TinyPNG, sauf qu'il faut choisir de les convertir en WEBP. Téléchargez ensuite les fichiers et téléchargez-les sur votre serveur.
Utiliser un logiciel tel qu'Imagify est beaucoup plus simple, mais au final, vous aurez téléchargé des images brutes optimisées, vous n'aurez donc pas besoin d'utiliser des outils de conversion d'image ou d'exécuter des conversions WEBP en permanence.
Dois-je utiliser WEBP ?
WEBP est un format d'image plus récent développé par Google. Ses images sont beaucoup plus petites que les formats JPG et PNG traditionnels et donc oui, vous devriez les utiliser – à condition que votre serveur prenne en charge la conversion des images traditionnelles en WEBP.
WEBP a en fait vu le jour en 2010, mais malgré cela, il est toujours considéré comme un format « émergent ». Vous lirez peut-être que vous avez besoin des images JPG / PNG originales comme solution de secours ainsi que des formats WEBP, mais la vérité est que Chrome, Firefox, Safari et tous les autres principaux navigateurs les prennent en charge, donc n'avoir que des versions WEBP est désormais acceptable.
Est-ce que mon serveur Soutien Eux?
Imagify dispose d'un paramètre automatique pour l'activer sur votre serveur. La plupart des optimiseurs d'images qui convertissent en WEBP le font. Il vérifiera et vous dira si votre serveur ne servira pas d'images WEBP. Fondamentalement, ce qui doit se produire, c'est que WordPress doit réécrire vos fichiers image de l'une des deux manières suivantes pour fonctionner. Certains serveurs le permettent, d'autres non :
Le meilleur moyen est d'utiliser des balises d'image. Il s'agit d'une commande HTML5 qui remplacera le
partie à un étiqueter
Kinsta est NGINX et est déjà configuré pour WEBP au cas où vous auriez une configuration de serveur non compatible.
Combien de temps cela prend-il?
Imagify est un processus automatisé très rapide. Le temps nécessaire dépend vraiment de la taille des images que vous utilisez. Une image normale de moins de 1 Mo prendra quelques secondes pour être optimisée.
Pensez à multiplier par 4 le nombre d'images affichées dans votre médiathèque pour permettre d'optimiser toutes les tailles responsive. Supposons donc que vous ayez 100 images, 400 seront optimisées. Multipliez cela par une moyenne de 5 secondes chacun et vous obtenez l’idée. Cela prendra un peu plus d’une demi-heure.
Les images plus grandes peuvent prendre plus de temps et les boutiques peuvent prendre beaucoup de temps à terminer. Par exemple, si vous disposez de 10 000 images de médiathèque, vous devez optimiser 40 000 images responsives. Multipliez cela par 5 secondes chacun et vous obtenez 2/3 jours pour optimiser vos images.
Cependant, le site Web moyen est loin d'avoir autant d'images, le processus devrait donc être terminé en une heure environ.
Imagify – Regardez la vidéo
Grâce à Éminence Web Pour la vidéo
Vous avez donc réalisé toutes vos images. Allez vider à nouveau tous vos caches et exécutez un test de vitesse de page. Vous remarquerez désormais que votre site Web se charge beaucoup plus rapidement, en particulier sur les appareils mobiles.
Une fois que vous êtes satisfait de vos images, passez à l’étape suivante. La prochaine partie du processus d'optimisation est la section de mise en cache WP-Rocket, qui fera grimper encore plus vos scores.
Prêt à continuer?
Étape 5 : mise en cache du navigateur
Améliorons encore ces scores
Optimiser Vos images
l'image de marque
Imagify propose trois niveaux d'optimisation : standard, agressif et ultra. Ces niveaux concernent essentiellement la qualité de l’image. L'un des inconvénients de l'optimisation de l'image est que vous perdez en qualité d'image. Il est petit et normalement imperceptible, mais il peut devenir perceptible si vous tenez à une qualité d'image ultra élevée. Ce serait souvent le cas sur des sites Web comme des sites de photographie, d’art ou de bijoux, etc.
Le fait-il Dégrader Beaucoup d’images ?
Cela dépend en grande partie du type d’images que vous utilisez. Par exemple, la qualité standard ne les dégradera pas du tout, alors que la qualité ultra les pixellisera quelque peu, mais pas trop. Ce site Web est configuré en ultra qualité à titre d'exemple. L'avantage étant que les images sont beaucoup plus petites en ultra et donc un chargement plus rapide que même le réglage agressif.
Certaines personnes optent directement pour le réglage ultra et remarquent vraiment la différence. Lorsque vous commencez à optimiser, assurez-vous de cocher la case pour conserver les originaux. De cette façon, si vous n’aimez pas le réglage ultra, vous pouvez revenir à une qualité supérieure.
Généralement, le paramètre agressif dégradera la qualité de vos images d'environ 15% jusqu'à un niveau de 85%. Ceci est imperceptible à l’œil humain et constitue le cadre le plus courant. Si la qualité de l'image n'est pas vitale ou si vous utilisez des graphiques de style dessin animé plutôt que des photos, optez pour l'ultra. C'est toujours parfaitement acceptable. Normalement, avec un réglage ultra, vous réduirez d'environ 85% la taille de votre image. Cela signifie qu'une image de 1 Mo diminuera jusqu'à une taille comprise entre 100 et 150 lb, ce qui fait une énorme différence dans le temps de chargement de la page et les scores de vitesse de la page.
Puis-je Faire tout Mes images une fois ?
Oui, vous pouvez – regardez la vidéo pour un guide sur le fonctionnement d’Imagify. Un bon conseil est d’inclure également votre dossier de thème dans les optimisations. Votre thème contiendra de nombreuses images, dont certaines seront utilisées autour de votre site Web. En insérant vos images de thème, vous maximiserez les images que vous pouvez optimiser sur votre site Web.
Pour évaluer le nombre d’images que vous devez optimiser, consultez votre médiathèque. Il vous dira combien d'images vous avez. Multipliez ensuite cela par 4 (en moyenne). En effet, WordPress crée plusieurs versions de vos images pour un design réactif (vignette, 300 x 300 px, etc.). Vous devez optimiser chaque version de chaque image pour bénéficier de tous les avantages de l'optimisation des images sur tous les appareils.
Optimisation manuelle
L'optimisation manuelle des images est vraiment destinée aux puristes. L'un des avantages est que vous téléchargez une image entièrement optimisée, à la bonne taille et que vous n'avez donc pas besoin d'exécuter de logiciel d'optimisation d'image. Vous économisez également de l'espace sur le serveur car vous n'y avez pas d'images en taille réelle. Cependant, cela prend beaucoup de temps, donc pour la plupart des gens, je recommanderais simplement d'utiliser Imagify.
J'ai Le temps – De quoi s'agit-il ?
Tout d'abord, vous devez connaître les dimensions de l'image que vous utilisez. Il existe un bon guide sur tailles d'image et bonnes pratiques sur cette page. Une fois que vous connaissez la taille de vos images, vous pouvez recadrer n'importe quelle grande image à sa taille exacte à l'aide de n'importe quel outil logiciel d'image. Paint.net est gratuit et normalement suffisant pour cela.
Après avoir créé vos images à la bonne taille, vous pouvez les optimiser à l'aide d'un outil en ligne. L'un des meilleurs qui existe depuis des années est TinyPNG.com. Il vous suffit de télécharger vos images, puis de télécharger la version beaucoup plus petite qui sera créée. Deux conseils lors du téléchargement de ces images sur WordPress :
Tout d'abord, cela semble idiot, mais assurez-vous de télécharger la version nouvellement optimisée sur votre site Web à partir du dossier « Téléchargements ». Il est si facile de télécharger une mauvaise image depuis votre bureau ou depuis l'endroit où vous stockez vos images. Deuxièmement, utilisez un nom légèrement différent pour le nouveau titre de l'image. C'est à cause de la mise en cache. Votre installation WordPress peut ne pas reconnaître la nouvelle taille de l'image pendant un certain temps si vous téléchargez l'image avec le même nom de fichier.
Après avoir fait cela, vous pouvez aller plus loin et convertir les images nouvellement optimisées au format WEBP. Faites-le avant de les télécharger. Allez au CloudConvert site web. Il suit exactement le même processus que TinyPNG, sauf qu'il faut choisir de les convertir en WEBP. Téléchargez ensuite les fichiers et téléchargez-les sur votre serveur.
Utiliser un logiciel tel qu'Imagify est beaucoup plus simple, mais au final, vous aurez téléchargé des images brutes optimisées, vous n'aurez donc pas besoin d'utiliser des outils de conversion d'image ou d'exécuter des conversions WEBP en permanence.
Dois-je utiliser WEBP ?
WEBP est un format d'image plus récent développé par Google. Ses images sont beaucoup plus petites que les formats JPG et PNG traditionnels et donc oui, vous devriez les utiliser – à condition que votre serveur prenne en charge la conversion des images traditionnelles en WEBP.
WEBP a en fait vu le jour en 2010, mais malgré cela, il est toujours considéré comme un format « émergent ». Vous lirez peut-être que vous avez besoin des images JPG / PNG originales comme solution de secours ainsi que des formats WEBP, mais la vérité est que Chrome, Firefox, Safari et tous les autres principaux navigateurs les prennent en charge, donc n'avoir que des versions WEBP est désormais acceptable.
Est-ce que mon serveur Soutien Eux?
Imagify dispose d'un paramètre automatique pour l'activer sur votre serveur. La plupart des optimiseurs d'images qui convertissent en WEBP le font. Il vérifiera et vous dira si votre serveur ne servira pas d'images WEBP. Fondamentalement, ce qui doit se produire, c'est que WordPress doit réécrire vos fichiers image de l'une des deux manières suivantes pour fonctionner. Certains serveurs le permettent, d'autres non :
Le meilleur moyen est d'utiliser des balises d'image. Il s'agit d'une commande HTML5 qui remplacera le
partie à un étiqueter
Kinta est NGINX et est déjà configuré pour WEBP au cas où vous auriez une configuration de serveur non compatible.
Est-ce rapide ?
Imagify est un processus automatisé très rapide. Le temps nécessaire dépend vraiment de la taille des images que vous utilisez. Une image normale de moins de 1 Mo prendra quelques secondes pour être optimisée.
Pensez à multiplier par 4 le nombre d'images affichées dans votre médiathèque pour permettre d'optimiser toutes les tailles responsive. Supposons donc que vous ayez 100 images, 400 seront optimisées. Multipliez cela par une moyenne de 5 secondes chacun et vous obtenez l’idée. Cela prendra un peu plus d’une demi-heure.
Les images plus grandes peuvent prendre plus de temps et les boutiques peuvent prendre beaucoup de temps à terminer. Par exemple, si vous disposez de 10 000 images de médiathèque, vous devez optimiser 40 000 images responsives. Multipliez cela par 5 secondes chacun et vous obtenez 2/3 jours pour optimiser vos images.
Cependant, le site Web moyen est loin d'avoir autant d'images, le processus devrait donc être terminé en une heure environ.
Imagify – Regardez la vidéo
Grâce à Éminence Web Pour la vidéo
Satisfait de vos résultats ?
Vous avez donc réalisé toutes vos images. Allez vider à nouveau tous vos caches et exécutez un test de vitesse de page. Vous remarquerez désormais que votre site Web se charge beaucoup plus rapidement, en particulier sur les appareils mobiles.
Une fois que vous êtes satisfait de vos images, passez à l’étape suivante. La prochaine partie du processus d'optimisation est la section de mise en cache WP-Rocket, qui fera grimper encore plus vos scores.
Prêt à continuer?
Étape 5 : mise en cache du navigateur
Améliorons encore ces scores