16 Graphiques, images et vidéos
Les graphiques, les images et les vidéos sont particulièrement nombreux sur l'internet. La plupart des utilisateurs se contentent de scanner le texte et ne le lisent pas en entier. Les images peuvent être utilisées pour attirer l'attention et expliquer simplement des choses complexes.
De nombreux visiteurs d'un site web le quitteront s'il est trop long à charger (plus de 3 secondes). Comme les images et les vidéos sont très gourmandes en ressources (mémoire, temps de chargement, performances d'affichage), vous devez vous assurer qu'elles ont été optimisées.
Il existe deux catégories pour l'utilisation des fichiers d'images sur le web. AVEC et SANS perte. "Lossy" signifie que lors de l'enregistrement et de la modification du fichier image, la qualité diminue de plus en plus. L'avantage est que la taille du fichier est moindre. Les fichiers "Lossless" (sans perte), en revanche, peuvent être sauvegardés sans perte de qualité, mais leur taille augmente généralement.
Les JPG font partie de la catégorie "Lossy" et conviennent le mieux aux photos et aux images aux couleurs très variées. Par exemple, la photo d'une plage ci-dessous. Les JPG peuvent être bien compressés, c'est-à-dire que leur taille de fichier peut être réduite sans perte significative de la qualité de l'image. Les JPG ne peuvent pas contenir des zones transparentes.
Les PNG peuvent contenir des zones transparentes et sont recommandées lorsqu'une image ne contient peu de couleurs différentes ou lorsqu'il est important d'avoir de la transparence. Comme les PNG appartiennent à la catégorie des fichiers sans perte, même avec une compression accrue, la qualité de l'image est généralement meilleure que celle des JPG. Cependant, en raison de la taille plus importante des fichiers, cela ralentit souvent le temps de chargement de votre site web. Dans la mesure du possible, vous ne devez pas choisir ce format pour les photos et les images détaillées.
WebP est un format d'image de Google qui combine les avantages du JPG (compression) et du PNG (transparents). Par rapport au JPG/PNG, WebP permet d'économiser jusqu'à 30% de la taille des fichiers. La prise en charge des navigateurs pour WebP](https://caniuse.com/#feat=webp) est d'environ 80 %, de sorte que les sites web pour les navigateurs plus modernes peuvent utiliser ce format (versions sorties après août 2020).
Le format GIF est particulièrement adapté aux séquences d'images courtes et animées. Il s'agit d'une vidéo qui peut être enregistrée sous forme d'une image. Cela vous permet de l'intégrer dans votre page HTML comme une image normale. Bien que le GIF appartienne à la catégorie Lossless, ce format est généralement difficile à utiliser sans une forte compression. Les GIF détaillés peuvent très rapidement atteindre une taille de plusieurs mégaoctets. Notre exemple ci-dessous "pèse" environ 5,2MB. À titre de comparaison, la photo de plage en JPG ci-dessus ne pèse que 0,8 Mo et pourrait être encore plus compressée. Bien que vous puissiez également enregistrer une image statique sous forme de GIF, ceci n'est pas vraiment utile ni recommandé. Le format GIF ne peut pas contenir plus de 256 couleurs.
SVG signifie "Scalable Vector Graphics" et est devenu la norme pour les images simples et schématiques, telles que les icônes et les logos. Les SVG sont petits en taille, peuvent être animés via CSS et Javascript et peuvent être modifiés dans leur apparence. Ils sont toujours d'une netteté maximale, car ils sont basés sur des vecteurs et non sur les pixels.
Dans l'exemple suivant, il n'y a guère de différence à première vue. Mais que se passe-t-il si nous agrandissons les deux graphiques ?
**icônes d'échelle
Taille et compression de l'image
Capture d'écran du programme "ImageOptim
Outre la taille du fichier, les dimensions de vos images sont également importantes. Quelle doit être la taille d'une image sur votre site web ? On ne peut pas répondre simplement à cette question, car les images peuvent aujourd'hui être produites en simple, double ou triple résolution pour une grande variété d'écrans. Respectez la règle suivante.
Voyez quelle taille votre image apparaîtrait sur un écran de 27 pouces.
Prenez le double des 742×495 pixels. Votre image doit être de 1484×990 pixels. De cette façon, il sera affiché de façon nette sur de nombreux appareils.
Néanmoins, nous voulons mentionner ici qu'il est bien sûr également possible d'utiliser des fichiers vidéo, par exemple au format MP4, directement en HTML. Cela est possible avec la balise <vidéo>
. Pour que les utilisateurs puissent lire votre vidéo, elle a également besoin de l'attribut "controls". Cela fait apparaître des contrôles en dessous de la vidéo, comme sur Youtube ou Vimeo. En HTML, cela ressemble à ceci :
Résultat
En savoir plus sur la vidéo
Dernière mise à jour