Les images sur le web...
Les images sur le web prennent une place essentielle et prennent aussi la tête
format, compression, colorimétrie, dimensions, affichage,
résolution d'écran, css, ressources ;
autant de paramètres et de techniques pas toujours faciles à maîtriser.
Les différents formats d'images sur le web
Il faut d'abord distinguer les images au format bitmap (basé sur les pixels)
des images vectorielles (basé sur la géométrie et le calcul).
La plupart du temps,
nous utilisons des images bitmap
sur les sites web et ces images sont compressées
à la fois pour s'adapter aux écrans
et pour proposer des tailles de fichiers acceptables à télécharger.
Ensuite, il faut parler des formats colorimétriques.
On utilise le format RVB pour le web :
Rouge, Vert, Bleu
c'est le mode par défaut des écrans.
Une couleur se définit donc sous la forme de 3 paramètres
R (de 0 à 255), V(de 0 à 255) et B(0 à 255).
Une couleur RVB correspond une notation hexadécimal
(par exemple #FFFFFF pour la couleur blanche),
Le format RVB doit être différencié du format CMJN ,
format en quadrichromie qui,
lui, est destiné à l'impression numérique et offset
Il est malheureusement aisé de le confondre
car il est parfois sauvegardé sous forme de Jpeg...
L'affichage des couleurs dépend aussi
de la qualité et du type de votre écran.
Les couleurs affichées peuvent avoir un rendu différent
même si la définition RVB est la même.
Pour ce qui est du Green Digital
Il faut redimensionner les images en dehors du navigateur.
Sur une page web, il est nécessaire de définir la taille d'affichage d'une image.
Cette taille se définit en largeur (width)
et en hauteur (height)
et la plupart du temps en pixels.
Les navigateurs ré-adaptent automatiquement la taille d'une image
pour celle demandé à l'affichage.
L'erreur classique consiste donc, par exemple,
à afficher une image de 500px sur 400px
sur la page à partir d'une image faisant le double,
c'est-à-dire 1000px par 800px ;
ce qui augmente énormément le temps de chargement.
La compression d'images bitmap
Voici les 3 principaux formats de compression d'images utilisés actuellement,
chacun possédant ses caractéristiques, ses avantages et ses défauts :
- JPEG (Joint Photographic Expert Group) : Compression de pixels |
Ne permet pas la transparence | Il est statique.
La compression est facilement adaptable
et donne des fichiers légers, visibles sur tous les navigateurs & programmes.
Attention, cependant, à la perte de qualité
lorsque le fichier est compressé en dessous de 50%.
L'utilisation de ce format est parfait pour des photos,
images riches en couleurs.
Et il est bien adapté pour les réseaux sociaux.
- GIF (Graphics Interchange Format) :
Permet la compression de couleurs, |
la transparence brut (sans opacité) |
Animé ou non.
Connu et largement utilisé pour des animations courtes,
il est approprié pour des graphismes avec peu de couleurs.
Attention ce format n'affiche pas bien les dégradés de couleurs.
- PNG (Portable Network Graphics) :
Permet la compression de très bonne qualité |
la transparence par couche alpha (permet l'opacité) |
Il est statique.
Il est parfaitement adapté pour des graphiques, des logos,
des icônes mais un peu lourds pour des photos de grande taille.
Attention, il existe des sous-catégories le format PNG 8 bit,
16 Bit, 24 bit et 32 Bit et même plus
Les images vectorielles
Une image vectorielle a le grand avantage
d'avoir la même taille de fichier quelque soit sa taille d'affichage
Le principal format utilisé est celui-ci :
SVG (Scalable Vector Graphics) :
Format vectoriel |
Permet la transparence par couche alpha | il est statique.
C'est un format idéal pour les logos et les icônes.
Attention, des versions d'anciens navigateurs
ne le reconnaissent pas et les réseaux sociaux
ne supportent pas toujours ce format.
Pour ce qui est du Green Digital :
La compression des images sur votre site web est une étape très importante.
sur des CMS comme Wordpress,
les imports d'image s'opèrent sous différentes tailles
mais c'est à vous de déterminer s'il faut utiliser du png,
du jpeg ou du gif.
Les robots d'indexation sont aujourd'hui
très sensibles aux efforts de compression.
Voici aussi d'autres techniques pour économiser des ressources images :
- Faire du Lazy-loading : cela consiste à n'afficher
les images que lorsqu'elles sont visibles à l'écran.
- Privilégier l'utilisation de CSS à l'utilisation d'images (boutons par exemple).
- Utiliser des sprites CSS afin de limiter les requêtes http
en utilisant un fichier image unique pour afficher des sous-images une à une.
- Importer des police d'icônes : Les images vectorielles sont encapsulées
dans la police et de simples styles css permettent d'afficher les icônes.
Attention, si vous n'avez besoin que de deux ou trois icônes,
le chargement complet de la police peut s'avérer
contre-productif par rapport au gain attendu.
► « Il n'y a pas que Youtube dans la vidéo... »