• Paru le 22 mai 2016 - mis à jour le 15 janvier 2018

Optimisez vos photographies pour un affichage rapide

1817 mots - 8mn

Optimisez vos photographies pour un affichage rapide

1024 576 Tout sur WordPress

La star de votre photo­blog, ce sont vos photo­gra­phies. Comment les opti­mi­ser, pour un affi­chage plus rapide, sans pour autant perdre (trop) en qualité ? Y a‐t‐il une solu­tion miracle ? Penchons nous sur la ques­tion…

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

Primordiale pour que l’internaute 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’optimisation du site passe par l’optimisation 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’intéressant, sans perte visible de la qualité. Jugez plutôt :

À 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’envoyer 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’optimisez 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’affaire.

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’utiliser 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’archive 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’utilisez plus que 20% de l’espace 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’optimisation (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’optimisation en ligne, si vous utili­sez « Enregistrer pour le Web…»

Pour un site web statique, vous en avez fini avec l’optimisation 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

extension Compress JPG & PNG images

exten­sion Compress JPG & PNG images

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’optimisation lors de l’acquisition 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’origine, sans prendre en compte l’utilisation finale du média.

D’où l’intérêt de mettre en ligne une image pleine taille opti­mi­sée, vous n’aurez pas besoin de l’optimiser, 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’affichent 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’accéder au service) :

réglages de l’extension Compress JPG & PNG images

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’installation de l’extension, 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’extension, à 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

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’optimiser 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’optimisation 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’article 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’activer 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’optimisation 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’opter 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’abstiendrai de donner un avis sur l’optimisation 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’envoie 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’optimisation des images de votre blog ?

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

4 commentaires
  • Ruby 21 mars 2018 à 17 h 31 min

    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.

    • Pascal CESCATO 21 mars 2018 à 17 h 43 min

      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’optimisation, 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’optimisation tels que HandBrake ou VLC Media Player.

      • Ruby 21 mars 2018 à 17 h 58 min

        Merci pour ta réponse rapide,
        Effectivement, le but est d’héberger 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’essayerai dès demain.

Laisser une réponse

La modération des commentaires est activée. Votre commentaire peut prendre un certain temps avant d'apparaître.

    Partager…

    Rapport de faute d’orthographe

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