Optimisez vos photographies pour un affichage rapide

Cet article prend 8 minutes à lire et comporte 1802 mots.

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…

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

Primordiale pour que l’in­ter­naute ne reparte pas avant d’avoir chargé la page, pour qu’il visite votre site en suivant, 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 partie 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 photo­gra­phies.

Rassurez-vous, ça ne fait pas mal ! C’est rapide à mettre en œuvre, simple à utili­ser, et les tarifs vont du gratuit à plus que raison­nable.

Et le gain est plus qu’in­té­res­sant, sans perte visible de la qualité. Jugez plutôt :

gesanghua-1404536_1280gesanghua-1404536_1280_o

À gauche, vous avez l’image origi­nale. À droite, l’image opti­mi­sée. Celle de gauche pèse 153.2Ko, celle de droite n’en pèse plus que 96.5 – un gain de 37%, sans perte de défi­ni­tion ! Déplacez le curseur, et voyez s’il y a une diffé­rence… Et ce gain peut aller jusqu’à 80%, voire plus…

Convaincus ? Alors voyons comment opti­mi­ser les images de votre photo­blog (ou de tout autre site sous WordPress).

Les deux premiers 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 utili­sée.

En tout premier 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 photo­gra­phie en taille origi­nale en 16 ou 20 Mpx. Vous encom­bre­rez inuti­le­ment votre serveur web, et si vous n’op­ti­mi­sez pas, le char­ge­ment de la page sera horri­ble­ment long.

Un logi­ciel tel que FastStone Photo Resizer fera parfai­te­ment l’af­faire.

Logiciel FastStone Photo Resizer

Ce logi­ciel gratuit pour une utili­sa­tion person­nelle (20$ pour une utili­sa­tion profes­sion­nelle) fait plus que redi­men­sion­ner – même s’il le fait très bien. Vous pour­rez l’uti­li­ser pour reca­drer, ajou­ter un texte, un fili­grane…

Photoshop permet aussi de redi­men­sion­ner vos photo­gra­phies, mais peut être aisé­ment remplacé par FastStone Photo Resizer pour des tâches simples.

Une fois que vous avez redi­men­sionné votre photo­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 utili­ser un service en ligne pour réduire dras­ti­que­ment sa taille. J’ai pris des dizaines de photos pour tester le meilleur taux de compres­sion ; le verdict est sans appel : le meilleur est tinyJPG.

Non seule­ment la compres­sion est plus perfor­mante, mais en plus, vous pouvez prendre jusqu’à 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 gratuit dans sa version en ligne, et conver­tit les images aux formats JPG et PNG.

service en ligne de compres­sion d’image tinyJPG

À noter, sur la capture d’écran : le meilleur taux de compres­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 écono­mie de 2 Mo sur votre serveur, vous n’uti­li­sez plus que 20% de l’es­pace que vous utili­se­riez sinon – tout simple­ment bluf­fant !

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

Lightroom et Photoshop permettent de redi­men­sion­ner vos images, avec Photoshop vous pouvez aussi  vous affran­chir de l’op­ti­mi­sa­tion en ligne, si vous utili­sez « Enregistrer pour le Web… »

Pour un site web statique, vous en avez fini avec l’op­ti­mi­sa­tion de vos images. Mais si vous avez choisi WordPress pour propul­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

Compress JPEG & PNG images

Compress JPEG & PNG images

Accélérez votre site. Optimisez vos images JPEG et PNG auto­ma­ti­que­ment avec TinyPNG.

TinyPNG

Compress JPEG & PNG images auto­ma­tise la compres­sion de toutes vos images via tinyJPG. Le service est gratuit pour les 500 premières images compres­sées chaque mois, et le coût exor­bi­tant déri­soire ensuite, 0.009$ par image au-delà jusqu’à la 10 000ième image, 0.002$ au-delà.

Chaque image renvoyée compte, c’est l’image compres­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 gratui­te­ment 125 images par mois.

Calcul rapide : vous mettez en ligne une photo par jour, dans le cadre d’un projet 365 (tiens, une idée à déve­lop­per !) : 4 images x 31 jours = 124 images. C’est gratuit. Vous créez une collec­tion de 5 photos tous les jours : 5 photos x 4 images x 31 jours = 620 images. Si vous opti­mi­sez la première image, vous restez dans le gratuit en tombant 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 compres­se­rez 250 images (en 4 formats, soit un total de 1000 images), au delà des 125 gratuites. Soit 375 photos opti­mi­sées.

Cette exten­sion préserve les données EXIF de vos photo­gra­phies, données dont on ne veut certai­ne­ment pas se priver pour un photo­blog. Par contre, elle conver­tit auto­ma­ti­que­ment les profils colo­ri­mé­triques (dont le CMJN) vers le RVB stan­dard pour maxi­mi­ser la compres­sion et pour maxi­mi­ser la compa­ti­bi­lité.

Un seul regret : il n’est pas possible de désac­ti­ver l’op­ti­mi­sa­tion lors de l’ac­qui­si­tion d’une nouvelle image. Mais cette restric­tion est plus ou moins liée à WordPress, qui génère auto­ma­ti­que­ment toutes les tailles d’images infé­rieures à la réso­lu­tion d’ori­gine, sans prendre en compte l’uti­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 format. On passe de 125 à 166 images opti­mi­sables par mois, gratui­te­ment.

Installation et activation de l’extension

