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 rapid­ité de charge­ment d’un site est pri­mor­diale.

Pri­mor­diale pour que l’in­ter­naute ne reparte pas avant d’avoir chargé la page, pour qu’il vis­ite votre site en suiv­ant, et pour qu’il revi­enne.

Vous avez peut-être une con­nex­ion à très haut débit, mais ce n’est pas le cas de tout le monde. Votre vis­i­teur fait-il par­tie des 44% des français à béné­fici­er comme vous d’un accès très rapi­de à Inter­net ? Et s’il con­sulte votre site depuis un smart­phone ou une tablette, est-il en 3G, H+, 4G ?

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

Ras­surez-vous, ça ne fait pas mal ! C’est rapi­de à met­tre en œuvre, sim­ple à utilis­er, et les tar­ifs vont du gra­tu­it à plus que raisonnable.

Et le gain est plus qu’in­téres­sant (jusqu’à 80%, en fonc­tion de l’im­age d’o­rig­ine), sans perte vis­i­ble de la qual­ité.

Con­va­in­cus ? Alors voyons com­ment opti­miser les images de votre pho­to­blog (ou de tout autre site sous Word­Press).

Les deux pre­miers con­seils, d’ailleurs, ne sont pas réservés à Word­Press, ils valent pour tous les sites inter­net, quelle que soit la tech­nolo­gie util­isée.

En tout pre­mier lieu…

Adaptez la taille de vos photos selon votre site

Si vous affichez une taille max­i­male de 1920x1200 par exem­ple, inutile d’en­voy­er votre pho­togra­phie en taille orig­i­nale en 16 ou 20 Mpx. Vous encom­br­erez inutile­ment votre serveur web, et si vous n’op­ti­misez pas, le charge­ment de la page sera hor­ri­ble­ment long.

Un logi­ciel tel que Fast­Stone Pho­to Resiz­er fera par­faite­ment l’af­faire.

Ce logi­ciel gra­tu­it pour une util­i­sa­tion per­son­nelle (20$ pour une util­i­sa­tion pro­fes­sion­nelle) fait plus que red­i­men­sion­ner — même s’il le fait très bien. Vous pour­rez l’u­tilis­er pour recadr­er, ajouter un texte, un fil­igrane…

Pho­to­shop per­met aus­si de red­i­men­sion­ner vos pho­togra­phies, mais peut être aisé­ment rem­placé par Fast­Stone Pho­to Resiz­er pour des tâch­es sim­ples.

Une fois que vous avez red­i­men­sion­né votre pho­togra­phie, vous allez la met­tre en ligne

Optimiser votre image pour le web

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

Nous allons utilis­er un ser­vice en ligne pour réduire dras­tique­ment sa taille. J’ai pris des dizaines de pho­tos pour tester 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 pren­dre jusqu’à 20 fichiers et les con­ver­tir en une passe. Et les télécharg­er sous forme d’archive ou les dépos­er sur votre espace Drop­box.

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

À not­er, sur la cap­ture d’écran : le meilleur taux de com­pres­sion pour les 6 images envoyées (pris­es au hasard, en moins de 5Mo — la lim­ite pour les images opti­misées en ligne par tinyJPG) est de 91% — 6 images, une économie de 2 Mo sur votre serveur, vous n’u­tilisez plus que 20% de l’e­space que vous utilis­eriez sinon — tout sim­ple­ment bluffant !

Main­tenant, votre pho­togra­phie est prête à être mise en ligne, opti­misée. Vos vis­i­teurs et votre serveur web vous en sauront gré ! Pour quelques min­utes à peine d’op­ti­mi­sa­tion (red­i­men­sion­nement et com­pres­sion).

Light­room et Pho­to­shop per­me­t­tent de red­i­men­sion­ner vos images, avec Pho­to­shop vous pou­vez aus­si  vous affranchir de l’op­ti­mi­sa­tion en ligne, si vous utilisez “Enreg­istr­er 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 choisi Word­Press pour propulser votre site, il reste une étape à met­tre en œuvre, une seule fois, pour que toutes vos images soient opti­misées. Il va fal­loir…

