Optimisez vos photographies pour un affichage rapide

La star de votre photoblog, ce sont vos photographies. Comment les optimiser, pour un affichage plus rapide, sans pour autant perdre (trop) en qualité ? Y a-t-il une solution miracle ? Penchons nous sur la question…

Cet article prend 7 minutes à lire et comporte 1650 mots.

Vous le savez. Et si vous ne le savez pas encore, vous l’ap­pren­drez vite — à vos dépends. La rapi­di­té de char­ge­ment d’un site est primordiale.

Primordiale pour que l’in­ter­naute ne reparte pas avant d’a­voir char­gé la page, pour qu’il visite votre site en sui­vant, et pour qu’il revienne.

Vous avez peut-être une connexion à très haut débit, mais ce n’est pas le cas de tout le monde. Votre visi­teur fait-il par­tie des 44% des fran­çais à béné­fi­cier comme vous d’un accès très rapide à Internet ? Et s’il consulte votre site depuis un smart­phone ou une tablette, est-il en 3G, H+, 4G ?

Alors, autant opti­mi­ser votre site, et l’op­ti­mi­sa­tion du site passe par l’op­ti­mi­sa­tion des images — donc de vos photographies.

Rassurez-vous, ça ne fait pas mal ! C’est rapide à mettre en œuvre, simple à uti­li­ser, et les tarifs vont du gra­tuit à plus que raisonnable.

Et le gain est plus qu’in­té­res­sant (jus­qu’à 80%, en fonc­tion de l’i­mage d’o­ri­gine), sans perte visible de la qua­li­té.

Convaincus ? Alors voyons com­ment opti­mi­ser les images de votre pho­to­blog (ou de tout autre site sous WordPress).

Les deux pre­miers conseils, d’ailleurs, ne sont pas réser­vés à WordPress, ils valent pour tous les sites inter­net, quelle que soit la tech­no­lo­gie utilisée.

En tout pre­mier lieu…

Adaptez la taille de vos photos selon votre site

Si vous affi­chez une taille maxi­male de 1920x1200 par exemple, inutile d’en­voyer votre pho­to­gra­phie en taille ori­gi­nale en 16 ou 20 Mpx. Vous encom­bre­rez inuti­le­ment votre ser­veur web, et si vous n’op­ti­mi­sez pas, le char­ge­ment de la page sera hor­ri­ble­ment long.

Un logi­ciel tel que FastStone Photo Resizer fera par­fai­te­ment l’affaire.

Ce logi­ciel gra­tuit pour une uti­li­sa­tion per­son­nelle (20$ pour une uti­li­sa­tion pro­fes­sion­nelle) fait plus que redi­men­sion­ner — même s’il le fait très bien. Vous pour­rez l’u­ti­li­ser pour reca­drer, ajou­ter un texte, un filigrane…

Photoshop per­met aus­si de redi­men­sion­ner vos pho­to­gra­phies, mais peut être aisé­ment rem­pla­cé par FastStone Photo Resizer pour des tâches simples.

Une fois que vous avez redi­men­sion­né votre pho­to­gra­phie, vous allez la mettre en ligne

Optimiser votre image pour le web

Une fois redi­men­sion­née, votre image n’est pas encore au meilleurs de sa forme.

Nous allons uti­li­ser un ser­vice en ligne pour réduire dras­ti­que­ment sa taille. J’ai pris des dizaines de pho­tos pour tes­ter le meilleur taux de com­pres­sion ; le ver­dict est sans appel : le meilleur est tinyJPG.

Non seule­ment la com­pres­sion est plus per­for­mante, mais en plus, vous pou­vez prendre jus­qu’à 20 fichiers et les conver­tir en une passe. Et les télé­char­ger sous forme d’ar­chive ou les dépo­ser sur votre espace Dropbox.

Cerise sur le gâteau, il est gra­tuit dans sa ver­sion en ligne, et conver­tit les images aux for­mats JPG et PNG.

À noter, sur la cap­ture d’é­cran : le meilleur taux de com­pres­sion pour les 6 images envoyées (prises au hasard, en moins de 5Mo — la limite pour les images opti­mi­sées en ligne par tinyJPG) est de 91% — 6 images, une éco­no­mie de 2 Mo sur votre ser­veur, vous n’u­ti­li­sez plus que 20% de l’es­pace que vous uti­li­se­riez sinon — tout sim­ple­ment bluffant !

Maintenant, votre pho­to­gra­phie est prête à être mise en ligne, opti­mi­sée. Vos visi­teurs et votre ser­veur web vous en sau­ront gré ! Pour quelques minutes à peine d’op­ti­mi­sa­tion (redi­men­sion­ne­ment et compression).

