Bonnes pratiques pour la gestion des médias dans Jahia
Une gestion rigoureuse des fichiers médias (images et documents) permet d’améliorer les performances de votre site, de réduire l’espace disque utilisé et de limiter l’impact environnemental du Web. Ce guide présente les bonnes pratiques à adopter lors de l’importation et de la gestion d’images et de documents sur un site Jahia ainsi que des astuces et des outils à votre disposition. Plus généralement le respect de ces bonnes pratiques vous permettra de maintenir une section Media de votre JContent Jahia saine et durable.
Le saviez-vous ?
Une image individuelle sur le Web ne devrait généralement pas dépasser une taille de 200ko.
Pourquoi optimiser les images ?
Les images sont l’un des principaux facteurs de poids d’un site web. Lorsqu’elles sont mal optimisées (fichiers trop lourds, formats inadaptés, dimensions excessives), elles contribuent à:
- Ralentir le chargement des pages, ce qui a un impact négatif sur le référencement par les moteurs de recherche de tous les sites de l’Unil sans distinction
- Dégrader l’expérience utilisateur, en particulier sur mobile
- Occuper inutilement l’espace disque du serveur (tous les sites Jahia de l’Unil partagent le même espace serveur ! Des problèmes sur un site affecte potentiellement donc tous les autres)
- Alourdir les sauvegardes et les migrations, voir empêcher certaines maintenances automatiques de Jahia
Bonnes pratiques générales pour les images
Pour simplifier ces optimisations, nous recommandons l’outil Squoosh: une application web gratuite, simple d’utilisation, qui permet de compresser, redimensionner et convertir les images dans des formats plus adaptés au Web. Même avec les réglages par défaut, Squoosh permet généralement de réduire considérablement le poids des images sans perte visible de qualité. Il constitue donc une excellente solution tout-en-un pour préparer vos images avant de les importer dans Jahia.
L’Unil propose également un logiciel dédié au traitement des images, Affinity, très puissant mais qui requiert des compétences plus avancées.
Choisir un format adapté
- JPEG: recommandé pour les photographies. Il permet une bonne compression avec un rendu visuel de qualité.
- PNG: à réserver aux cas spécifiques (transparence, schémas simples avec peu de couleurs). À éviter pour les photos.
- WEBP: format moderne existant depuis 2010, plus efficace que JPEG, pris en charge par la majorité des navigateurs et compatible avec les installations Jahia Unil. Si possible, préférez ce format à JPG et PNG.
- SVG: format d'image vectoriel idéal pour les logos, icônes et schémas. Léger, redimensionnable sans perte de qualité, et préférable au PNG si le visuel s’y prête.
Attention: on peut convertir une photo ou une image bitmap (JPG, PNG, WEBP...) en SVG de manière directe (via Power Point par exemple). Cependant cette pratique génère des images lourdes et peu adaptées. Si possible il est toujours préférable de créer ses infographies dans des logiciels dédiés au svg.
Compresser les images
Avant d’importer une image dans le Jcontent Jahia de votre site, il est recommandé de la compresser.
- Format recommandé: WEBP ou JPG
- Taux de compression conseillé: entre 70 % et 75 %
Exemple: une image PNG de 3 Mo peut généralement être réduite à moins de 150 Ko sans perte visible de qualité
Redimensionner les images
Importer des images à la taille réellement nécessaire à l’affichage sur le site.
Par exemple, inutile de téléverser une image de 3000 pixels de large si elle est affichée en 600 pixels au maximum dans n’importe quelle page et sur n’importe quel écran.
L’exemple le plus frappant est le composant People Teaser. L’image sera affichée dans tous les cas dans une zone de 70px par 70px 8ratio carré, 1 :1). Une image de dimensions140px par 140px est donc tout à fait adaptée pour ce composant et pour satisfaire les écrans Retina. Une telle image ne devrait pas excéder 30ko.
1200px de largeur est généralement suffisant pour l'utilisation d'une image sur le Web, dans la plupart des cas. Consultez les recommandations Jahia directement dans l’édition de vos pages.
Taille idéale pour les images
Voici les dimensions auxquelles nous recommandons de préparer les images avant de les charger dans Jahia :
| Composants Jahia | Ratio et dimensions idéales des images à contribuer |
|---|---|
| Homepage Hero – colonne gauche | Paysage 16:9 1340 x 754 Images contribuées et gérées par News et agenda MyUNIL |
| Homepage Hero – colonne droite | Paysage 16:9 1340 x 754 Images contribuées et gérées par News et agenda MyUNIL |
| Hero sur page de niveau 1 | Carré 1:1 1340 x 1340 |
| Image | Paysage 16:9 1340 x 754 |
| Infographie SVG | Paysage 16:9 1340 x 754 |
| Vidéo | Paysage 16:9 1340 x 754 |
| Galerie | Paysage 16:9 1340 x 754 Accepte aussi les formats portraits |
| Citation Interview |
Miniature 1:1 140 x 140 |
| People teaser | Miniature 1:1 140 x 140 |
| Teasers de publications | Portrait 3:4 750px de large |
| Image et texte | Portrait 3:4 750px de large |
| Highlight | Portrait 3:4 750px de large |
| Teasers externes verticaux | Paysage 16:9 750px de large |
| Teasers d'actualité en vedette Teasers d'actualités verticaux Teasers d'événements verticaux Teasers des événements en vedette |
Paysage 16:9 750px de large Images contribuées et gérées par News et agenda MyUNIL |