Réduisez le poids de vos images

Si votre site Joomla contient de nombreuses images, il est très important qu'elles soient soit optimisées le plus possible. En général le problème provient souvent des utilisateurs Joomla inexpérimentés qui téléchargent dans Joomla des images trop grandes pour lesquelles ils adaptent leurs dimensions avec l'éditeur de texte. Cette technique ne réduit que les dimensions de chaque image vue, mais le poids de chacune de ces grandes images est bien chargé dans le navigateur des internautes.  

Vous devez donc éduquer vos éditeurs de contenu afin, qu' en premier lieu, ils ne chargent pas dans Joomla ce type d' images trop grandes / lourdes.

Vous devez aussi considérer comment vos images sont chargées dans les smartphones et tablettes.

Le bon format d'images

Assurez-vous de bien choisir le bon format de vos images, en général votre choix se limitera à ces 3 formats :

• GIF : Petit en poids, qualité relativement basse, à utiliser pour de petites images, icônes, ou des images avec des couleurs uniformes basiques.
• JPG/JPEG : Poids élevé, pas de transparence, mais la solution pour afficher des images de type photographique. Avec ce format vous avez le choix entre utiliser le format Progressif ou "de base" ("standard" qui peut être défini dans Save for web de photoshop)). Le format Progressif montre une image un peu flou dont la netteté s'améliore pendant son chargement, alors que le format " de base" montre en premier lieu le haut de l'image, puis montre progressivement le reste de l'image. Le format Progressif est celui conseillé par webpagetest.org & Google PageSpeed. Cependant il nécessite plus de ressources du processeur, ce qui peut ne pas être idéale pour le chargement d'images sur des téléphones portables, il n'y a donc pas de réponses parfaites pour ce choix. Personnellement de suis toujours les recommandations de Google, et je choisis donc le format Progressif.
• PNG : Choisissez ce format pour de petites images, logos etc. et ce qui requièrent de la transparence.

Lorsque vous sauvegardez "une image pour le web" réduire sa qualité de 100% à 60% réduira considérablement son poids, alors qu'elle conservera toujours un aspect parfait, ceci est particulièrement vrai pour de petites images.

Utiliser JCE pour retirer  les données EXIF de vos images

L' éditeur de texte JCE a une caractéristique très intéressante depuis sa version 2.5.10, elle peut vous permettre de sauver beaucoup de kBs. En fait il retire les données Exif des images lors de leur chargement dans Joomla. Regardez la différence de poids entre 2 images l'une en téléchargement normal de JCE et l'autre avec  le paramètre JCE activé :   

Vous pouvez voir une perte de poids de 30%, et la qualité des images n'est pas du tout affectée. Cette option doit être activée dans JCE, pour se faire rendez-vous dans Composants > JCE administration > Editor Profiles > Default (si vous utilisez ce profil) > Editor Parameters > Filesystem et choisissez d'activer le paramètre  Remove Image EXIF data :  

La compression "Lossless" de vos images sans perte de qualité en ligne

Même si cela semble un peut étrange ou technique, c'est une GRANDE réduction du poids de vos images et très facile à utiliser. Même si vous avez correctement redimensionné vos images, elles peuvent contenir des données (bytes) et meta-data non nécessaires qui peuvent être supprimées pour une ultime optimisation (telle que les données EXIF que nous venons d'évoquer). Ce peut être la date de la prise de la photo, le modèle de l'appareil photo etc. ce qui, pour un site internet n'est pas nécessaire d'être conservé. Retirer ces données n'affecte pas la qualité de l'image, cette étape est nommée  en anglais "Lossless compression". La plus part de ces données ne peuvent pas être supprimées en utilisant la commande "Enregistrez pour le Web" de Photoshop.

Il y un certain nombre d'outils qui peuvent faire cette optimisation pour vous. Il vous suffit de charger vos images par le web (une par une ou plusieurs à la fois) dans l'un de ces outils, puis ensuite vous pourrez télécharger votre image optimisée. C'est en général très impressionnant sutout pour les images en PNG qui peuvent gagner plus de 70% !!! Les autres formats ont des résultats moins spectaculaires, mais souvent dans une fourchette de 10 à 40%. Smushit de Yahoo était le plus célèbre de ces outils, mais il a été mis hors ligne début 2015. Heureusement il y a  d'autres outils qui sont similaires ou avec des fonctionnalités améliorées.