Lightroom et Photoshop per­mettent de redi­men­sion­ner vos images, avec Photoshop vous pou­vez aus­si  vous affran­chir de l’op­ti­mi­sa­tion en ligne, si vous uti­li­sez « Enregistrer pour le Web… »

Pour un site web sta­tique, vous en avez fini avec l’op­ti­mi­sa­tion de vos images. Mais si vous avez choi­si WordPress pour pro­pul­ser votre site, il reste une étape à mettre en œuvre, une seule fois, pour que toutes vos images soient opti­mi­sées. Il va falloir…

Installer et activer l’extension Compress JPEG & PNG images

TinyPNG – JPEG, PNG & WebP image compression

Auteur(s) : TinyPNG

Version actuelle : 3.4.4

Dernière mise à jour : 2 sep­tembre 2024

tiny-compress-images.3.4.4.zip

90%Évaluations 200 000+Installations WP 3.4+Nécessaire

Compress JPEG & PNG images auto­ma­tise la com­pres­sion de toutes vos images via tinyJPG. Le ser­vice est gra­tuit pour les 500 pre­mières images com­pres­sées chaque mois, et le coût exor­bi­tant déri­soire ensuite, 0.009$ par image au-delà jus­qu’à la 10 000ième image, 0.002$ au-delà.

Chaque image ren­voyée compte, c’est l’i­mage com­pres­sée qui est comp­ta­bi­li­sée. Si vous avez 4 images à chaque fois (full, large, medium, thumb­nail), vous pour­rez opti­mi­ser gra­tui­te­ment 125 images par mois.

Calcul rapide : vous met­tez en ligne une pho­to par jour, dans le cadre d’un pro­jet 365 (tiens, une idée à déve­lop­per !) : 4 images x 31 jours = 124 images. C’est gra­tuit. Vous créez une col­lec­tion de 5 pho­tos tous les jours : 5 pho­tos x 4 images x 31 jours = 620 images. Si vous opti­mi­sez la pre­mière image, vous res­tez dans le gra­tuit en tom­bant de 620 à 465 images. Et sinon, vous aurez à payer : 120 images x 0.009 $ = 1.08 $ !

Le moins qu’on puisse dire, c’est que ce n’est pas une ruine ! Pour 9 $ (à peine 8 €) vous com­pres­se­rez 250 images (en 4 for­mats, soit un total de 1000 images), au delà des 125 gra­tuites. Soit 375 pho­tos optimisées.

Cette exten­sion pré­serve les don­nées EXIF de vos pho­to­gra­phies, don­nées dont on ne veut cer­tai­ne­ment pas se pri­ver pour un pho­to­blog. Par contre, elle conver­tit auto­ma­ti­que­ment les pro­fils colo­ri­mé­triques (dont le CMJN) vers le RVB stan­dard pour maxi­mi­ser la com­pres­sion et pour maxi­mi­ser la compatibilité.

Un seul regret : il n’est pas pos­sible de désac­ti­ver l’op­ti­mi­sa­tion lors de l’ac­qui­si­tion d’une nou­velle image. Mais cette res­tric­tion est plus ou moins liée à WordPress, qui génère auto­ma­ti­que­ment toutes les tailles d’i­mages infé­rieures à la réso­lu­tion d’o­ri­gine, sans prendre en compte l’u­ti­li­sa­tion finale du média.

D’où l’in­té­rêt de mettre en ligne une image pleine taille opti­mi­sée, vous n’au­rez pas besoin de l’op­ti­mi­ser, vous gagnez un for­mat. On passe de 125 à 166 images opti­mi­sables par mois, gratuitement.

Installation et activation de l’extension

L’installation est un modèle de sim­pli­ci­té : depuis le tableau de bord de bord de votre blog, vous cli­quez sur Extensions > Ajouter, sai­sis­sez « com­press jpeg », vali­dez. L’extension et son petit pan­da s’af­fichent en pre­mier résul­tat. Un clic sur Installer main­te­nant, un clic sur Activer l’extension, et c’est (presque) ter­mi­né. Il va vous fal­loir pas­ser dans les réglages, nous allons décou­vrir pourquoi.

Réglages

En vous ren­dant dans les réglages, vous trou­ve­rez un lien vers le site tinyPNG (le frère jumeau de tinyJPG), pour deman­der une clé d’API (qui vous per­met­tra d’ac­cé­der au service) :

Pas de demande de paie­ment, pas de demande de numé­ro de carte ban­caire. Tant que vous n’a­vez pas atteint votre quo­ta de 500 images men­suelles, vous n’a­vez rien d’autre à faire.

Il n’y a pas grand chose à régler, mis à part les tailles d’i­mages qui seront trai­tées par tinyPNG.

