Les contenus embarqués dans WordPress
Introduction
Encore plus que les images, les médias audio et vidéo représentent de gros volumes de données. Ils sollicitent beaucoup le réseau. Le premier réflexe à avoir est de se poser la question de l’évitement. Est-ce que l’information à transmettre nécessite ce support ? Est-ce que l’apport du son et de l’image a une vraie plus-value ? Si les réponses sont oui, il est alors nécessaire de rendre les fichiers les plus légers possible et de prendre garde à leur accessibilité.
Comme pour les images, il est préférable de commencer par travailler en local pour ajuster la résolution et la compression d’une vidéo avant de l’utiliser sur votre site.
Les fichiers téléchargeables et les fichiers PDF sont aussi des contenus embarqués à part entière. Il faut donc aussi se poser les questions d’évitement et s’ils sont indispensables, il faut également les rendre les plus accessibles possible.
Insérer une vidéo
Optimiser le poids d’une vidéo
Diminuer le poids des vidéos par la définition
La définition est, sans l’ombre d’un doute, le facteur permettant les plus gros gains du point de vue de la taille de fichier et donc de la sollicitation du réseau lors du chargement de la vidéo. Est-il nécessaire d’avoir une résolution HD (ou pire, 4K voire 8K) pour un affichage sur un écran de smartphone, sachant que seules les plus grandes salles de cinéma projettent une image en 4K (la majorité des salles utilisent des projecteurs 2K, résolution proche du Full HD) ?
Il est possible de présenter des vidéos sobres et efficaces en s’interrogeant sur les conditions de diffusion de ces supports afin de limiter la résolution finale du fichier au minimum nécessaire.
Voici un comparatif du poids des fichiers pour un enregistrement de 1 minute à 30 images par seconde sans compression :
Conditions de diffusion |
Résolution |
Norme |
Définition |
Poids |
Smartphone uniquement |
480p |
DVD |
720×480px (16/9) |
20 Mo |
Smartphone/Tablette/Ordinateur |
720p |
HD Ready |
1280×720px (16/9) |
60 Mo |
Écran de plus de 50 pouces/Projection vidéo grand format (moins de 10 m de base) |
1080p |
Full HD |
1920×1080p (16/9) |
130 Mo |
Projection vidéo grand format (plus de 10 m de base) |
2160p |
UHDTV1 (4K) |
3840×2160px (16/9) |
375 Mo |
Écrans diffusant en 8K (extrêmement rares et onéreux…) |
4320p |
UHDTV2 (8K) |
7680×4320px (16/9) |
600 Mo |
Une bonne règle est d’utiliser une définition de 480p pour les smartphones et de 720p pour les ordinateurs.
Diminuer le poids des vidéos par la durée
Plus une vidéo est courte, moins elle est lourde ! Avant le tournage, il est donc intéressant de concevoir la vidéo le plus efficacement possible. Il faut bien penser aux messages que vous souhaitez faire passer, bien ordonner et structurer les idées, les rendre compréhensibles. C’est la clef du succès. Votre vidéo sera plus attractive et efficace qu’une vidéo trop longue !
Sachez que le temps moyen de visionnage d’une vidéo sur les réseaux sociaux excède rarement la minute, et ce, quelle que soit la plateforme....
Insérer de l’audio
L’audio au format MP3
Par défaut, WordPress n’accepte que le format MP3 pour le bloc Audio.
Commencez par ajouter le fichier audio musical dans la médiathèque (la procédure est identique à l’ajout d’images). Il est préférable d’avoir procédé au préalable à la compression du fichier en local avec un outil dédié.

Dans le contenu rédactionnel voulu du site, insérez le bloc Audio.

Si, comme dans cet exemple, le fichier audio est déjà dans la médiathèque, cliquez sur le bouton Médiathèque.
Sélectionnez le fichier audio.

Lorsque le fichier audio est sélectionné, sur la droite, des champs sont disponibles pour le décrire. Renseignez ou modifiez ces champs si besoin.
Cliquez sur le bouton Sélectionner.
Le fichier audio est bien inséré dans le bloc Audio :

Dans la colonne latérale Réglages, sous l’onglet Bloc et dans le volet Réglages, paramétrez ce bloc Audio :

Vous disposez des options Lecture automatique et Répéter (répétition en boucle du fichier audio) et de la liste déroulante PRÉCHARGEMENT. Ces réglages sont comparables à ceux vus précédemment pour la vidéo....
Proposer des documents à télécharger
Certains sites web proposent aux visiteurs de télécharger des fichiers. Ces fichiers peuvent être sous différents formats.
La première question à se poser avant de proposer de tels téléchargements est de se demander si les fichiers sont accessibles. Par exemple, un document scanné ou un document transformé en PDF à l’aide d’une imprimante virtuelle sont complètement inaccessibles.
L’accessibilité des documents
Le format HTML
Le HTML est un format parfaitement accessible à condition que le document respecte les règles du WCAG.
Les formats bureautiques
Les formats bureautiques d’Office (.docx, .pptx, .xlsx…) ou leurs équivalents libres (.odt, .odp, .ods…) sont parfaitement accessibles à condition que les documents respectent les mêmes règles qu’un site internet : utilisation de titres, contraste suffisant, etc. y compris les alternatives textuelles pour les images.
Voici la démarche à effectuer avec Libre Office :
Ouvrez le menu contextuel d’une image et cliquez sur Propriétés.
Dans l’onglet Options, complétez le champ Alternative (texte seul).
Voici la démarche à effectuer avec Microsoft Office :
Ouvrez le menu contextuel d’une image...
Afficher des documents PDF
Vous pouvez proposer à vos visiteurs de visualiser des fichiers PDF directement dans des pages.
Il est nécessaire de s’assurer que le document PDF est accessible. Sinon, il faudra proposer une alternative dans un format accessible.
Si vous proposez des fichiers PDF à la consultation, vous devez proposer une visionneuse sur votre site. Pour cela, il faut obligatoirement utiliser une extension. Parmi toutes celles disponibles, l’extension PDF Viewer Block pour Gutenberg est très bien faite et elle est développée par un Français.
Installez et activez cette extension.

Ensuite, ajoutez le fichier PDF dans la médiathèque.

Dans le contenu voulu, ajoutez le bloc PDF Viewer et sélectionnez le fichier PDF à afficher.

Dans la colonne latérale des réglages, modifiez si besoin la largeur WIDTH (PIXELS) et la hauteur HEIGHT (PIXELS) de l’aperçu :

Pour accéder au code généré par WordPress pour ce bloc, cliquez sur le bouton des options du bloc, puis sur Modifier en HTML :

Voici l’affichage obtenu dans un navigateur :
