Ce guide concerne Site Creator, outil Infomaniak pour la création de site proposant entre autre une bibliothèque pour vos médias (images, vidéos, documents, etc.).

Prérequis

• Accéder à Site Creator:
  • Cliquer ici afin d'accéder à la gestion de votre produit sur le Manager Infomaniak (besoin d'aide ?).
  • Cliquer directement sur le nom attribué au Site Creator concerné.
  • Cliquer sur le bouton Éditer mon site pour démarrer l'éditeur:
    

Accéder aux fichiers

La bibliothèque est accessible depuis la partie inférieure du menu latéral gauche, sous Fichiers:

Ces médias seront à votre disposition lorsque vous éditerez vos pages et souhaiterez insérer du contenu. 

Organisez vos fichiers, dossiers et sous-dossiers

Attention vous ne pouvez pas:

• déplacer des fichiers/dossiers
• renommer des fichiers/dossiers
• supprimer un dossier si celui-ci n'est pas entièrement vide

Créer un nouveau dossier

Utiliser le menu d'action ⋮ en bas à droite de la fenêtre:

Charger un nouveau fichier dans la bibliothèque

Cliquez sur Envoyer un fichier pour parcourir votre disque dur et charger les fichiers désirés:

Les formats d'image habituels sont supportés (webp, jpg, jpeg, png, gif, svg, etc.), le format webp étant recommandé (il offre le meilleur ratio qualité/compression pour un affichage web ultra-rapide).

Idem pour les vidéos (mp4, mov, etc.) et vous pouvez également charger des fichiers (zip, pdf, etc.) afin de par exemple les mettre à disposition des visiteurs par le module Téléchargement de fichier.

Compresser une image

Les grandes images sont par défaut automatiquement redimensionnées lors de leur importation: les images qui font plus de 1200 px sont automatiquement réduites à 1200 px mais vous pouvez gérer cela dans les paramètres généraux:

Vous pouvez également compresser l'image elle-même avec l'option Compresser une image depuis la bibliothèque, afin de gagner en rapidité d'affichage de votre site:

Pour éviter cela, obtenir une clé API TinyPNG sur leur site et la renseigner sous Applications > TinyPNG de SiteCreator:

Ouvrir l'éditeur d'image

Survolez une image de la bibliothèque et cliquez sur le menu d'action ⋮ pour accéder à l'éditeur d'image:

Lorsque vous sauvegarderez vos modifications, l'image sera enregistrée en tant que copie dans votre bibliothèque:

Optimiser le référencement (SEO) et l'accessibilité

Une fois vos images importées depuis la bibliothèque vers vos pages Web, n'oubliez pas de renseigner leur Texte alternatif (balise Alt) dans les paramètres du bloc image. Cette description textuelle est essentielle : elle permet aux moteurs de recherche (comme Google) de comprendre le contenu de vos visuels, tout en rendant votre site accessible aux personnes malvoyantes qui utilisent des lecteurs d'écran.

Et puisqu'il n'est pas possible de renommer les fichiers une fois en ligne, prenez l'habitude de les nommer correctement sur votre ordinateur avant de les envoyer. Évitez les noms génériques (ex: IMG_1234.jpg) et privilégiez des noms descriptifs avec des tirets (ex: swiss-home-repair.jpg) pour améliorer votre référencement sur les moteurs de recherche.

Rechercher et utiliser des images libres

Dans la barre latérale gauche de la bibliothèque se trouve un élément de menu conduisant à des images stock (banque d'images) libres de droit que vous pouvez insérer dans votre bibliothèque pour agrémenter votre site:

Protéger votre contenu : interdire le clic droit

Cliquez sur Paramètres dans la barre latérale gauche puis sur Paramètres généraux. En bas se trouve une option qui une fois activée interdit le clic droit des visiteurs sur votre site:

Résoudre un problème d'envoi de média

Essayez de téléverser des WEBP, JPG ou PNG les plus légers possible (idéalement sous la barre des 500 Ko) ; il n'est pas nécessaire d'envoyer sur le serveur des images d'une largeur supérieure à 1000-2000 pixels.

Assurez-vous également que vos fichiers image soient enregistrés avec le profil colorimétrique RVB (RGB), qui est le standard pour un affichage sur écran. Évitez le profil CMJN (CMYK), qui est très lourd et exclusivement réservé à l'impression papier, car il peut provoquer des erreurs d'affichage ou bloquer l'importation.

Si vous essayez de téléverser des fichiers directement depuis votre appareil photo ou votre smartphone, essayez de les redimensionner avant le téléversement ; depuis votre iPhone par exemple, l'image peut être au format HEIF/HEIC, qui n'est pas pris en charge nativement par les navigateurs Web - essayez de la convertir en JPG d'abord.