Image réactive Joomla utilisant srcset et compression

Optimisation? Vérifier. Lazy loading ? Revérifier. Pourtant, votre Joomla! Le site Web semble maladroit et le chargement sur les appareils mobiles prend trop de temps et les connexions sont lentes. Ne désespérez pas : c’est là que la structure HTML s’avère utile ; plus précisément, les ensembles de sources d'images, ou l' srcset .

Peut-être votre Joomla! blog utilise des images de haute qualité et vous ne pouvez pas - ou ne voulez pas - les supprimer. Ce n'est pas une raison de s'inquiéter. Avec le plugin Droppics de Joomla!, Vous pouvez appliquer non seulement une optimisation générale pour les images, mais également servir différents fichiers en fonction des appareils des utilisateurs.

Images réactives avec srcset HTML

Si vous avez déjà essayé le HTML, vous saurez que les images sont définies par un attribut source : src . La source de l'image est l'emplacement à partir duquel les navigateurs chargent les images à afficher sur votre Joomla ! utilisateurs. Le problème lié à l’utilisation d’une source cohérente pour une image particulière est que le même fichier sera toujours chargé, quelle que soit sa taille.

Par exemple, si vous avez une bannière de héros 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 de manière drastique, notamment sur les appareils mobiles. Avec les navigateurs modernes, vous pouvez définir non seulement une source pour les images, mais aussi un ensemble de sources : l'ensemble de sources srcset .

Comme son nom l'indique, l'ensemble de sources est une liste de sources, au lieu d'une seule source. Chaque source est associée à une largeur de navigateur afin que les appareils mobiles téléchargent de petites images et que les utilisateurs accèdent à votre Joomla! blog des ordinateurs de bureau téléchargez l'image en pleine résolution. En d'autres termes, le jeu d'images transforme les images en images réactives.

Le résultat de l’utilisation d’ensembles de sources n’est pas seulement des temps de chargement plus rapides, mais également de meilleurs scores SEO. Tout cela a le petit prix d'avoir des copies de la même image avec des résolutions différentes, facilement disponibles lorsque les utilisateurs en ont besoin. Vous pouvez en savoir plus sur l' srcset et tout ce qui concerne les ensembles de sources ici , mais si vous êtes impatient de commencer à les utiliser sur votre Joomla! blog, continuez à lire.

Diffusion d'images à l'échelle sur Joomla! avec Droppics

Vous connaissez peut-être Droppics comme un simple site Joomla ! extension du gestionnaire de galerie, mais il se passe beaucoup de choses sous le capot dont vous n'êtes peut-être pas au courant. Exemple concret : Droppics utilise désormais l'ensemble de sources pour charger les bonnes images pour vos utilisateurs. Si vous ne connaissez pas cette fonctionnalité, il est possible que vous ne l’exploitiez pas non plus.

Pour utiliser l'attribut srcset sur votre Joomla! blog, vous devez d'abord l'activer via votre configuration Droppics. Dirigez-vous vers l' des paramètres principaux dans les options de Droppics et activez les images réactives parmi les premières options. Enregistrez les modifications pour valider les nouveaux paramètres.

Comme vous l'indique l'info-bulle de l'option d'images réactives l'image que vous avez. Ces vignettes sont les images réactives elles-mêmes, qui s'affichent en fonction de l'appareil utilisé pour accéder à votre Joomla ! Blog.

Lorsque vous créez une publication et insérez une image Droppics, l'extension définit automatiquement le srcset pour vous. Vous ne nous croyez pas ? Inspectez le code HTML dans le frontend et vous trouverez plusieurs sources pour différentes tailles d'appareils.

L'optimisation générale, c'est bien beau, tout comme lazy loading, mais parfois, ils ne peuvent pas faire grand-chose. Dans certains cas, l’utilisation de la technique HTML moderne consistant à fournir des ensembles de sources d’images, au lieu de sources uniques, peut être la clé pour surmonter les temps de chargement lents.

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 vaut la peine d’avoir plusieurs copies de la même image. Peut-être souhaitez-vous économiser de l'espace sur le serveur ou craignez-vous que les nouvelles images s'empilent. Ce n’est pas parce que vous utilisez l’ensemble source que vous ne pouvez pas le combiner avec d’autres techniques d’optimisation, telles que la compression.

ImageRecycle est également disponible sur Joomla! et vous pouvez l'intégrer de manière transparente avec Droppics. En fait, vous pouvez même le configurer pour compresser automatiquement votre Joomla ! les images du jeu de sources immédiatement lorsqu'elles sont générées. Vous pouvez économiser jusqu'à 80 % avec une compression avec perte, ou meilleure économie, et jusqu'à 20 % avec une compression sans perte, ou originale. Vous pouvez en savoir plus sur la différence ici .

Vous pouvez configurer ImageRecycle pour compresser automatiquement les images en accédant à la configuration de l'extension dans Joomla ! À partir de là, accédez à l' avancé et activez l'optimisation des médias lors de l'enregistrement . Alternativement, vous pouvez choisir manuellement les images à optimiser via l'interface d' ImageRecycle

Les temps de chargement sont un problème à multiples facettes. Vous devez simultanément minimiser la taille des fichiers tout en conservant la qualité et en économisant de l'espace de stockage. Avec l'ensemble de sources magique de Droppics et la compression d' ImageRecycle, non seulement tout cela est possible, mais cela peut être un processus simple et automatisé.