L’installation est un modèle de simpli­cité : depuis le tableau de bord de bord de votre blog, vous cliquez sur Extensions > Ajouter, saisis­sez « compress jpeg », vali­dez. L’extension et son petit panda s’af­fichent en premier résul­tat. Un clic sur Installer main­te­nant, un clic sur Activer l’extension, et c’est (presque) terminé. Il va vous falloir passer dans les réglages, nous allons décou­vrir pour­quoi.

Réglages

En vous rendant 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 permet­tra d’ac­cé­der au service) :

Pas de demande de paie­ment, pas de demande de numéro de carte bancaire. Tant que vous n’avez pas atteint votre quota de 500 images mensuelles, vous n’avez rien d’autre à faire.

Il n’y a pas grand chose à régler, mis à part les tailles d’images 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’images que vous pour­rez trai­ter (cette fois-ci, c’est le lot qui est donné). Simple et effi­cace.

Pour chaque image trai­tée par le service tinyPNG, vous avez dans le tableau de bord des médias le gain global obtenu, et en cliquant sur « détails », le gain par format d’image traité.

Vous pouvez égale­ment compres­ser en une passe tous les médias déjà impor­tés en cliquant sur Médias > Compress All Images, qui vous donnera le nombre total d’iamges comp­ta­bi­li­sées lors de cette opéra­tion.

Et pour savoir où vous en êtes de votre consom­ma­tion actuelle, rendez-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ébis­ci­tées, imagify en tête.

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

Comparatif tinyJPG imagify

Avec tinyPNG, vous gagnez 11 Mo, contre « seule­ment » 10.2 Mo avec imagify. À tester sur plus d’images, sur vos images. Mais la diffé­rence ne semble pas impor­tante. Vous avez par mois 500 images gratuites sur tinyPNG, 50 Mo offerts sur imagify. À voir quel service vous permet de trai­ter plus d’images sans payer.

Une exten­sion récente mais promet­teuse permet aussi d’op­ti­mi­ser ses images sans faire appel à un service externe, Ultimate Image Optimization Helpers. Intéressante si vous avez un stock d’images à opti­mi­ser et un tout petit budget à y consa­crer, à condi­tion d’avoir une version récente de PHP (supé­rieure ou égale à 5.6).

Vous avez choisi votre exten­sion ? Vous l’avez instal­lée et confi­gu­rée ? Alors vous n’avez 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 pouvez toujours…

Aller plus loin pour optimiser le chargement de vos images

Vous avez sûre­ment entendu parler de Jetpack, le couteau suisse des exten­sions WordPress. Non ? Alors je vous invite à lire l’ar­ticle Jetpack – le couteau suisse pour WordPress, toujours sur ce blog.

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

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

Par contre, si vous utili­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 possible de renvoyer le contenu à 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 milliers de photos sur votre site… il sera proba­ble­ment préfé­rable d’op­ter pour un autre service, tel que fasterImage – ou de choi­sir un autre CDN que Photon si vous ne voulez pas vous passer du service rendu par votre compres­seur d’images préféré.

N’ayant pas testé fasterImage, je m’abs­tien­drai de donner un avis sur l’op­ti­mi­sa­tion ou sur la qualité du service rendu.

Mais l’un de ses points forts, c’est qu’il compresse aussi au format WebP, à priori l’un des meilleurs formats de compres­sion pour le web, et n’en­voie ce format de fichier qu’aux navi­ga­teurs actuel­le­ment compa­tibles. Son point faible ? C’est pour moi que les images sont stockées sur ses serveurs – si vous rési­liez votre abon­ne­ment, ou si le service n’est plus assuré, il faudra à nouveau payer pour opti­mi­ser vos images.

Et vous, avez-vous testé 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 ?

Si vous avez trouvé une faute d’orthographe, veuillez nous en infor­mer en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée .

Vous aimerez aussi…

4 réflexions sur “Optimisez vos photographies pour un affichage rapide”

  1. Bonjour Pascal,
    Je vais mettre à profit ton expé­rience et utili­ser le logi­ciel « tiny­jpg » pour amélio­rer les perfor­mance de mon site (surtout pour navi­guer sur un télé­phone portable).
    Aurais-tu connais­sance d’un logi­ciel pouvant faire de même avec les vidéos ?
    Merci.

    1. Bonjour Ruby, et tout d’abord merci pour ton commen­taire. Tes vidéos sont-elles héber­gées sur Youtube, ou sur une toute autre plate­forme en ligne (Vimeo…) ? Si tel est le cas, tu n’as pas à te préoc­cu­per de l’op­ti­mi­sa­tion, ces services opti­misent eux-mêmes les vidéos que tu déposes sur leur site. Par contre, si tu héberges toi-même tes vidéos, tu peux utili­ser des outils d’op­ti­mi­sa­tion tels que HandBrake ou VLC Media Player.

      1. Merci pour ta réponse rapide,
        Effectivement, le but est d’hé­ber­ger sur mon site mes vidéos (courts clips de présen­ta­tion des robes de mariée, voiles,…). Je ne savais pas que VLC Media Player pouvait le faire. Comme il est déjà installé sur mon ordi­na­teur j’es­saye­rai dès demain.

        1. VLC Media Player est (presque) un couteau suisse, mais il n’est pas simple à appré­hen­der – tout au moins pour moi qui ne connais rien au monde de l’au­dio ou de la vidéo… bonne chance !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Abonnez-vous à la
newsletter

Pour être informé à chaque fois que je publie un nouvel article.

Merci !

Quelque chose c'est mal passé…

Retour haut de page

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :