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é

• JPG: 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 JPG, 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 dimensions 140px 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 :

Travailler plus efficacement: utiliser l’édition d’image intégrée à Jahia pour des modifications rapides

Dans la section Média, vous pouvez faire pivoter, redimensionner et recadrer les images. Pour modifier une image:

1. Dans jContent, cliquez sur Média dans le volet de navigation.
   
2. Accédez au dossier contenant l'image que vous souhaitez modifier.
   
3. Faites un clic droit sur l'image et sélectionnez Éditer l'image. L'éditeur d'images s'ouvre.
   
4. Sélectionnez l'opération que vous souhaitez effectuer:

• • Rotation
    Cliquez sur l’icône Rotation à gauche ou Rotation à droite pour faire pivoter l'image.
    
  • Redimensionnement
    Saisissez la largeur ou la hauteur souhaitée. Par défaut, le rapport largeur/hauteur est verrouillé. Pour modifier la largeur ou la hauteur indépendamment, cliquez sur l’icône de rapport afin de déverrouiller ce rapport.
    
  • Recadrage
    Utilisez l’outil de recadrage dans l’aperçu pour sélectionner la zone de l’image à recadrer. Vous pouvez également ajuster sa taille en modifiant manuellement la largeur et la hauteur. Le rapport hauteur/largeur peut être verrouillé ou déverrouillé.
    

Notez qu'il est impossible de combiner plusieurs opérations avant l'enregistrement. Une fois la modification d'une image commencée, vous devez annuler ou enregistrer vos modifications avant d'effectuer une autre opération. L'option «Enregistrer sous» crée une copie de l'image, qui s'ouvre automatiquement dans l'éditeur d'images.

Règles de nommage des fichiers et dossiers

Nommer correctement les fichiers et les dossiers permet d’éviter des problèmes d’accès à ces derniers et rend les adresses vers les fichiers plus sûres et intuitives.

Une bonne convention de nommage des médias (images, PDF, documents textes, etc.) sur un CMS comme Jahia repose sur des noms : 

• courts (30-35 car. max), 
  
• explicites, 
  
• sans accents ni caractères spéciaux, 
  
• utilisant des tirets (-) pour séparer les mots
  
• utilisant le format AAAA-MM-JJ pour les dates. 

Tout cela optimise le référencement naturel (SEO), facilite la gestion et le tri, et vous prémuni des problèmes techniques. 

Règles d'or pour le nommage des médias:

• Caractères autorisés: 
  Minuscules (a-z), chiffres (0-9), tirets bas (_) ou tirets du milieu (-).
  
• Interdictions: Pas d'espaces, pas d'accents, pas de caractères spéciaux (~ ! @ # $ % ^ & * ( ) ` ; : < > ? . , [ ] { } ‘ “ | etc.).
  
• Structure: Décrire le contenu de manière concise (ex: nom-produit-type-photo.jpg).
  
• Dates: Utiliser le format ISO 8601 (AAAA-MM-JJ) pour un classement chronologique, par exemple 2026-03-03_rapport-annuel.pdf.
  
• Séparateurs: Préférer les tirets (-) aux espaces pour assurer la compatibilité web.
• SEO: Utiliser des mots-clés pertinents dans le nom du fichier plutôt que image001.jpg. 
  

Exemples:

• Correct: formation-cms -2026-03.webp
  
• Incorrect: Photo de la formation !.JPG

Astuce: discerner et bien comprendre la différence entre:

• nom de fichier (nom système)  
  
• titre de fichier (permet de décrire le document sans contraintes à partir un titre à la longueur raisonnable)
  

PDF et autres fichiers que des images 

Compressez, compressez et compressez. Les documents textes et autres PDF sont souvent exclus des logiques de compression. Or ils représentent un poids très important dans le Jcontent d’un site.

Généralités

Si votre fichier contient exclusivement du texte les compressions permettent de réduire considérablement le poids du document.

Cependant, si le PDF comprend des images, il faudra trouver un compromis entre la qualité de ces derniers et le poids final du document.

Dans tous les cas, ciblez une résolution de 120-150 DPI pour le web et privilégiez le noir et blanc si possible. Réservez la résolution en 300 DPI pour les versions d’impression (print).

Les outils

Comme pour les images des outils de compression permettent de réduire le poids d’un PDF. Par exemple, Acrobat, SmallPDF (pas plus de deux PDF par heure en version gratuite. Payante pour des utilisations plus fréquentes), ou Aperçu Mac.

Une autre technique consiste à ré-exporter votre document dans format PDF réduit.

Sous Windows

L'imprimante "Microsoft Print to PDF" permet d'exporter votre document dans un autre fichier PDF plus petit.

1. Avec Acrobat Reader, ouvrir le fichier PDF dont la taille est à réduire
   
2. Cliquer sur le menu "Fichier" puis "Imprimer..."
   
3. Sélectionner "Microsoft Print to PDF", puis cliquer sur "Imprimer". Par défaut, ce type d'impression diminue la taille du PDF
   
4. La taille de votre document peut encore être réduite en sélectionnant "Imprimer en nuances de gris"
   
5. Entrer un nom de fichier puis cliquer sur "Enregistrer"
   

Sous macOS

Enregistrer votre document PDF avec l'option "Reduce file size".

1. Dans Aperçu, ouvrir le fichier PDF dont la taille est à réduire
   
2. Cliquer sur le menu "Fichier" puis "Exporter..."
   
3. Dans le champ "Exporter comme", saisir le nom du fichier de destination
   
4. Dans le champ "Filtre Quartz", sélectionner "Reduce File Size"
   
5. Cliquer sur "Enregistrer"

Recommandations concrètes

Avant de demander une extension de l'espace à disposition pour votre site, nous vous recommandons de:

1. Supprimer les doublons ainsi que les fichiers volumineux, inutilisés ou mal optimisés
   
2. Optimiser les images conservées: compression, conversion au format WEBP, redimensionnement
   
3. Optimiser les documents autres que les images comme les fichiers PDF.
   
4. Suivre les bonnes pratiques de cette page pour les prochaines importations
   
5. Planifier une maintenance régulière, mensuelle par exemple (passer le link checker, supprimer les fichiers inutiles ou mal optimisés, etc.). Une maintenance régulière est préférable à des maintenances trop espacées, trop longues à réaliser et mettant plus fortement le CMS à contribution sur une période courte.

[ Documentation Jahia : retour au sommaire ]