14. Images, SVG et vidéos

Une menuiserie se vend par ses photos : un escalier en chêne, une cuisine posée, un atelier. Ce chapitre explique comment préparer une image avant de la téléverser, comment l’afficher avec l’élément Image, ce qu’est un SVG et quand l’employer, comment poser une photo en arrière-plan d’un bandeau sans sacrifier la lisibilité du texte, et comment intégrer une vidéo sans alourdir la page. Il vient juste après la typographie parce que texte et image se règlent l’un contre l’autre.

14.1 — Préparer une image avant de la téléverser

Le chapitre 03 l’a dit : sur une page vitrine typique, les images représentent la plus grosse part du poids téléchargé. Une photo prise avec un téléphone récent mesure 4 000 pixels de large et pèse entre 3 et 8 Mo ; affichée dans une carte de 400 px, elle est dix fois trop grande. WordPress en fabrique des versions réduites, mais il conserve l’original et ne le compresse pas vraiment. La bonne habitude est donc de préparer chaque image avant de la téléverser, en quatre gestes : choisir le format, réduire les dimensions, compresser, nommer.

Choisir le format

En pratique : les photos en WebP (ou en JPG si votre outil ne sait pas convertir), le logo en SVG, un PNG seulement quand il faut de la transparence sur une image qui n’est pas un logo. Les photos HEIC des iPhone doivent être converties avant tout : WordPress ne les accepte pas telles quelles.

Réduire, compresser, nommer

Les dimensions se règlent sur l’usage. Une photo de bandeau pleine largeur se prépare à 1 600 ou 2 000 px de large — au-delà, aucun écran courant n’en profite ; une image de carte ou de galerie à 800 ou 1 200 px ; un logo en pixels à 400 px de large (ou, mieux, en SVG). Le poids vise moins de 200 à 300 Ko pour un bandeau et moins de 100 Ko pour une image de carte. Un outil de compression gratuit, en ligne ou sur l’ordinateur, réduit dimensions et poids en une opération ; une qualité de 75 à 82 % est invisible à l’œil sur une photo. Le nom du fichier compte aussi : escalier-chene-murol.webp renseigne les moteurs de recherche, IMG_4521.JPG ne dit rien. Minuscules, tirets, sans accents ni espaces.

Le texte alternatif

Le texte alternatif (alt text) est une phrase courte qui décrit l’image pour qui ne la voit pas : la personne qui navigue avec un lecteur d’écran, le moteur de recherche, ou le visiteur dont la connexion a échoué. « Escalier quart tournant en chêne massif, réalisation à Murol » vaut mieux que « escalier », et infiniment mieux que rien. On le renseigne dans la Médiathèque, une fois pour toutes ; une image purement décorative (un motif de fond) peut garder un texte alternatif vide.

14.2 — La Médiathèque et les tailles générées

Toute image passe par la Médiathèque de WordPress (Médias › Ajouter, ou directement depuis le sélecteur d’image d’Elementor). À chaque téléversement, WordPress fabrique automatiquement plusieurs copies réduites : une miniature carrée de 150 px, une taille moyenne de 300 px, une grande de 1 024 px, puis des versions de 1 536 et 2 048 px, sans compter l’original. Les valeurs des trois premières se modifient dans Réglages › Médias. Si l’original dépasse 2 560 px, WordPress en crée en outre une version réduite qu’il sert à la place — mais il garde le fichier lourd sur le serveur, d’où l’intérêt de réduire avant.

Ces tailles expliquent le champ Résolution (Resolution) que vous verrez sur l’élément Image : il choisit laquelle de ces copies la page télécharge. Pour une carte de 400 px de large, la taille « Moyenne » ou « Medium Large » (768 px) suffit ; réserver la taille originale aux bandeaux, c’est diviser le poids d’une galerie par cinq.

14.3 — L’élément Image

L’Image atomique affiche une image de la Médiathèque. Son onglet Général propose l’image elle-même, la Résolution et un Lien (vers une page du site ou une adresse externe). L’onglet Style est celui de tous les atomes : c’est dans Taille que se règlent la largeur et la hauteur, dans Bordure que se dessinent les coins arrondis, dans Effets que s’ajoutent une ombre ou un filtre.

Un point mérite explication : que se passe-t-il quand la boîte n’a pas les proportions de l’image ? Par défaut, l’image se déforme ou déborde. Le réglage d’ajustement de l’objet (object-fit), proposé avec les réglages de taille, répond à la question : Cover remplit la boîte en recadrant ce qui dépasse (le cas habituel pour une photo), Contain montre l’image entière en laissant du vide (le cas d’un logo). Avec Cover, une position d’objet permet de choisir la zone conservée (le centre, le haut…).

1. Déposez une Image dans le premier Bloc Div « Escaliers » de la page d’accueil, au-dessus du Titre H3.
2. Choisissez la photo escalier-chene-murol.webp dans la Médiathèque (téléversez-la si besoin, avec son texte alternatif).
3. Réglez la Résolution sur Medium Large : l’image sera affichée à moins de 400 px de large.
4. Dans Style › Taille, largeur 100 %, hauteur 240 px, ajustement Cover : les trois cartes auront des images de même hauteur, quelles que soient les photos.
5. Dans Style › Bordure, rayon 12 px sur les quatre coins. Enregistrez avec Ctrl+S (Cmd+S sur Mac).

14.4 — Le SVG : logos et icônes

