Image responsive Joomla utilisant srcset et la compression

Optimisation ? OK. Lazy loading ? OK également. Pourtant, votre site Joomla! reste lourd et le chargement est trop long sur les appareils mobiles et les connexions lentes. Pas de panique ! C’est là que la structure HTML entre en jeu, et plus précisément, les `srcset` .

Votre blog Joomla! utilise peut-être des images de haute qualité et vous ne pouvez pas – ou ne souhaitez pas – les supprimer. Pas de panique ! Avec l’extension Droppics pour Joomla!, vous pouvez non seulement optimiser vos images de manière générale, mais aussi proposer des fichiers différents selon l’appareil de l’utilisateur.

Images réactives avec attribut srcset HTML

Si vous avez déjà utilisé HTML, vous savez que les images sont définies par un attribut source : `src` . La source de l'image correspond à l'emplacement à partir duquel les navigateurs chargent les images à afficher à vos utilisateurs Joomla!. Le problème avec l'utilisation d'une source unique pour une image donnée est que le même fichier sera toujours chargé, quelle que soit sa taille.

Par exemple, si vous avez une bannière principale en haut d'un article, la même image sera chargée sur tous les appareils. Les navigateurs téléchargent l'image puis la réduisent, parfois considérablement, surtout sur les appareils mobiles. Avec les navigateurs modernes, vous pouvez définir non seulement une source pour les images, mais un ensemble de sources : l'attribut ` srcset` .

Comme son nom l'indique, l'attribut `srcset` des images est une liste de sources, et non une source unique. Chaque source est associée à une largeur d'écran, ce qui permet aux appareils mobiles de télécharger des images réduites et aux utilisateurs accédant à votre blog Joomla! depuis un ordinateur de bureau de télécharger l'image en pleine résolution. Autrement dit, l'attribut `srcset` des images les rend adaptatives.

L'utilisation des ensembles de sources permet non seulement d'accélérer le chargement des pages, mais aussi d'améliorer le référencement naturel. Le seul inconvénient est de disposer de copies de la même image en différentes résolutions, toujours à la disposition des utilisateurs. Vous trouverez plus d'informations sur l' `srcset` et les ensembles de sources ici . Si vous souhaitez les utiliser immédiatement sur votre blog Joomla!, poursuivez votre lecture.

Afficher des images redimensionnées sur Joomla! avec Droppics

Vous connaissez peut-être Droppics comme une simple extension de gestion de galeries pour Joomla!, mais son fonctionnement interne est loin d'être optimal. Par exemple, Droppics utilise désormais le paramètre « source set » pour afficher les images les plus pertinentes à vos utilisateurs. Si vous ignorez l'existence de cette fonctionnalité, il est fort probable que vous ne l'exploitiez pas pleinement.

Pour utiliser l'attribut srcset sur votre blog Joomla!, vous devez d'abord l'activer dans la configuration de Droppics. Accédez à l' « Paramètres principaux » des options de Droppics et activez l'option « Images responsives » parmi les premières options. Enregistrez les modifications pour appliquer les nouveaux paramètres.

Comme « Images adaptatives » , activer ce paramètre permet à Droppics de créer deux nouvelles vignettes pour chaque image Joomla!. Ces vignettes correspondent aux images adaptatives elles-mêmes, qui s'affichent correctement en fonction de l'appareil utilisé pour accéder à votre blog Joomla!.

Lorsque vous créez une publication et insérez une image Droppics, l'extension configure automatiquement l' attribut srcset . Vous n'êtes pas convaincu ? Examinez le code HTML côté client et vous constaterez la présence de plusieurs sources pour différentes tailles d'écran.

L'optimisation générale et lazy loadingsont certes utiles, mais leurs possibilités restent parfois limitées. Dans certains cas, l'utilisation de la technique HTML moderne consistant à fournir des ensembles de sources d'images, plutôt que des sources individuelles, peut s'avérer la solution pour améliorer la vitesse de chargement.

Mais attendez, ce n'est pas tout. Il manque encore une pièce au puzzle.

Compressez les images srcset sur Joomla !

Vous vous demandez peut-être s'il est judicieux de conserver plusieurs copies d'une même image. Vous souhaitez peut-être économiser de l'espace serveur ou vous craignez que les nouvelles images ne s'accumulent. Le fait d'utiliser l'ensemble de sources ne vous empêche pas de le combiner avec d'autres techniques d'optimisation, comme la compression.

ImageRecycle est également disponible sur Joomla! et s'intègre parfaitement à Droppics. Vous pouvez même le configurer pour compresser automatiquement les images de votre ensemble source Joomla! dès leur génération. Vous pouvez ainsi économiser jusqu'à 80 % avec la compression avec perte (ou compression optimale) et jusqu'à 20 % avec la compression sans perte (ou compression originale). Pour en savoir plus sur les différences, cliquez ici .

Vous pouvez configurer ImageRecycle pour compresser automatiquement les images en accédant à la configuration de l'extension dans Joomla!. Ensuite, rendez-vous dans l' Avancé et activez l'option « Optimiser les médias lors de l'enregistrement ». Vous pouvez également choisir manuellement les images à optimiser via l'interface d' ImageRecycle

La réduction du temps de chargement est un problème complexe. Il est nécessaire de minimiser la taille des fichiers tout en préservant la qualité et en économisant l'espace de stockage. Grâce à l'ensemble de sources de Droppics et à la compression d' ImageRecycle, non seulement tout cela est possible, mais le processus peut être automatisé et simplifié.