Installer et activer l’extension Compress JPEG & PNG images

TinyPNG – JPEG, PNG & WebP image com­pres­sion

Auteur(s) : TinyPNG

Ver­sion actuelle : 3.5.1

Dernière mise à jour : 17 avril 2025

tiny-compress-images.3.5.1.zip

90%Éval­u­a­tions 100 000+Instal­la­tions WP 4.0+Néces­saire

Com­press JPEG & PNG images automa­tise la com­pres­sion de toutes vos images via tinyJPG. Le ser­vice est gra­tu­it pour les 500 pre­mières images com­pressées chaque mois, et le coût exor­bi­tant dérisoire ensuite, 0.009$ par image au-delà jusqu’à la 10 000ième image, 0.002$ au-delà.

Chaque image ren­voyée compte, c’est l’im­age com­pressée qui est compt­abil­isée. Si vous avez 4 images à chaque fois (full, large, medi­um, thumb­nail), vous pour­rez opti­miser gra­tu­ite­ment 125 images par mois.

Cal­cul rapi­de : vous met­tez en ligne une pho­to par jour, dans le cadre d’un pro­jet 365 (tiens, une idée à dévelop­per !) : 4 images x 31 jours = 124 images. C’est gra­tu­it. 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­misez la pre­mière image, vous restez dans le gra­tu­it en tombant de 620 à 465 images. Et sinon, vous aurez à pay­er : 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­presserez 250 images (en 4 for­mats, soit un total de 1000 images), au delà des 125 gra­tu­ites. Soit 375 pho­tos opti­misées.

Cette exten­sion préserve les don­nées EXIF de vos pho­togra­phies, don­nées dont on ne veut cer­taine­ment pas se priv­er pour un pho­to­blog. Par con­tre, elle con­ver­tit automa­tique­ment les pro­fils col­orimétriques (dont le CMJN) vers le RVB stan­dard pour max­imiser la com­pres­sion et pour max­imiser la com­pat­i­bil­ité.

Un seul regret : il n’est pas pos­si­ble de dés­ac­tiv­er l’op­ti­mi­sa­tion lors de l’ac­qui­si­tion d’une nou­velle image. Mais cette restric­tion est plus ou moins liée à Word­Press, qui génère automa­tique­ment toutes les tailles d’im­ages inférieures à la réso­lu­tion d’o­rig­ine, sans pren­dre en compte l’u­til­i­sa­tion finale du média.

D’où l’in­térêt de met­tre en ligne une image pleine taille opti­misée, vous n’au­rez pas besoin de l’op­ti­miser, vous gag­nez un for­mat. On passe de 125 à 166 images opti­mis­ables par mois, gra­tu­ite­ment.

Installation et activation de l’extension

L’installation est un mod­èle de sim­plic­ité : depuis le tableau de bord de bord de votre blog, vous cliquez sur Exten­sions > Ajouter, sai­sis­sez “com­press jpeg”, validez. L’ex­ten­sion et son petit pan­da s’af­fichent en pre­mier résul­tat. Un clic sur Installer main­tenant, un clic sur Activ­er l’extension, et c’est (presque) ter­miné. Il va vous fal­loir pass­er dans les réglages, nous allons décou­vrir pourquoi.

Réglages

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

Pas de demande de paiement, pas de demande de numéro de carte ban­caire. Tant que vous n’avez pas atteint votre quo­ta de 500 images men­su­elles, vous n’avez rien d’autre à faire.

Il n’y a pas grand chose à régler, mis à part les tailles d’im­ages qui seront traitées par tinyPNG.

Vous avez une vue du gain actuel, depuis l’in­stal­la­tion de l’ex­ten­sion, et le nom­bre approx­i­matif d’im­ages que vous pour­rez traiter (cette fois-ci, c’est le lot qui est don­né). Sim­ple et effi­cace.