La meilleur option est probablement  d'utiliser ImageRecycle. Son optimiseur est gratuit et vous pouvez l'utiliser sur le web. Il peut réduire la plus part des formats d' images et même les PDFs. Vous pouvez y télécharger vos fichiers un par un ou plusieurs à la fois.

Ce qui est unique avec ImageRecycle est qu'il a un plugin Joomla que vous pouvez facilement installer qui pourra optimiser vos images (et optionnellement les redimensionner) sans d'autres actions  de votre part. Vous pourez  trouver sur cette page une revue de ce plugin : http://joomlaseo.com/seo-extensions/imagerecycle 

Il y a plein d'autres services disponibles sur le web, mais aucun d'eux n'offre à heure actuelle de plugin Joomla :

• TinyPNG est un excellent outil, malheureusement il ne traite que les images PNG (maintenant aussi disponible pour traiter les images JPG : tinyjpg.com).
• Notez que kraken.io est un nouveau venu qui semble très prometteur. Kraken peut traiter des images JPG et PNG dans le même envoi, ce qui est particulièrement utile pour le traitement de lots d'images. Kraken existe aussi en version PRO qui offrent d'autres options (et un plugin Wordpress). Mais l'accès à l'interface de base est gratuit, et déjà très performant. 
• media4x.com peut optimiser des PNGs ou JPGs mais seulement une par une
• compressor.io. Il peut à la fois traiter des images PNG & JPG.
• Il y a aussi d'autres outils gratuits que vous pouvez installer sur votre ordinateur, il sont particulièrement utiles lorsque vous souhaitez réduire un lot d'images Radical Image Optimization Tool, The JPEG Reducer, Batch Purifier Lite (seulement pour les JPEG)
• Si vous utilisez GTmetrix.com pour vérifier la vitesse de chargement de votre site, et que vous cliquez sur la ligne "Optimize images", vous pourrez télécharger les versions optimisées de ces images.

Encoder ses images en base64

Une technique avancée pour traiter de petites images est d'utiliser l'encodage base64. Avec cette solution votre image est en fait transformée en une ligne de code la représentant. 

Voici un exemple de code :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAI0lEQVR42mNgGHBwPF7nPwgTUsdEd5uZ6O7noezHgYtHmgEA5lgXNZwaK2gAAAAASUVORK5CYII=" alt="" />

 C'est le code utilisé pour montrer cette image d'arrière plan :  , qui est utilisée dans le template du site de l'auteur.

Pour de très petites images, l'avantage est que vous n'avez besoin que de quelques lignes de code dans votre HTML, ce qui vous économise une requête HTTP. Si l'image est un peu plus grande, le code devient beaucoup plus important. Pour traiter une petite image vous aurez besoin de pages de code, aussi soyez précautionneux quand à son usage . Le plus gros problème est que les navigateurs ont besoin de plus de temps pour traiter le code, jusqu'à une seconde si le code devient trop long ... 

Pour des images individuelles, vous pouvez utiliser des outils disponibles sur le web pour les convertir, tel que www.base64-image.de. Il est aussi possible d'automatiser cette tache. L'extension Joomla Yireo ScriptMerge a une option qui permet de remplacer automatiquement des images une fois que l'on a configurer un seuil correspondant au code base64. 

Utilisez la bonne taille d'images

Vous devez toujours vous assurer que vos images soient bien redimensionnées à la taille à laquelle elles doivent apparaître dans votre site et ne pas utiliser le redimensionnement par défaut de votre éditeur de texte Joomla.

Une bonne solution est de combiner l'éditeur JCE avec son extension Image Manager extended. Image Manager extended de JCE vous permet de définir une taille par défaut de redimensionnement de vos images dans sa configuration. Avec cette option activée les images sont redimensionnées dans votre navigateur.

Bien sur il y a bien d'autres solutions, telles qu'utiliser K2, qui incorpore un mécanisme utilisant seulement la version redimensionnée de vos images lorsque téléchargées dans Joomla, mais il y a bien d'autres solutions de disponibles.