Vous avez une vue du gain actuel, depuis l’ins­tal­la­tion de l’ex­ten­sion, et le nombre approxi­ma­tif d’i­mages que vous pour­rez trai­ter (cette fois-ci, c’est le lot qui est don­né). Simple et efficace.

Pour chaque image trai­tée par le ser­vice tinyPNG, vous avez dans le tableau de bord des médias le gain glo­bal obte­nu, et en cli­quant sur « détails », le gain par for­mat d’i­mage traité.

Vous pou­vez éga­le­ment com­pres­ser en une passe tous les médias déjà impor­tés en cli­quant sur Médias > Compress All Images, qui vous don­ne­ra le nombre total d’iamges comp­ta­bi­li­sées lors de cette opération.

Et pour savoir où vous en êtes de votre consom­ma­tion actuelle, ren­dez-vous sur le site de l’ex­ten­sion, à l’a­dresse Your API account.

Vous ne vou­lez pas de tinyPNG ? Il y a bien sûr…

Des alternatives à tinyPNG

D’autres exten­sions sont plé­bis­ci­tées, ima­gi­fy en tête.

Les gains semblent légè­re­ment infé­rieurs à ceux de tinyJPG, pour un test en mode ULTRA (le plus per­for­mant au niveau de la com­pres­sion). Jugez plutôt :

Avec tinyPNG, vous gagnez 11 Mo, contre « seule­ment » 10.2 Mo avec ima­gi­fy. À tes­ter sur plus d’i­mages, sur vos images. Mais la dif­fé­rence ne semble pas impor­tante. Vous avez par mois 500 images gra­tuites sur tinyPNG, 50 Mo offerts sur ima­gi­fy. À voir quel ser­vice vous per­met de trai­ter plus d’images sans payer.

Une exten­sion récente mais pro­met­teuse per­met aus­si d’op­ti­mi­ser ses images sans faire appel à un ser­vice externe, Ultimate Image Optimization Helpers. Intéressante si vous avez un stock d’i­mages à opti­mi­ser et un tout petit bud­get à y consa­crer, à condi­tion d’a­voir une ver­sion récente de PHP (supé­rieure ou égale à 5.6).

Vous avez choi­si votre exten­sion ? Vous l’a­vez ins­tal­lée et confi­gu­rée ? Alors vous n’a­vez plus qu’à vous pré­oc­cu­per de vos articles et de vos images !

Vous en avez fini avec l’op­ti­mi­sa­tion de vos images, mais vous pou­vez toujours…

Aller plus loin pour optimiser le chargement de vos images

Vous avez sûre­ment enten­du par­ler de Jetpack, le cou­teau suisse des exten­sions WordPress. Non ? Alors je vous invite à lire l’ar­ticle Jetpack – le cou­teau suisse pour WordPress, tou­jours sur ce blog.

En acti­vant Jetpack, vous accé­dez au module Photon, le CDN de WordPress.com, gra­tui­te­ment, pour que les images de votre site ne soient plus char­gées depuis votre ser­veur, mais depuis les ser­veurs de WordPress.

Un moyen simple et gra­tuit de boos­ter encore votre site web, il suf­fit d’ac­ti­ver Photon pour que la magie opère !

Par contre, si vous uti­li­siez ce module avant de mettre en place une stra­té­gie d’op­ti­mi­sa­tion de vos images, il n’est pas pos­sible de ren­voyer le conte­nu à Photon — soit vous lais­sez en l’é­tat pour les images déjà pré­sentes, soit vous aurez à renom­mer un à un chaque média.

Si vous avez déjà des mil­liers de pho­tos sur votre site… il sera pro­ba­ble­ment pré­fé­rable d’op­ter pour un autre ser­vice, tel que fasterImage — ou de choi­sir un autre CDN que Photon si vous ne vou­lez pas vous pas­ser du ser­vice ren­du par votre com­pres­seur d’i­mages préféré.

N’ayant pas tes­té fasterImage, je m’abs­tien­drai de don­ner un avis sur l’op­ti­mi­sa­tion ou sur la qua­li­té du ser­vice rendu.

Mais l’un de ses points forts, c’est qu’il com­presse aus­si au for­mat WebP, à prio­ri l’un des meilleurs for­mats de com­pres­sion pour le web, et n’en­voie ce for­mat de fichier qu’aux navi­ga­teurs actuel­le­ment com­pa­tibles. Son point faible ? C’est pour moi que les images sont sto­ckées sur ses ser­veurs — si vous rési­liez votre abon­ne­ment, ou si le ser­vice n’est plus assu­ré, il fau­dra à nou­veau payer pour opti­mi­ser vos images.

Et vous, avez-vous tes­té d’autres exten­sions pour opti­mi­ser vos images ? Avez-vous d’autres conseils pour l’op­ti­mi­sa­tion des images de votre blog ?