Image réactive Joomla utilisant srcset et la compression

Optimisation? Vérifier. Lazy loading ? Revérifier. Pourtant, votre Joomla! le site Web semble maladroit et il faut trop de temps pour le charger sur les appareils mobiles et les connexions lentes. Ne désespérez pas, c'est là que la structure HTML devient pratique ; plus précisément, les ensembles de sources d'image, 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à touché au 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 avec 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, en particulier 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'ensemble source 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 des ensembles de sources n'est pas seulement des temps de chargement plus rapides, mais également des scores SEO améliorés. Tout cela au petit prix d'avoir des copies de la même image avec différentes résolutions, facilement disponibles lorsque les utilisateurs en ont besoin. Vous pouvez en savoir plus sur l' attribut srcset et tout le reste lié aux 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 simplement comme un Joomla! extension du gestionnaire de galerie, mais il se passe beaucoup de choses sous le capot que vous ignorez peut-être. Exemple: Droppics utilise désormais l'ensemble source pour charger les bonnes images pour vos utilisateurs. Si vous n'êtes pas au courant de 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' 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 l' images réactives vous l'indique, en activant le paramètre Droppics crée deux nouvelles vignettes pour chaque Joomla! l'image que vous avez. Ces vignettes sont les images responsives 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 l'interface et vous trouverez plusieurs sources pour différentes tailles d'appareils.

L'optimisation générale est très bien, tout comme le 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 reste une pièce manquante au puzzle.

Compressez les images srcset sur Joomla!

Vous vous demandez peut-être si plusieurs copies de la même image valent la peine. Vous souhaitez peut-être économiser de l'espace sur le serveur ou vous avez peur que les nouvelles images ne 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! la source définit les images 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 d'origine. 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! De là, dirigez-vous vers l' avancé et activez l'optimisation des médias lors de l'enregistrement . Alternativement, vous pouvez choisir manuellement les images à optimiser via ImageRecycle .

Les temps de chargement sont un problème à multiples facettes. Vous devez simultanément réduire la taille des fichiers tout en préservant la qualité et en économisant de l'espace de stockage. Avec le jeu 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é.