Lazy load images

En complément des optimisations discutées ci-dessus, vous pouvez aussi choisir d'utiliser la technique : lazy-load images.
Avec cette solutions les images ne seront pas téléchargées tant qu'elle ne seront pas montrée à l'internaute, en effet les images "sous la fold line" (cad non encore visible par l'internaute) ne seront pas chargées. Elles ne seront chargées si et seulement si l'internaute utilise la barre d'ascenseur de son navigateur pour accéder au contenu et images sous la fold line. Cette technique utilise un simple  script javascript pour faire les calculations nécessaires. Pour les sites qui contiennent beaucoup d'images, cette solution peu réduire drastiquement le temps de chargement des pages.

Il est très facile de mettre en place cette solution en utilisant le plugin Lazy load for Joomla de Kubrik extensions (plugin gratuit ). Ce plugin permet aussi d'exclure des images et extensions. Une fois installé vous verrez qu'en déplaçant l'ascenseur de votre navigateur vers le bas, les images vont apparaître.

Une autres technique qui a plus ou moins le même effet mais qui pourrait être plus efficace est la defer images technique (reporter le chargement d'images) qui ne nécessite pas de plugin Joomla, mais a besoin d'être codé manuellement.

Utiliser des images en background

Une méthode classique pour éviter le chargement d'images sur smartphones peut être de configurer vos images comme des images de background pour un div au lieu "d'images normales". Par exemple si vous avez une image de 400 x 400 pixels, si vous la montrez en background d'un div qui est  aussi de 400 par 400 pixels l'image sera parfaitement visualisée tel que désiré. Mais si vous ne montrez cette image de background que pour des smartphones plus large que 468px en utilisant une media querry, cette image ne sera pas chargée pour tous les smartphones de largeur inférieure à 468 pixels. Pour que ce type d'images se comportent comme des images responsives  vous aurez besoin d'utiliser des techniques plus avancées, mais c'est une autre méthode à ajouter à votre palette d'outils pour l'optimisation d'images responsives.

Images responsives

La plupart des sites web utilisent le caractère responsif des images simplement en les redimensionnant afin qu'elles restent dans leur container, en y appliquant une valeur max-width de css.
Une meilleur solution serait de charger une image différente pour les écrans de plus petites résolutions. C'est ici que la technique d' images responsives entre en jeux. Même si il s'agit d'une technique relativement nouvelle, vous devriez commencer à vous familiariser à cette technique dès maintenant, notez toutefois que vous aurez probablement besoin de solutions javascript pour la faire fonctionner sur des navigateurs moins récents. En ce moment vous pouvez utiliser 2 méthodes :

1. l'attribut srcset et les différentes tailles pour la balise <img>

<img src="http://joomlaseo.joomlaseonet.netdna-cdn.com/small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" /> 

2. la balise  <picture >

 <picture>
    <source media="(min-width: 40em)" srcset="/big.jpg 1x, /big-hd.jpg 2x">
    <source srcset="small.jpg 1x, small-hd.jpg 2x">
    <img src="http://joomlaseo.joomlaseonet.netdna-cdn.com/fallback.jpg" alt="">
</picture> 

Comme vous pouvez le voire la balise  <picture> a une fall-back solution pour les navigateurs qui ne la supporte pas. Honnêtement je n'ai pas encore utilisé cette technique sur des sites en production, mais c'est un technique à considérer surtout si son support par les différents navigateurs se généralise.

Vérifiez aussi responsiveimages.org pour plus d'information à ce sujet.

NDT: Pour vérifier quel navigateur supporte l'attribut srcset consultez cette page http://caniuse.com/#search=srcset.
Pour la comptabilité de la balise <picture> avec les différents navigateurs consultez cette page : http://caniuse.com/#search=picture

Images adaptatives 

Vous pouvez aussi choisir de charger des images suivant la détection de la taille de l'écran, un petit écran ne chargera ainsi que la petite version de l'image alors qu'un grand écran chargera lui sa version plus grande. Vous pouvez utiliser XT adaptive images pour ce faire. Notez que Joostrap  adopte leur technique dans leurs templates.

Cet article est une traduction libre du tutoriel de Simon Kloostra : Reduce image size