Pour chaque image traitée par le ser­vice tinyPNG, vous avez dans le tableau de bord des médias le gain glob­al obtenu, et en cli­quant sur “détails”, le gain par for­mat d’im­age traité.

Vous pou­vez égale­ment com­press­er en une passe tous les médias déjà importés en cli­quant sur Médias > Com­press All Images, qui vous don­nera le nom­bre total d’i­amges compt­abil­isées lors de cette opéra­tion.

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

Vous ne voulez pas de tinyPNG ? Il y a bien sûr…

Des alternatives à tinyPNG

D’autres exten­sions sont plébisc­itées, imag­i­fy en tête.

Les gains sem­blent 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 gag­nez 11 Mo, con­tre “seule­ment” 10.2 Mo avec imag­i­fy. À tester sur plus d’im­ages, sur vos images. Mais la dif­férence ne sem­ble pas impor­tante. Vous avez par mois 500 images gra­tu­ites sur tinyPNG, 50 Mo offerts sur imag­i­fy. À voir quel ser­vice vous per­met de traiter plus d’images sans pay­er.

Une exten­sion récente mais promet­teuse per­met aus­si d’op­ti­miser ses images sans faire appel à un ser­vice externe, Ulti­mate Image Opti­miza­tion Helpers. Intéres­sante si vous avez un stock d’im­ages à opti­miser et un tout petit bud­get à y con­sacr­er, à con­di­tion d’avoir une ver­sion récente de PHP (supérieure ou égale à 5.6).

Vous avez choisi votre exten­sion ? Vous l’avez instal­lée et con­fig­urée ? Alors vous n’avez plus qu’à vous préoc­cu­per de vos arti­cles et de vos images !

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

Aller plus loin pour optimiser le chargement de vos images

Vous avez sûre­ment enten­du par­ler de Jet­pack, le couteau suisse des exten­sions Word­Press. Non ? Alors je vous invite à lire l’ar­ti­cle Jet­pack – le couteau suisse pour Word­Press, tou­jours sur ce blog.

En acti­vant Jet­pack, vous accédez au mod­ule Pho­ton, le CDN de WordPress.com, gra­tu­ite­ment, pour que les images de votre site ne soient plus chargées depuis votre serveur, mais depuis les serveurs de Word­Press.

Un moyen sim­ple et gra­tu­it de boost­er encore votre site web, il suf­fit d’ac­tiv­er Pho­ton pour que la magie opère !

Par con­tre, si vous util­isiez ce mod­ule avant de met­tre en place une stratégie d’op­ti­mi­sa­tion de vos images, il n’est pas pos­si­ble de ren­voy­er le con­tenu à Pho­ton — 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 prob­a­ble­ment préférable d’opter pour un autre ser­vice, tel que fas­ter­Im­age — ou de choisir un autre CDN que Pho­ton si vous ne voulez pas vous pass­er du ser­vice ren­du par votre com­presseur d’im­ages préféré.

N’ayant pas testé fas­ter­Im­age, je m’ab­stiendrai de don­ner un avis sur l’op­ti­mi­sa­tion ou sur la qual­ité du ser­vice ren­du.

Mais l’un de ses points forts, c’est qu’il com­presse aus­si au for­mat WebP, à pri­ori l’un des meilleurs for­mats de com­pres­sion pour le web, et n’en­voie ce for­mat de fichi­er qu’aux nav­i­ga­teurs actuelle­ment com­pat­i­bles. Son point faible ? C’est pour moi que les images sont stock­ées sur ses serveurs — si vous résiliez votre abon­nement, ou si le ser­vice n’est plus assuré, il fau­dra à nou­veau pay­er pour opti­miser vos images.

Et vous, avez-vous testé d’autres exten­sions pour opti­miser vos images ? Avez-vous d’autres con­seils pour l’op­ti­mi­sa­tion des images de votre blog ?