TABLE DES MATIÈRES
- Bibliothèque de médias
- Optimiser vos images pour la performance
- Shortcode
Votre site n’est évidemment pas une île isolée sur le web, et vous allez sans cesse y faire référence ou y intégrer des contenus venus d’ailleurs. Images, vidéos, cartes, fonctionnalités issues de plugins, etc.
Bibliothèque de médias
Utilisez votre médiathèque pour charger toutes les images et documents (type PDF) que vous utiliserez sur votre site web !
Pour les sons et les vidéos, leur poids pénaliserait votre site inutilement. Laissez-les hébergés sur des plateformes spécialisées (YouTube, Deezer, Spotify, SoundCloud, etc.). Vous pourrez les intégrer à votre site web en collant leur lien dans la partie “Texte” des éditeurs de vos blocs.
Pour les vidéos, vous avez un bloc dont la fonctionnalité est justement d’afficher une vidéo correctement sur le site !
Optimiser vos images pour la performance
Si les vidéos doivent être hébergées ailleurs, vos images, elles, vivent sur votre site. Pour éviter qu'elles ne ralentissent votre navigation : 1. Le poids et le format
- Le format WebP : C'est le nouveau standard. Il est beaucoup plus léger que le JPG ou le PNG.
- La compression : Avant de charger une image, passez-la dans un outil de compression comme Squoosh.app ou TinyPNG pour réduire le poids de vos fichiers.
- Le poids idéal :
- Bannières : max 400-500 Ko.
- Illustrations/Artistes : max 150-200 Ko.
Le saviez-vous ? Une image de 5 Mo (sortie directe d'un smartphone) mettra 10 fois plus de temps à s'afficher qu'une image optimisée de 200 Ko, épuisant ainsi le forfait data de vos visiteurs sur mobile ! Pour garder un site rapide et optimisé, ne traitez pas toutes vos images de la même manière. Retenez ce principe simple : moins une image prend de place sur l'écran, plus vous pouvez baisser sa qualité sans que cela se voie.
- Grande image (Bannière, Fond de page) : Elle doit être de haute qualité (Poids : ~400 Ko). Si on la compresse trop, elle devient floue.
- Image moyenne (Fiche Artiste, Portrait) : Elle s'affiche en plus petit dans une grille. On peut donc utiliser une qualité moyenne (Poids : ~100-150 Ko).
- Petite image (Icône, Décoration, Logo) : Elle est minuscule sur l'écran. Vous pouvez utiliser une qualité basse (Poids : < 50 Ko). Les défauts de compression seront invisibles à l'œil nu.
2. Dimensions et Ratios selon les blocs Pour éviter que vos images ne soient déformées ou rognées, respectez ces formats :
Type de contenu / Bloc | Ratio | Taille recommandée |
Hero (Background / Text Box / Round BG) | 16:9 | 1400 × 788 px |
Hero (Classic Center) / Vidéo / Editor | 5:3 | 1000 × 600 px |
Hero (Classic Right-Left / Round / Superposition) | 1:1 | 800 × 800 px |
Hero (Superposition Background) | 1:2 | 1400 × 788 px (Portrait) |
Articles / Events / Colonnes | 5:3 | 500 × 300 px |
Texte / Image | 4:5 | 600 × 750 px |
Équipe (Team) | 1:1 | 400 × 400 px |
3. Accessibilité (SEO) N'oubliez pas de remplir le "Texte alternatif" dans la bibliothèque de médias. Décrivez l'image (ex: "Portrait de l'illustrateur Jean Dupont").
Shortcode
Le shortcode est un autre élément régulièrement utilisé pour afficher des fonctionnalités d’un plugin par exemple.
Pour l’insérer dans votre page, il y a deux méthodes :
Méthode 1 : Coller du shortcode dans l’éditeur d’un bloc (n’importe lequel, mais généralement dans le bloc Editeur)
- copier le shortcode là où on vous le communique
- dans l’éditeur de votre bloc, aller dans l’onglet “texte”, qui est la version codée de ce que vous voyez dans “Visuel”.
- coller le shortcode à l’endroit souhaité et sauvegarder. Il est important que ce shortcode soit encadré par des crochets : [ MON SHORT CODE ]. Ils ressemblent à des accolades rectangulaires.
- sur PC : Sur la plupart des claviers, maintenez simultanément “Maj “+ “Alt “+ “parenthèse ouvrante ou fermante” ; ou bien “Alt G”r + “parenthèse ouvrante ou fermante”.
- sur Mac : maintenez simultanément “Option” + “Alt “+ “5” (parenthèse ouvrante) ou “°” (parenthèse fermante)
Méthode 2 : Utilisation du bloc Shortcode
Pour ajouter un bloc Shortcode,
- Cliquez sur le bouton “Ajouter un bloc”, ou sur le “+” en haut à gauche de la page.
- Modifier le bloc et coller le shortcode reçu dans le champ indiqué
