Quel format d’image pour votre site web : JPEG, GIF ou PNG?

Alice | 30 juin 2009 | Web | Tags : formats, images, optimisation, webdesign

Optimiser le temps de chargement d’une page web n’est pas forcément si difficile qu’on peut le croire. Le simple fait d’alléger vos images permettra un chargement plus rapide de votre page web. Et comme nous sommes dans une ère du multimédia dans laquelle la communication par l’image se fait de plus en plus présente, il n’est pas question de supprimer les images des sites.

Il s’agit donc de choisir le bon format d’image parmi les standards : JPEG, GIF et PNG, chaque format ayant ses avantages et ses inconvénients.

JPEG

Le plus approprié pour les images avec de nombreuses couleurs (en particuliers les photos)
Un bon compromis entre la taille et la qualité
Ne peut pas être animé
Ne permet pas la transparence

GIF

Taille de fichier basse
Permet de faire des GIF animés
Nombre de couleurs limité (jusqu’à 256 couleurs maximum)
Ne permet pas la transparence

PNG

Permet la transparence
Ne peut pas être animé
Taille de fichier lourde
La transparence n’est pas gérée par tous les navigateurs (cf Internet Explorer)

Dans quels cas utiliser chacun de ces formats?

Il n’y a pas vraiment de règles, l’important est de combiner la meilleure qualité d’image avec le poids le plus léger. Cependant, on peut généralement orienter son choix vers le JPEG pour toutes les photos et les images avec beaucoup de couleurs (dégradés, effets divers…).

Les GIFS sont intéressants pour les images de fond et les pictos avec peu de couleurs.

Et les PNG présentent un intérêt dès que l’on utilise la transparence, ce qui permet d’obtenir des effets visuels plutôt sympa (mais malheureusement tous les navigateurs ne l’interprètent pas correctement, il faudra alors trouver des astuces pour parer à ce problème).

5 commentaires pour le moment

1 jr | 30 juin 2009 à 17 h 12 min

Sobre, simple et explicite.
On complète ses connaissances ou on apprend sans complications et perte de temps.
C’est aussi ça que j’attends.
Merci et bravo
jr
2 fleuveblanc | 30 juin 2009 à 20 h 37 min

Je me permets de signaler quelques imprécisions de cet article au demeurant pas très complet.

GIF
- Ce format permet une transparence lorsqu’elle est complète. Il ne permet pas les transparences partielles.
- Au niveau de la qualité et du poids, ce format est particulièrement bien adapté pour les logos et cliparts et autres dessins en aplat.

PNG
Il en existe de 2 types :

PNG8
Format équivalent au GIF (poid, nombre de couleurs, transparence). Ses 2 différences principales :
- C’est un format libre. Il est donc plus facile d’avoir un bon convertisseur pour ce format.
- Il ne permet pas d’avoir une image animée.

PNG24 :
- C’est le seul format non destructif (le côté sal du jpg, pas de limitation du nombre de couleur comme le gif)
- Le poid est ainsi très variable. Avec peu de couleurs, il peut être plus le léger de tous. Sur des photos par contre, c’est le plus lourd (enfin, moins que le bmp, l’autre format non destructif compatible avec le web).
- C’est le seul format de fichier qui permette la transparence partielle (une ombre par exemple). Le seul navigateur « moderne » qui remplace cette transparence par un fond gris, c’est Internet Explorer 6. Ce défaut de compatibilité peut être compenser par en remplaçant l’image ou la propriété background-image du style concerné par une instruction directx du type : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
Plus d’info sur : http://www.siteduzero.com/tutoriel-3-12629-les-png-24-bits.html
Il existe de nombreux script qui font ça automatiquement :
http://snipplr.com/view/4224/ie-6-transparent-png-fix–supersleight/
http://homepage.ntlworld.com/bobosola/pngtest.htm
http://koivi.com/ie-png-transparency/
et de nombreuse extension
pour joomla :
http://extensions.joomla.org/extensions/style-&-design/design/7866/details
http://extensions.joomla.org/extensions/style-&-design/design/859/details
pour wordpress :
http://wordpress.org/extend/plugins/wp-pngfix/
http://wordpress.org/extend/plugins/wp-unitpngfix/
http://blog.popstalin.com/articles/wordpress/wordpress-png-fix-plugin

Enfin, je termine en signalant :
La méthode de conversion des images est importante pour avoir un résultat de qualité et un poids moindre. Photoshop se montrera performant où la majorité des bibliothèques utilisés par les sites web (joomla, wordpress…) ne le sont pas.

De façon à optimiser encore plus le chargement de la page, ne pas hésiter à combiner ses images avec des méthodes telles que :
- les portes coulissantes : http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html#portescoulissantes
- les les sprites CSS : http://www.pompage.net/pompe/sprites/
3 Alfred Dagenais | 30 juin 2009 à 21 h 07 min

Bonjour Alice,

Pour ce qui est des image GIF, elles supportent la transparence, sauf, qu’elles ne supporte pas le Alpha (Taux de transparence d’une image ou d’une couleur.) comme le supporte le PNG.

Pour le PNG, les nouveaux navigateurs supportent le Alpha des PNG comme IE7 (Internet Explorer 7), IE8, mais malheureusement pas IE6. Des trucs simples sur internet peuvent par contre permettre d’afficher la transparent des images PNG sous IE6

-* http://www.babylon-design.com/site/index.php/2006/04/14/114-png-transparent-background-css-hack-internet-explorer
-* http://www.alistapart.com/articles/pngopacity/

Sinon, effectivement, il n’y a pas de règle pour réduire le poids des images. Dans mon cas, j’utilise dans photoshop la commande « Save for Web » ou « Enregistrer pour le Web ». Une fois la fenêtre ouverte j’utilise le mode de 4 vue (http://www.alfreddagenais.com/blogue/wp-content/uploads/2009/06/save_for_web_kalenga.jpg). Ce qui me permet, de faire des test sur différents formats, types de préférences, etc. sur les images de sortis. Comme cela, je peux voir facilement, le gain et l’image résultante lorsque je décide d’exporter cette image.

Cordialement,
Alfred Dagenais
http://www.alfreddagenais.com
4 Alice | 1 juillet 2009 à 9 h 23 min

Merci pour toutes ces précisions!! Je voulais cet article succinct pour le rendre plus accessible. Mais vos remarques ont l’avantage de préciser certains points que j’avais choisi de ne pas développer.
5 Delpit Patrick | 1 juillet 2009 à 22 h 17 min

Merci. Je teste de suite !