La taille du fichier image affecte la vitesse à laquelle votre page web chargera. Ainsi, de façon générale on essaiera toujours de réduire la taille de notre fichier image au maximum.
Comment puis faire en sorte que l’image soit montrée de façon satisfaisante aux visiteurs de mon site avec un fichier image qui soit le plus petit possible?
La taille de l’image en pixels.
Notre premier outil pour aborder cette question c’est la taille en pixels de l’image. Pour réduire au maximum la taille que notre fichier image occupe en mémoire nous allons la réduire au plus grand format en pixels avec laquelle elle sera amenée à être montrée aux visiteurs de notre site web.
Par exemple, le contenu d’un article publié dans ce blog apparaît dans un espace qui a une largeur fixe de 470px. Ainsi lorsque j’ajoute une image au site dans le but de l’utiliser dans un article du blog, elle n’a que besoin d’être 470px de large. En résumé, si je mets une image plus grande je pourrai la faire apparaître de façon correcte dans le même espace grâce à mon code htm/css mais j’utiliserai de la mémoire en plus pour un résultat visuel final identique et la page mettra plus de temps à charger).
L’image suivante fesait à l’origine 2136 pixels de large et le fichier pesait 395.6 Kb. En réduisant sa taille pour qu’elle fasse 470px (et en utilisant de la compression jpeg : voir la suite) elle ne pèse plus que 65.5 Kb actuellement. Ce qui signifie que 6 fois moins d’informations doivent étres transmises à votre navigateur web avant que celui-ci puisse faire apparaître l’image dans son intégralité. Sur une connexion internet a moyenne / basse vitesse ceci va faire une énorme différence à la vitesse de chargement de ma page web.
Une autre chose à prendre en compte c’est que le fait de modifier la taille de l’image en pixels affecte directement la résolution de celle-ci. La résolution de ne doit être ni trop basse ni trop haute. Si elle est trop basse l’esthetique ne sera pas au rendez-vous, si elle est trop haute vous laissez la porte ouverte pour que d’autres personnes (mal intentionnées) réutilisent vos images pour d’autres choses sans votre consentment, ce qui peut éventuellement poser problème.
La compression Jpeg.
Un autre outil indispensable qui va nous permettre de réduire la taille en octets d’une image c’est la compression jgeg. Lorsque vous enregistrez une image au format jpg on vous demandera de préciser un paramètre de qualité (si ceci n’a pas lieu cherchez le dans les préférences de votre application). En ajustant ce paramètre vous allez pouvoir réduire d’avantage la taille de votre fichier image. Il faut cependant trouver un compromis entre ma qualité de l’image et la taille du fichier. L’image suivante à été sauvegardée à partir de GIMP avec une qualité de 50 pour cent, comme vous pouvez le constater la qualité est nettement inférieure à celle de l’image montrée précédemment.
Résumé
| Largeur (pixels) | Qualité Jpeg | Taille du fichier | Commentaires |
|---|---|---|---|
| 2136 | 100 | 495.5 Kb | Voici ce qu'il ne faut pas utiliser en ligne, le fichier est beaucoup trop gros et la page va mettre longtemps à charger. |
| 470 | 100 | 196.6 Kb | C'est mieux mais on peut encore mieux faire avec la compression jpg. |
| 470 | 86 | 65.5 Kb | Là c'est beaucoup mieux (6 fois moins de mémoire par rapport au fichier original) et la qualité reste bonne; voir première image de cette article |
| 470 | 50 | 45.1 Kb | Le fichier est très petit, mais la qualité n'est pas très bonne voir deuxième image de cet article. |
En espérant que ces informations vous seront utiles, si vous voulez aller plus loin je vous conseille de faire un tour sur le site du zero et plus particulièrement sur la partie concernant les images sur internet.
Commentaires (0)