L’élément SVG atomique affiche un tel fichier ; ses réglages généraux sont le fichier, un lien et un ID. Particularité utile : si le fichier a été exporté en noir, sans couleur de remplissage imposée, sa couleur se règle dans la section Typographie de l’onglet Style, comme celle d’un texte (Centre d’aide Elementor, page « SVG element »). Le logo de la Menuiserie Roche pourra ainsi passer en anthracite sur fond clair et en blanc cassé dans le pied de page, à partir du même fichier.

14.5 — Image d’arrière-plan et voile de couleur

Le bandeau d’accueil d’un artisan montre presque toujours une photo derrière le titre. Cette photo n’est pas un élément Image : c’est l’arrière-plan du Flexbox qui forme le bandeau. La section Arrière-plan (Background) de l’onglet Style d’un conteneur atomique accepte une couleur, une image ou un dégradé — et, nouveauté de l’Éditeur atomique, plusieurs couches empilées. Pour une image, on règle la position (centrée, en haut…), la taille (Cover pour couvrir tout le conteneur, Contain pour la montrer entière), la répétition (aucune, pour une photo) et l’attachement.

Le problème du texte sur photo, vu au chapitre 13, se règle ici. Entre la photo et le texte, on glisse un voile : une couche de couleur unie rendue partiellement transparente. De l’anthracite #2B2B2B à 40 % d’opacité assombrit la photo juste assez pour qu’un titre blanc cassé reste lisible sur n’importe quelle zone de l’image, sans la transformer en aplat. L’ordre des couches compte : la première de la liste est celle du dessus.

Les dégradés (gradients) suivent la même logique de couches : deux couleurs, un angle, et l’on obtient un fond vivant sans image. Un dégradé du bois chaud vers l’anthracite, posé au-dessus d’une photo avec une opacité réduite, donne un bandeau très « atelier ». Gardez la main légère : un dégradé par page suffit.

14.6 — Vidéos : trois éléments, un seul choix à faire

Elementor propose trois façons d’afficher une vidéo. Le bon choix dépend de l’endroit où le fichier est hébergé et de ce que vous acceptez de charger chez vos visiteurs.

La Vidéo atomique lit un fichier auto-hébergé, c’est-à-dire téléversé dans votre Médiathèque (format MP4). Ses options : temps de début et de fin, lecture automatique (avec une option distincte pour la lecture sur mobile), son coupé, boucle, affichage des contrôles du lecteur, autorisation de téléchargement, préchargement, et une image d’affiche (poster) montrée avant la lecture. C’est le bon outil pour un clip court de l’atelier — vingt à trente secondes, moins de 5 à 10 Mo, préparé avec un outil de conversion vidéo. Au-delà, le fichier pèse trop pour être servi confortablement par un hébergement mutualisé.

L’élément YouTube atomique se contente de l’adresse de la vidéo et de ses temps de début et de fin. YouTube héberge, diffuse et s’adapte au débit du visiteur : c’est la solution pour toute vidéo de plus d’une minute. En contrepartie, le lecteur YouTube charge des ressources tierces et dépose des cookies dès l’affichage de la page, ce qui relève du consentement traité au chapitre 35.

Le widget Vidéo classique couvre YouTube, Vimeo, Dailymotion, VideoPress et l’auto-hébergé. Il ajoute deux réglages précieux : un Mode confidentialité (Privacy Mode) pour YouTube, qui retarde le dépôt de cookies jusqu’au clic sur lecture, et une Image de superposition (Image Overlay) : la page affiche une image fixe avec une icône de lecture et ne charge le lecteur qu’au clic, éventuellement dans la Visionneuse. C’est la combinaison la plus légère et la plus respectueuse : une image de 60 Ko à l’affichage, le lecteur seulement pour qui le demande.

14.7 — Visionneuse, Galerie basique et Carrousel d’images

La Visionneuse (Lightbox) est la fenêtre sombre qui s’ouvre par-dessus la page pour montrer une image en grand, avec des flèches pour passer à la suivante. Elle se règle une fois pour toutes dans Réglages du site › Visionneuse (activation, couleur du fond, affichage de la légende) ; ensuite, tout widget classique dont le lien pointe vers le Fichier média l’utilise.

Pour la page « Réalisations », deux widgets classiques font le travail. La Galerie basique (Basic Gallery) affiche une grille de photos : on choisit les images, la Taille d’image servie (« Medium Large » ou « Large », jamais l’originale), le nombre de Colonnes par appareil, et le Lien vers le Fichier média pour ouvrir la Visionneuse — qui enchaîne alors toute la galerie. Le Carrousel d’images (Image Carousel) fait défiler les photos une ou plusieurs à la fois : nombre de diapositives affichées (réglable par appareil), flèches et points de navigation, lecture automatique avec pause au survol, boucle infinie. Un carrousel n’est jamais regardé jusqu’au bout : mettez la meilleure photo en premier, et gardez une galerie pour les visiteurs qui veulent tout voir. Le chapitre 16 détaille les réglages de ces deux widgets ; le chapitre 27 montrera comment générer automatiquement une galerie à partir de fiches « Réalisation ».

Enfin, si des images lourdes sont déjà en ligne, l’outil Image Optimization d’Elementor (menu Elementor › Image Optimization) les convertit et les compresse sur place ; il consomme les crédits du plan One, à raison de 10 crédits par image. Sans One, une extension d’optimisation d’images ou l’outil de l’hébergeur rendent le même service — et surtout, la préparation avant téléversement décrite en 14.1 évite d’en avoir besoin.