💥 Accédez en illimité à
tous nos livres & vidéos, sur l'IA, le dev, les réseaux... Cliquez ici
-100€ sur l'abonnement annuel à
la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres & vidéos
  2. WordPress, Accessibilité et Green IT
  3. Les contenus embarqués dans WordPress
Extrait - WordPress, Accessibilité et Green IT Comment créer votre site web en respectant les principes du Numérique Responsable ?
Extraits du livre
WordPress, Accessibilité et Green IT Comment créer votre site web en respectant les principes du Numérique Responsable ? Revenir à la page d'achat du livre

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é.

images/C08-017.png

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

images/C08-018.png

 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.

images/C08-019.png

 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 :

images/C08-020.png

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

images/C08-021.png

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.

images/C08-035.png

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

images/C08-036.png

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

images/C08-037.png

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

images/C08-038.png

 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 :

images/C08-039.png

Voici l’affichage obtenu dans un navigateur :

images/C08-040.png