{"id":24157,"date":"2024-01-07T12:45:44","date_gmt":"2024-01-07T12:45:44","guid":{"rendered":"https:\/\/yorkshiredesign.co.uk\/?page_id=24157"},"modified":"2025-04-17T12:01:12","modified_gmt":"2025-04-17T11:01:12","slug":"optimisation-des-images","status":"publish","type":"page","link":"https:\/\/yorkshiredesign.co.uk\/fr\/guide-de-vitesse-de-page\/optimisation-des-images\/","title":{"rendered":"Optimisation des images"},"content":{"rendered":"
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Image Optimisation<\/span><\/h1>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Presser<\/span> Ces Ko<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Service<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

L'optimisation de l'image affine votre site Web<\/p>\n

Moins de poids, plus de vitesse<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Aller sur Imagify<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tAller sur Imagify\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a> <\/div>\n <\/div>\n<\/div>
\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Qu'est-ce que Image<\/span> Optimisation?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

L'optimisation des images est un processus tr\u00e8s simple. C\u2019est \u00e9galement la chose qui acc\u00e9l\u00e9rera le plus votre site, surtout si vous avez un site Web riche en images. Essentiellement, optimiser une image consiste simplement \u00e0 r\u00e9duire la taille du fichier. La technologie est en constante \u00e9volution et de nos jours, les meilleurs formats d'image \u00e0 utiliser sont WEBP et AVIF. Les deux formats sont enti\u00e8rement pris en charge par les navigateurs modernes et des informations d\u00e9taill\u00e9es sur l'aspect technique de ces techniques de compression d'images sont disponibles sur Ce d\u00e9veloppeur Web<\/strong><\/a> page.<\/p>\n

En raison de la qualit\u00e9 des appareils photo modernes et des images de stock disponibles, la taille des fichiers image peut \u00eatre tr\u00e8s volumineuse \u2013 certains peuvent m\u00eame atteindre 5 \u00e0 10\u00a0Mo, voire plus. Les images de cette taille ne peuvent tout simplement pas \u00eatre utilis\u00e9es sur des sites Web, car elles prennent beaucoup trop de temps \u00e0 t\u00e9l\u00e9charger et risquent d'affecter votre scores de vitesse de page<\/a> mal. Ce que vous devez faire, c'est les r\u00e9duire en taille. C'est l\u00e0 qu'intervient le logiciel d'optimisation d'image.<\/p>\n

L'optimisation des images peut \u00eatre effectu\u00e9e de deux mani\u00e8res\u00a0: soit manuellement, soit avec un logiciel. La m\u00e9thode manuelle est id\u00e9ale si vous r\u00e9alisez un nouveau site internet<\/a>, mais pour les sites Web existants contenant souvent des centaines d\u2019images ou plus, il est beaucoup plus efficace d\u2019opter pour un logiciel d\u2019optimisation d\u2019images. Il existe de nombreux plugins d'optimisation d'image disponibles, mais celui que je recommande le plus est Imaginer<\/strong><\/a>. Il est gratuit jusqu'\u00e0 200 images par mois, prend en charge WEBP et, d'apr\u00e8s mon exp\u00e9rience, fonctionne avec tous les types de sites Web.<\/p>\n

Comme auparavant, je fournirai une bonne vid\u00e9o pr\u00e9sentant ses principales fonctionnalit\u00e9s, tout en \u00e9crivant des conseils et des \u00e9l\u00e9ments \u00e0 surveiller en cours de route.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Presser<\/span> Ces Ko<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Service<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

L'optimisation de l'image affine votre site Web<\/p>\n

Moins de poids, plus de vitesse<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n Aller sur Imagify<\/span>\n \t

\n\t \t\n\t \t\t\n\t \t\t\tAller sur Imagify\t\t\t\t<\/span>\t\n\t \t<\/span>\n\t \t\t \t
<\/div>\n\t <\/div>\n\t<\/a>\n\t
\n\t\t
\n\t\t\t

Qu'est-ce que Image<\/span> Optimisation?<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

L'optimisation des images est un processus tr\u00e8s simple. C\u2019est \u00e9galement la chose qui acc\u00e9l\u00e9rera le plus votre site, surtout si vous avez un site Web riche en images. Essentiellement, optimiser une image consiste simplement \u00e0 r\u00e9duire la taille du fichier. La technologie est en constante \u00e9volution et de nos jours, les meilleurs formats d'image \u00e0 utiliser sont WEBP et AVIF. Les deux formats sont enti\u00e8rement pris en charge par les navigateurs modernes et des informations d\u00e9taill\u00e9es sur l'aspect technique de ces techniques de compression d'images sont disponibles sur Ce d\u00e9veloppeur Web<\/strong><\/a> page.<\/p>\n

En raison de la qualit\u00e9 des appareils photo modernes et des images de stock disponibles, la taille des fichiers image peut \u00eatre tr\u00e8s volumineuse \u2013 certains peuvent m\u00eame atteindre 5 \u00e0 10\u00a0Mo, voire plus. Les images de cette taille ne peuvent tout simplement pas \u00eatre utilis\u00e9es sur des sites Web, car leur t\u00e9l\u00e9chargement prend beaucoup trop de temps et affectera consid\u00e9rablement vos scores de vitesse de page. Ce que vous devez faire, c'est les r\u00e9duire en taille. C'est l\u00e0 qu'intervient le logiciel d'optimisation d'image.<\/p>\n

L'optimisation des images peut \u00eatre effectu\u00e9e de deux mani\u00e8res\u00a0: soit manuellement, soit avec un logiciel. La m\u00e9thode manuelle est id\u00e9ale si vous cr\u00e9ez 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<\/strong><\/a>. Il est gratuit jusqu'\u00e0 200 images par mois, prend en charge WEBP et, d'apr\u00e8s mon exp\u00e9rience, fonctionne avec tous les types de sites Web.<\/p>\n

Comme auparavant, je fournirai une bonne vid\u00e9o pr\u00e9sentant ses principales fonctionnalit\u00e9s, tout en \u00e9crivant des conseils et des \u00e9l\u00e9ments \u00e0 surveiller en cours de route.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Qu'est-ce que Image<\/span> Optimisation?<\/h1>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

L'optimisation des images est un processus simple. C\u2019est \u00e9galement la chose qui acc\u00e9l\u00e9rera le plus votre site, surtout si vous avez un site Web riche en images. Essentiellement, optimiser une image consiste simplement \u00e0 r\u00e9duire la taille du fichier.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t\n\t\t
\n\t\t\t
\"Service<\/div>\n\t\t<\/figure>\n\t<\/div>\n\n\t
\n\t\t
\n\t\t\t

La technologie est en constante \u00e9volution et de nos jours, les meilleurs formats d'image \u00e0 utiliser sont WEBP et AVIF.<\/p>\n

Les deux formats sont enti\u00e8rement pris en charge par les navigateurs modernes et des informations d\u00e9taill\u00e9es sur l'aspect technique de ces techniques de compression d'images sont disponibles sur Ce d\u00e9veloppeur Web<\/strong><\/a> page.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t

En raison de la qualit\u00e9 des appareils photo modernes et des images de stock disponibles, la taille des fichiers image peut \u00eatre tr\u00e8s volumineuse \u2013 certains peuvent m\u00eame atteindre 5 \u00e0 10\u00a0Mo, voire plus. Les images de cette taille ne peuvent tout simplement pas \u00eatre utilis\u00e9es sur des sites Web, car leur t\u00e9l\u00e9chargement prend beaucoup trop de temps et affectera consid\u00e9rablement vos scores de vitesse de page. Ce que vous devez faire, c'est les r\u00e9duire en taille. C'est l\u00e0 qu'intervient le logiciel d'optimisation d'image.<\/p>\n

L'optimisation des images peut \u00eatre effectu\u00e9e de deux mani\u00e8res\u00a0: soit manuellement, soit avec un logiciel. La m\u00e9thode manuelle est id\u00e9ale si vous cr\u00e9ez 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.<\/p>\n

Il existe de nombreux plugins d'optimisation d'image disponibles, mais celui que je recommande le plus est Imaginer<\/strong><\/a>. Il est gratuit jusqu'\u00e0 200 images par mois, prend en charge WEBP et, d'apr\u00e8s mon exp\u00e9rience, fonctionne avec tous les types de sites Web.<\/p>\n

Comme auparavant, je fournirai une bonne vid\u00e9o pr\u00e9sentant ses principales fonctionnalit\u00e9s, tout en \u00e9crivant des conseils et des \u00e9l\u00e9ments \u00e0 surveiller en cours de route.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>

<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Comment utiliser Imaginer<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

<\/div>
<\/span><\/div><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Comment Optimiser<\/span> Vos images<\/h2>\n\n\t\t<\/div>\n\t<\/div>\n
\n
\n

\n \n <\/span>\n <\/span>\n <\/span>\n Une question de marque<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify propose trois niveaux d'optimisation : standard, agressif et ultra. Ces niveaux concernent essentiellement la qualit\u00e9 de l\u2019image. L'un des inconv\u00e9nients de l'optimisation de l'image est que vous perdez en qualit\u00e9 d'image. Il est petit et normalement imperceptible, mais il peut devenir perceptible si vous tenez \u00e0 une qualit\u00e9 d'image ultra \u00e9lev\u00e9e. Ce serait souvent le cas sur des sites Web comme des sites de photographie, d\u2019art ou de bijoux, etc.<\/p>\n

Le fait-il D\u00e9grader<\/span> Beaucoup d\u2019images ?<\/p>\n

Cela d\u00e9pend en grande partie du type d\u2019images que vous utilisez. Par exemple, la qualit\u00e9 standard ne les d\u00e9gradera pas du tout, alors que la qualit\u00e9 ultra les pixellisera quelque peu, mais pas trop. Ce site Web est d\u00e9fini sur la qualit\u00e9 \u00ab\u00a0agressive\u00a0\u00bb \u00e0 titre d'exemple. L'avantage \u00e9tant que les images sont beaucoup plus petites que le r\u00e9glage standard et donc un chargement plus rapide, avec pratiquement aucune perte de qualit\u00e9 d'image.<\/p>\n

Certaines personnes optent directement pour le r\u00e9glage ultra et remarquent vraiment la diff\u00e9rence. Lorsque vous commencez \u00e0 optimiser, assurez-vous de cocher la case pour conserver les originaux<\/strong>. De cette fa\u00e7on, si vous n\u2019aimez pas le r\u00e9glage ultra, vous pouvez revenir \u00e0 une qualit\u00e9 sup\u00e9rieure.<\/p>\n

G\u00e9n\u00e9ralement, le param\u00e8tre agressif d\u00e9gradera la qualit\u00e9 de vos images d'environ 15% jusqu'\u00e0 un niveau de 85%. Ceci est imperceptible \u00e0 l\u2019\u0153il humain et constitue le cadre le plus courant. Si la qualit\u00e9 de l'image n'est pas vitale ou si vous utilisez des graphiques de style dessin anim\u00e9 plut\u00f4t que des photos, optez pour l'ultra. C'est toujours parfaitement acceptable. Normalement, avec un r\u00e9glage ultra, vous r\u00e9duirez d'environ 85% la taille de votre image. Cela signifie qu'une image de 1\u00a0Mo diminuera jusqu'\u00e0 une taille comprise entre 100 et 150\u00a0lb, ce qui fait une \u00e9norme diff\u00e9rence dans la taille de l'image. temps de chargement des pages et vitesse de la page<\/a> scores.<\/p>\n

Puis-je Faire tout<\/span> Mes images une fois ?<\/p>\n

Oui, vous pouvez \u2013 regardez la vid\u00e9o pour un guide sur le fonctionnement d\u2019Imagify. UN le meilleur conseil est d'inclure \u00e9galement votre th\u00e8me<\/a> dossier dans les optimisations. Votre th\u00e8me contiendra de nombreuses images, dont certaines seront utilis\u00e9es autour de votre site Web. En ins\u00e9rant vos images de th\u00e8me, vous maximiserez les images que vous pouvez optimiser sur votre site Web.<\/p>\n

Pour \u00e9valuer le nombre d\u2019images que vous devez optimiser, consultez votre m\u00e9diath\u00e8que. Il vous dira combien d'images vous avez. Multipliez ensuite cela par 4 (en moyenne). En effet, WordPress cr\u00e9e plusieurs versions de vos images pour un design r\u00e9actif (vignette, 300 x 300 px, etc.). Vous devez optimiser chaque version de chaque image<\/a> pour b\u00e9n\u00e9ficier de tous les avantages de l\u2019optimisation des images sur tous les appareils.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Optimisation manuelle<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

L'optimisation manuelle des images est vraiment destin\u00e9e aux puristes. L'un des avantages est que vous t\u00e9l\u00e9chargez une image enti\u00e8rement optimis\u00e9e, \u00e0 la bonne taille et que vous n'avez donc pas besoin d'ex\u00e9cuter de logiciel d'optimisation d'image. Vous \u00e9conomisez \u00e9galement de l'espace sur le serveur car vous n'y avez pas d'images en taille r\u00e9elle. Cependant, cela prend beaucoup de temps, donc pour la plupart des gens, je recommanderais simplement d'utiliser Imagify.<\/p>\n

J'ai Le temps<\/span> \u2013 De quoi s'agit-il ?<\/p>\n

Tout d'abord, vous devez conna\u00eetre les dimensions de l'image que vous utilisez. Il existe un bon guide sur tailles d'image et bonnes pratiques<\/strong><\/a> sur cette page. Une fois que vous connaissez la taille de vos images, vous pouvez recadrer n'importe quelle grande image \u00e0 sa taille exacte \u00e0 l'aide de n'importe quel outil logiciel d'image. Paint.net<\/strong><\/a> est gratuit et normalement suffisant pour cela.<\/p>\n

Apr\u00e8s avoir cr\u00e9\u00e9 vos images \u00e0 la bonne taille, vous pouvez les optimiser \u00e0 l'aide d'un outil en ligne. L'un des meilleurs qui existe depuis des ann\u00e9es est TinyPNG.com<\/strong><\/a>. Il vous suffit de t\u00e9l\u00e9charger vos images, puis de t\u00e9l\u00e9charger la version beaucoup plus petite qui sera cr\u00e9\u00e9e. Deux conseils lors du t\u00e9l\u00e9chargement de ces images sur WordPress\u00a0:<\/p>\n

Tout d'abord, cela semble idiot, mais assurez-vous de t\u00e9l\u00e9charger la version nouvellement optimis\u00e9e sur votre site Web \u00e0 partir du dossier \u00ab T\u00e9l\u00e9chargements \u00bb. Il est si facile de t\u00e9l\u00e9charger une mauvaise image depuis votre bureau ou depuis l'endroit o\u00f9 vous stockez vos images. Deuxi\u00e8mement, utilisez un nom l\u00e9g\u00e8rement diff\u00e9rent pour le nouveau titre de l'image. C'est \u00e0 cause de la mise en cache. Votre installation WordPress peut ne pas reconna\u00eetre la nouvelle taille de l'image pendant un certain temps si vous t\u00e9l\u00e9chargez l'image avec le m\u00eame nom de fichier.<\/p>\n

Apr\u00e8s avoir fait cela, vous pouvez aller plus loin et convertir les images nouvellement optimis\u00e9es au format WEBP. Faites-le avant de les t\u00e9l\u00e9charger. Allez au CloudConvert<\/strong><\/a> site web. Il suit exactement le m\u00eame processus que TinyPNG, sauf qu'il faut choisir de les convertir en WEBP. T\u00e9l\u00e9chargez ensuite les fichiers et t\u00e9l\u00e9chargez-les sur votre serveur.<\/p>\n

Utiliser un logiciel tel qu'Imagify est beaucoup plus simple, mais au final, vous aurez t\u00e9l\u00e9charg\u00e9 des images brutes optimis\u00e9es, vous n'aurez donc pas besoin d'utiliser des outils de conversion d'image ou d'ex\u00e9cuter des conversions WEBP en permanence.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Dois-je utiliser WEBP\u00a0?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

WEBP est un format d'image plus r\u00e9cent d\u00e9velopp\u00e9 par Google. Ses images sont beaucoup plus petites que les formats JPG et PNG traditionnels et donc oui, vous devriez les utiliser \u2013 \u00e0 condition que votre serveur prenne en charge la conversion des images traditionnelles en WEBP.<\/p>\n

WEBP a en fait vu le jour en 2010, mais malgr\u00e9 cela, il est toujours consid\u00e9r\u00e9 comme un format \u00ab \u00e9mergent \u00bb. Vous lirez peut-\u00eatre que vous avez besoin des images JPG \/ PNG originales comme solution de secours ainsi que des formats WEBP, mais la v\u00e9rit\u00e9 est que Chrome, Firefox, Safari et tous les autres principaux navigateurs les prennent en charge, donc n'avoir que des versions WEBP est d\u00e9sormais acceptable.<\/p>\n

Est-ce que mon serveur Soutien<\/span> Eux?<\/p>\n

Imagify dispose d'un param\u00e8tre automatique pour l'activer sur votre serveur. La plupart des optimiseurs d'images qui convertissent en WEBP le font. Il v\u00e9rifiera et vous dira si votre serveur ne servira pas d'images WEBP. Fondamentalement, ce qui doit se produire, c'est que WordPress doit r\u00e9\u00e9crire vos fichiers image de l'une des deux mani\u00e8res suivantes pour fonctionner. Certains serveurs le permettent, d'autres non\u00a0:<\/p>\n

Le meilleur moyen est d'utiliser des balises d'image. Il s'agit d'une commande HTML5 qui remplacera le partie \u00e0 un \u00e9tiqueter. C'est assez simple, mais tous les serveurs ne le prennent pas en charge. La deuxi\u00e8me fa\u00e7on consiste \u00e0 r\u00e9\u00e9crire les fichiers via le fichier .htaccess. Ce n'est pas la mani\u00e8re pr\u00e9f\u00e9r\u00e9e de proc\u00e9der car cela ajoute aux requ\u00eates du serveur lors du chargement de la page. Cependant, il est toujours avantageux d\u2019utiliser WEBP si vous devez proc\u00e9der de cette fa\u00e7on.<\/picture>\n

Kinsta est NGINX et est d\u00e9j\u00e0 configur\u00e9 pour WEBP au cas o\u00f9 vous auriez une configuration de serveur non compatible.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div>

\n

\n \n <\/span>\n <\/span>\n <\/span>\n Combien de temps cela prend-il?<\/span>\n <\/h3>\n<\/div>\n
\n
\n \n\t
\n\t\t
\n\t\t\t

Imagify est un processus automatis\u00e9 tr\u00e8s rapide. Le temps n\u00e9cessaire d\u00e9pend vraiment de la taille des images que vous utilisez. Une image normale de moins de 1 Mo prendra quelques secondes pour \u00eatre optimis\u00e9e.<\/p>\n

Pensez \u00e0 multiplier par 4 le nombre d'images affich\u00e9es dans votre m\u00e9diath\u00e8que pour permettre d'optimiser toutes les tailles responsive. Supposons donc que vous ayez 100 images, 400 seront optimis\u00e9es. Multipliez cela par une moyenne de 5 secondes chacun et vous obtenez l\u2019id\u00e9e. Cela prendra un peu plus d\u2019une demi-heure.<\/p>\n

Les images plus grandes peuvent prendre plus de temps et les boutiques peuvent prendre beaucoup de temps \u00e0 terminer. Par exemple, si vous disposez de 10\u00a0000 images de m\u00e9diath\u00e8que, vous devez optimiser 40\u00a0000 images responsives. Multipliez cela par 5 secondes chacun et vous obtenez 2\/3 jours pour optimiser vos images.<\/p>\n

Cependant, le site Web moyen est loin d'avoir autant d'images, le processus devrait donc \u00eatre termin\u00e9 en une heure environ.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n <\/div>\n<\/div><\/div><\/div><\/div><\/div>

\n\t
\n\t\t
\n\t\t\t

Imagify \u2013 Regardez la vid\u00e9o<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

\n\t\t
\n\t\t\t\n\t\t\t