Les images et la médiathèque

La médiathèque

L’écran Médias rassemble tous les fichiers de votre site : images, vidéos, sons et documents. Les filtres Tous, Images, Vidéos, Audio et Documents vous aident à vous y retrouver.

Importer des fichiers

1. Ouvrez Médias.
2. Cliquez sur Importer, ou glissez-déposez vos fichiers dans la fenêtre.

Les fichiers sont copiés dans le dossier de votre site : ils restent disponibles hors ligne et partent avec lui à la publication.

Un fichier refusé est nommé, avec la raison : une vidéo de plus de 100 Mo, par exemple, est à compresser avant l’import.

Un document importé (PDF, Word, Excel…) est publié sous une adresse lisible, tirée de son nom, par exemple /media/rapport-annuel.pdf : plus facile à partager.

Placer une image dans une page

Ajoutez un bloc Image ou Galerie (tapez /), puis cliquez sur la zone de l’image. Le sélecteur propose :

• Bibliothèque : vos médias, avec un bouton Importer pour en ajouter un sans quitter la page ;
• Banque d'images : des photos libres de droits, à utiliser gratuitement (voir ci-dessous) ;
• Icônes : une bibliothèque d’icônes, avec une recherche qui comprend les mots de votre langue, avec ou sans accents ;
• selon l’endroit, URL externe : une image hébergée ailleurs.

La banque d’images

L’onglet Banque d'images propose des photos libres de droits, fournies par Pexels, à utiliser gratuitement sur votre site. Décrivez ce que vous cherchez, dans la langue du site : un clic sur une photo l’ajoute à vos médias et la place. Dans une galerie, vous en choisissez plusieurs d’un coup. Le nom du photographe s’affiche au survol.

La banque d’images demande une connexion à Internet et une édition payante de TOWeb. Une fois ajoutées, les photos font partie de votre site, comme celles que vous importez.

Retrouver une image

Dans la Bibliothèque, la recherche retrouve une image par son nom ou par son texte alternatif, sans tenir compte des majuscules ni des accents. Les images se trient des plus récentes aux plus anciennes ou par nom, et le filtre Non utilisées montre celles qui ne sont placées nulle part sur le site. Le champ de recherche est prêt dès l’ouverture de la fenêtre, et ⌘F (Ctrl+F sous Windows) y ramène. Dans une galerie, les images déjà choisies le restent quand la recherche change.

Vidéos et diaporamas

Pour une vidéo, ajoutez un bloc Média (tapez /) : la vidéo s’affiche avec ses commandes, et le même bloc accepte une vidéo YouTube ou Vimeo. Une vidéo peut aussi servir de fond de section : muette et en boucle, derrière le texte (voir Les sections). Sur un site traduit, le bloc Média peut afficher une vidéo YouTube ou Vimeo différente selon la langue : activez Une vidéo différente selon la langue et collez l’adresse de chaque langue.

Quand vous choisissez une vidéo de la médiathèque, dans un bloc Média ou en fond de section, son Image de couverture est tirée de la vidéo elle-même : c’est elle que voit le visiteur tant que la vidéo n’est pas lancée. Pour choisir l’instant exact, cliquez sur Choisir dans la vidéo, faites glisser le curseur jusqu’à l’image voulue, puis cliquez sur Utiliser cette image. Une couverture choisie à la main n’est jamais remplacée.

Sur un site qui affiche une bannière de cookies, une vidéo YouTube, Vimeo ou Dailymotion attend l’accord du visiteur, comme la loi le demande : à sa place, un message nomme le service et propose Afficher la vidéo. Une vidéo importée dans la médiathèque s’affiche toujours directement, et l’Aperçu de TOWeb montre tout.

Choisissez une vidéo MP4, WebM ou MOV. Une vidéo dans un format que les navigateurs ne savent pas lire (AVI, WMV…) est signalée à l’import : convertissez-la en MP4 (H.264), par exemple avec le logiciel gratuit HandBrake, ou publiez-la sur YouTube ou Vimeo.

Le bloc Média lit aussi les sons (MP3, M4A ou AAC, un podcast par exemple) avec un lecteur.

Pour un diaporama, ajoutez un bloc Galerie, choisissez la disposition Carrousel, et activez Défilement automatique si les images doivent défiler seules. Chaque image du carrousel peut porter un Lien : une page du site, une adresse ou un fichier.

Choisissez ensuite la cadence dans Changer d’image toutes les : 3, 5 ou 8 secondes (5 par défaut).

Une version par langue

Sur un site traduit, un média peut avoir une version pour chaque langue : la brochure PDF en anglais, une image dont le texte est en allemand… Sélectionnez le média dans l’écran Médias, puis, dans Versions par langue, cliquez sur Ajouter en face de la langue et choisissez le fichier, du même type que l’original.

Les pages de cette langue affichent alors sa version partout où le média est employé : images, galeries, fichiers à télécharger, image de partage. Les autres langues gardent le fichier d’origine. Republiez le site pour mettre les versions en ligne.

Décrire vos images

Donnez à chaque image un Texte alternatif : une courte description, lue par les lecteurs d’écran et par les moteurs de recherche. L’optimiseur de l’écran Publier signale les images qui n’en ont pas.

TOWeb ne reprend pas le nom du fichier comme texte alternatif : une image importée n’en a pas tant que vous ne l’avez pas décrite.

Faire le ménage

Sélectionnez un fichier pour voir ses propriétés : type, dimensions, taille et pages qui l’utilisent. Un média qui n’est utilisé dans aucune page est signalé : vous pouvez le supprimer sans risque. Pour en supprimer plusieurs, sélectionnez-les puis cliquez sur Supprimer.

Garder un site léger

Une image de plus de 500 Ko est signalée par l’optimiseur au moment de publier. Des images légères chargent plus vite, et comptent moins dans la limite de 50 Mo de l’édition Standard.

À la publication, TOWeb prépare chaque image pour le web : il la convertit au format WebP, en plusieurs tailles, jusqu’à 2 880 pixels de large pour les écrans haute définition (Retina). Chaque visiteur reçoit la taille qui convient à son écran : un téléphone ne télécharge pas l’image prévue pour un grand écran. Vous n’avez rien à régler, et vos fichiers d’origine restent intacts dans la médiathèque.