Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Optimiser ses images pour le web

Compatible HTML. Cliquer pour en savoir plus sur les compatibilités.Par Nanoum (Anne Weisbeck), le 13 juillet 2006

La compression des images est primordiale dans un site. En effet, les images doivent être suffisamment compressée pour ne pas alourdir la page mais il faut également savoir faire un bon compromis entre le poids et la qualité de l'image et choisir le format de compression le plus adapté à l'image. Le poids d'une page et des images qu'elle comporte conseillé ne doit pas excéder 50ko.

Les différents formats d'images pour le web :

GIF

Graphic Interchange Format. Format propriétaire. Le format gif est limité à 256 couleurs mais utilise une méthode de compression sans perte. Le gif peut également permettre d'avoir des zones de votre image transparentes mais il ne permet pas différents niveaux de transparences. Le taux de compression va être déterminé par le nombre de couleurs conservées (256, 128, 64 …). Le nombre de couleur est l'élément qui prime pour un gif, ainsi une image de 2 couleurs de 2*2 px fait le meme poids que la même image de 22*22 px.

Le format gif permet également un affichage entrelacé (ou progressif) : Le gif entrelacé affichera une image progressivement, il est utilisé pour les images plus lourdes. Ceci permet de faire patienter l'internaute, mais alourdit par contre la taille du fichier et demande plus de ressources machine pour la décompression.

Les gifs animés : Il s'agit d'une succession d'images gifs de mêmes formats qui s'enchaîneront à la suite sous la forme d'une animation. Le temps d'affichage de chaque image est paramétrable ainsi que le nombre de boucles que l'animation devra effectuer.
A utiliser pour : Les images avec beaucoup d'applats de couleurs ou peu de couleurs. Les images composées avec du texte, les logos.

JPEG

Joint Photographic Experts Group. La compression d'image se fait avec perte mais le nombre de couleurs n'y est pas limité. L'algorithme de compression utilisé élimine des données peu perceptibles à l'œil, appelées redondances psycho-visuelles. La compression est déterminée en pourcentage qui détermine le degré de compression et rend l'image plus granuleuse dans les zones contenant des limites contrastées ou peu parfois créer des blocs nuisant à la restituion des détails. Le jpeg peut, comme le gif peut, être progressif.

Lorsque vous enregistrez vos images pour le web en jpeg, vous avez la possibilité, en plus du choix de degré de compression, de flouter votre image, ce qui réduira son poids.
A utiliser pour : Les photographies. Images avec de nombreuses couleurs/nuances, avec des dégradés fins.

PNG

Portable Network Graphics. Le png empreinte les caractéristiques à la fois du gif et du jpeg. Il n'est pas limité à 256 couleurs comme le gif et la compression est sans perte.

Le png gère la transparence comme le gif, mais permet surtout des niveaux différents de transparence (PNG-8 - PNG-24), et donc conserve une meilleure restitution de la qualité de l'image (dégradés/contour progressif ). De ce fait, le fichier Png est nécessairement plus lourd que le Giff ou le Jpeg. Cependant ce type d'image n'est pas pris en compte par tous les navigateurs. Seules les versions supérieures à IE-4 et NN6 peuvent afficher l'image et la transparence en alpha ne sera pas prise en compte sur ie6. Le png permet également de créer des images entrelacées.

Conseils pour optimiser vos images :

Spécifiez toujours les dimensions de l'image lorsque vous les intégrez dans vos pages (attributs width et height de la balise img). Le texte pourra ainsi s'afficher avant que vos images ne soient totalement chargées et le visiteur aura ainsi plus rapidement accès au contenu de votre page. Si vous ne connaissez pas la taille de vos images car vous utilisez une base de données dans laquelle vous stockée tous les chemins de ces images, vous pouvez utilisez la fonction php getimagesize() qui retourne un tableau contenant les dimensions de l'image.

Ne redimensionnez jamais votre image dans Dreamweaver ! La qualité d'une image redimensionnée dans dreamweaver sera altérée alors que le poids d'origine sera toujours le même. Pour modifier les dimensions d'une image, passez toujours par un éditeur graphique.

Pour vos interfaces, découpez vos images, plusieurs petites images se chargeront plus vite en même temps qu'une seule grosse. Si vous avez à l'intérieur des zones d'aplats importants, générez les par des cellules de tableaux ayant une couleur de fond.

Selon l'image, il peut être meilleur d'appliquer des compressions différentes selon la tranche (Gif pour les textes, Jpeg pour les images). Il faudra découper l'image de façon intelligente de manière à ce que les différentes tranches se racordent bien entre elles! C'est un bon compromis afin de préserver la qualité d'image tout en privilégiant un affichage plus rapide.

Si vous avez de nombreuses images à afficher, une galerie de photos par exemple, faites en des miniatures et ouvrez vos images en taille réelle avec une popup.

Lors de la réalisation de miniatures, vous réduisez les dimensions de votre image, celle-ci devient donc plus floue. Pour améliorer son impact et sa lisibilité, modifiez en les contrastes, rendez les contours plus nets à l'aide de votre éditeur graphique.

Si vous voulez avoir une bordure de couleur uniforme autour de votre image par exemple, ne la créez pas dans votre image. Réalisez votre image sans bordure et insérer votre image centrée dans une cellule de tableau de taille supérieure à l'image et avec un fond de couleur, vous y gagnerez en poids.

N'utilisez les formats entrelacés que pour de grosses images supérieures à 30ko car cette option augmente le poids de l'image.

Dans tous les cas, faites toujours plusieurs essais pour voir quel format et quel taux de compression sera le plus adapté à votre image et testez tous les paramètres qui sont à votre disposition pour chaque format.

GIF - 16 couleurs - 2.99 ko

GIF - 64 couleurs - 4.06 ko

GIF - 256 couleurs - 5.58 ko

logo_jpg_30.jpg

JPG - 30 % - 3.93 ko

logo_jpg_60.jpg

JPG - 60 % - 7.16 ko

logo_jpg_100.jpg

JPG - 100 % - 18.2 ko

GIF - 16 couleurs - 9.81 ko

GIF - 64 couleurs - 17.8 ko

GIF - 256 couleurs - 28 ko

jardin_jpg_30.jpg

JPG - 30 % - 5.78 ko

jardin_jpg_60.jpg

JPG - 60 % - 11.8 ko 

jardin_jpg_100.jpg

JPG - 100 % - 41.2 ko