16 Graphiques, images et vidéos
Dernière mise à jour
Dernière mise à jour
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.
Image par Fezbot2000 sur Unsplash
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.
Image by uihere
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).
Liens connexes
WebP - Un nouveau format d'image pour le Web (developers.google.com)
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
Avant de mettre votre site web à disposition sur Internet, vous devez optimiser toutes les images. Le moyen le plus simple est d'utiliser un programme comme Optimage (Mac) ou ImageOptim (Windows/Mac) ou encore TinyPNG en version web. Vous pouvez simplement glisser et déposer vos images dans le programme et il fera le reste. Le niveau de qualité peut être réglé à 80-90% dans les paramètres pour enregistrer une taille de fichier encore plus importante. Le visiteur de votre site web ne le voit généralement pas, donc une qualité d'image inférieure n'est pas un inconvénient. Avec Optimage, vous pouvez en outre définir que les dimensions de votre image doivent également être réduites.
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.
Si une image est plus grande qu'environ 200 KB, cela devrait être un signal d'alarme pour l'optimiser. Vous pouvez modifier les dimensions d'une image avec de nombreux programmes différents. Par exemple, vous pouvez utiliser Optimage , l'application de prévisualisation préinstallée sur votre Mac, ou bien sûr Adobe Photoshop .
Il est préférable de conserver les vidéos dans un service vidéo comme Vimeo ou YouTube . Vous obtenez alors un code d'intégration (<iframe>), avec lequel vous pouvez intégrer la vidéo sur votre page web. L'avantage de ces services est qu'ils sont souvent gratuits et qu'ils stockent pour vous d'énormes vidéos. En outre, votre vidéo est également disponible en différentes résolutions, de sorte que la qualité est automatiquement adaptée à la bande passante disponible de vos utilisateurs. Vous avez donc moins de travail et pouvez fournir des vidéos rapidement.
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
Image de Gfycat
Examiner l'image avec les outils de développement. En mode responsive, vous pouvez spécifier une résolution de 1920×1080 pixels. Lorsque vous examinez l'image, vous en voyez les dimensions. Dans notre exemple, il s'agit de 742×495 pixels.
