Quels formats de graphiques Web utiliser?

Les sites Web peuvent contenir des graphiques au format JPEG, GIF, PNG, SVG. Lesquels devraient être utilisés et quand?

Quand utiliser JPG

• images photographiques
• quand la compression n'a pas d'importance

Quand utiliser PNG

• quand vous avez besoin de transparence
• quand vous avez des motifs (arrière-plans)

Quand utiliser GIF

• lorsque vous avez besoin d' une animation compatible avec les versions antérieures *
• lorsqu'une image est principalement composée d'une poignée de couleurs (2-16) **
• quand vous n'avez pas besoin de transparence et de motif (bien que png soit préféré)

_{* Avec l’émergence de l’animation CSS en tant qu’option viable pour la plupart des navigateurs, l’utilisation du format .GIF est de moins en moins le format privilégié pour l’animation Web. .jpg,, .pnget .gifpeuvent tous être configurés pour avoir une fonctionnalité "animée" avec l'utilisation de CSS. Bien que les gifs animés puissent être utilisés de manière attrayante dans la conception Web dans certains cas, les exceptions sont rares, il est donc préférable de les éviter.}

_{** (les .gifimages sont limitées à seulement 256 couleurs dans leur palette.)}

(migré de la question en double)

Cela dépend totalement du type d'image que vous souhaitez stocker.

• Le format PNG est un format de compression sans perte idéal pour les graphiques bitmap "vectoriels" (c'est-à-dire les graphiques avec de grandes zones régulières de même couleur et avec des bords clairement définis; les graphiques contenant du texte en clair).

• SVG est un format vectoriel , mieux adapté pour contenir des graphiques vectoriels (en bref, des collections d'éléments géométriques au lieu de collections de pixels). SVG est évolutif à l'infini, tandis que les graphiques bitmap perdent en qualité lorsqu'ils sont agrandis.

• Le format JPG est un format de compression avec perte (il supprime entre autres les nuances invisibles à l’œil humain pour économiser de l’espace de stockage). Il convient mieux aux photographies. En raison de sa méthode de compression, il n'est pas bien adapté aux illustrations vectorielles ou au texte.

Compatibilité du navigateur:

• Les graphiques PNG sont pris en charge sur tous les navigateurs, à l'exception de IE 6 si le fichier PNG contient une transparence alpha (les parties transparentes seront rendues sous la forme d'un gris solide), et toutes les versions d'IE si le fichier PNG est à l'intérieur d'un élément HTML d'opacité inférieure à 100. % (mais c'est un cas extrême).

• SVG n'est pas encore une option car le support du navigateur n'est pas à 100% pour le moment . Il peut également y avoir d'autres différences de comportement par rapport à une <img>étiquette normale . Utilisez ceci uniquement si vous savez ce que vous faites.

• Le format JPG standard est pris en charge sur tous les navigateurs tant qu'il est enregistré en mode RVB plutôt qu'en mode CMJN (si votre programme ne fait pas la distinction, il s'agit probablement de la valeur par défaut).

Vous devez être conscient de quelques facteurs clés ...

Premièrement, il existe deux types de compression: Lossless et Lossy .

• Sans perte signifie que l'image est réduite, mais sans nuire à la qualité.
• Perte signifie que l'image est rendue (encore) plus petite, mais au détriment de la qualité. Si vous sauvegardiez une image au format Lossy à plusieurs reprises, la qualité de l’image empirerait progressivement.

Il existe également différentes profondeurs de couleur (palettes): Couleur indexée et Couleur directe .

• Indexé signifie que l'image ne peut stocker qu'un nombre limité de couleurs (généralement 256), contrôlées par l'auteur, dans ce que l'on appelle une carte de couleurs.
• Direct signifie que vous pouvez stocker plusieurs milliers de couleurs qui n'ont pas été directement choisies par l'auteur

BMP - sans perte / indexé et direct

C'est un vieux format. Il est sans perte (aucune donnée d'image n'est perdue lors de la sauvegarde), mais il y a également peu ou pas de compression, ce qui signifie que l'enregistrement en tant que BMP entraîne la création de TRES grandes tailles de fichiers. Il peut avoir des palettes d'indexé et direct, mais c'est une petite consolation. La taille des fichiers est tellement grande que personne n'utilise vraiment ce format.

Bon pour: rien vraiment. Il n'y a rien que BMP excelle, ou ne soit pas mieux fait par d'autres formats.

GIF - sans perte / indexé seulement

Le format GIF utilise une compression sans perte, ce qui signifie que vous pouvez enregistrer l'image à plusieurs reprises et ne jamais perdre de données. La taille des fichiers est beaucoup plus petite que celle du format BMP, car une bonne compression est effectivement utilisée, mais il ne peut stocker qu'une palette indexée. Cela signifie que dans la plupart des cas d'utilisation , il ne peut y avoir qu'un maximum de 256 couleurs différentes dans le fichier. Cela semble être une petite somme, et ça l'est.

Les images GIF peuvent également être animées et transparentes.

Bon pour: Logos, dessins au trait et autres images simples qui doivent être petites. Seulement vraiment utilisé pour les sites Web.

JPEG - Perte / Direct

Les images JPEG ont été conçues pour produire des images photographiques détaillées aussi petites que possible en supprimant les informations que l'œil humain ne remarquera pas. En conséquence, il s'agit d'un format avec perte, et enregistrer le même fichier à plusieurs reprises entraînera la perte de plus de données au fil du temps. Elle offre une palette de milliers de couleurs et convient donc parfaitement aux photographies. Toutefois, la compression avec perte en est un inconvénient pour les logos et les dessins au trait: non seulement elles auront une apparence floue, mais elles auront également une taille de fichier supérieure à celle des GIF!

Bon pour: Photographies. En outre, les gradients.

PNG-8 - sans perte / indexé

PNG est un format plus récent et PNG-8 (la version indexée de PNG) est un bon substitut pour les fichiers GIF. Malheureusement, il présente toutefois quelques inconvénients: Premièrement, il ne peut pas prendre en charge une animation comme le GIF (eh bien, il le peut, mais seul Firefox semble le prendre en charge, contrairement à l’animation GIF qui est prise en charge par tous les navigateurs). Deuxièmement, il a des problèmes de support avec les anciens navigateurs comme IE6. Troisièmement, des logiciels importants comme Photoshop ont une mise en œuvre très médiocre du format. (Bon sang, Adobe!) Le format PNG-8 ne peut stocker que 256 couleurs, comme les GIF.

Bon pour: La principale chose pour laquelle PNG-8 fait mieux que les GIF est le support de la transparence alpha.

Remarque importante: Photoshop a enfin ajouté la prise en charge de la transparence alpha dans ses dernières versions. Si vous en avez un plus ancien, il existe des moyens de convertir Photoshop PNG-24 en fichiers PNG-8 tout en conservant leur transparence. Une méthode est PNGQuant , une autre consiste à enregistrer vos fichiers avec Fireworks .

PNG-24 - Lossless / Direct

PNG-24 est un excellent format qui associe un codage sans perte à une couleur directe (des milliers de couleurs, tout comme le format JPEG). Cela ressemble beaucoup à BMP à cet égard, sauf que PNG compresse réellement les images, ce qui donne des fichiers beaucoup plus petits. Malheureusement, les fichiers PNG-24 seront toujours beaucoup plus volumineux que les fichiers JPEG, GIF et PNG-8;

Même si les PNG-24 autorisent des milliers de couleurs avec compression, ils ne sont pas destinés à remplacer les images JPEG. Une photo enregistrée au format PNG-24 sera probablement au moins 5 fois plus grande qu'une image JPEG équivalente, avec une très légère amélioration de la qualité visible. (Bien entendu, cela peut être un résultat souhaitable si vous n'êtes pas préoccupé par la taille du fichier et souhaitez obtenir la meilleure qualité d'image possible.)

Tout comme PNG-8, PNG-24 prend également en charge la transparence alpha.

SVG - sans perte / vecteur

Le type de fichier qui gagne en popularité est SVG, ce qui diffère de tout ce qui précède en ce qu’il s’agit d’un format de fichier vectoriel (les fichiers ci-dessus sont tous raster ). Cela signifie qu'il est composé de lignes et de courbes au lieu de pixels. Lorsque vous zoomez sur une image vectorielle, vous voyez toujours une courbe ou une ligne. Lorsque vous zoomez sur une image raster, vous verrez des pixels.

Par exemple:

Cela signifie que SVG est parfait pour les logos et les icônes pour lesquels vous souhaitez conserver la netteté sur les écrans Retina ou de différentes tailles.

De plus, les fichiers SVG sont écrits en XML et peuvent donc être ouverts et édités dans un éditeur de texte afin de pouvoir être manipulés à la volée, si vous le souhaitez. Par exemple, vous pouvez utiliser JavaScript pour modifier la couleur d'une icône SVG sur un site Web, comme vous le feriez avec du texte (c'est-à-dire qu'il n'est pas nécessaire de disposer d'une seconde image).

J'espère que ça aide!

JPG:

Avantages:

• Beaucoup de niveaux de compression disponibles
• Facile à manipuler avec tout éditeur d'images

Inconvénients:

• Artefacts de compression

Les usages :

• Grandes photos ou images avec beaucoup de couleurs
• Quand une forte compression est nécessaire

PNG:

Avantages:

• Transparence avec alpha!
• Beaucoup de couleurs
• Peut remplacer jpg

Inconvénients:

• Moins de compression que JPG (mais pas tant que ça)
• Incompatible avec IE6 (et 7, je crois) - vous devez utiliser un correctif ou un hack pour cela. Mais qui s'en soucie? A utiliser absolument;)

Les usages :

• Photos / images petites ou moyennes avec beaucoup de couleurs
• A utiliser si vous voulez de la transparence en dégradé
• Les icônes
• Logos

GIF:

Avantages:

• Peut être animé
• Très léger si vous utilisez seulement une couleur (comme 8 - 16 ou 32 couleurs différentes)
• Transparence

Inconvénients:

• Vous ne pouvez pas avoir plus de 255 couleurs.
• Un gif animé peut faire fuir les gens
• Pas d'alpha pour la transparence (c'est transparent ou pas!)

Les usages :

• Gif animé (je les utilise principalement dans les newsletters)
• Les icônes
• Favicon animé \ o /
• Logos

Les sites Web peuvent contenir des graphiques au format JPEG, GIF, PNG, SVG. Lesquels devraient être utilisés et quand?

Pour les photos:

JPEG si la transparence n’est pas nécessaire. PNG pour les graphiques nécessitant de la transparence.

Bien que ce ne soit pas vrai à 100%, c'est une bonne règle à suivre. Consultez les autres réponses à cette question pour en savoir plus sur les autres formats. Découvrez également quel format d'image matricielle convient le mieux pour l'affichage numérique d'images en l'absence de transparence; JPEG ou PNG? et une sélection de nos balises de format de fichier , telles que jpeg , png , gif & svg pour en savoir plus.

Pour les graphiques:

SVG avec repli PNG / JPEG.

Il n'y a absolument aucune raison de ne pas fournir de SVG de nos jours. Ils sont mis en œuvre presque de la même manière que n'importe quelle image normale et sont beaucoup plus polyvalents.

Ainsi, le flux de travail d'un concepteur de site Web moderne n'a pas été complètement modifié, il a été mis à jour. Vous continuez de préparer et de servir des fichiers PNG et JPEG pour les graphiques, mais ce ne sont que des solutions de rechange lorsque SVG ne fonctionne pas.

Qu'est-ce qu'un SVG?

SVG représente Scalable Vector Graphic. Sans être trop technique, la différence entre les SVG et les autres formats basés sur les pixels est que les données pour la composition du graphique sont stockées sous forme de calculs mathématiques. Lorsqu'un navigateur ouvre un fichier SVG, il doit effectuer des calculs pour rendre le fichier SVG. Les navigateurs plus anciens ne disposent pas des fonctionnalités nécessaires pour effectuer ces calculs ou gérer les SVG. De plus, les ordinateurs les plus anciens auraient peut-être eu du mal à afficher une page Web trop chargée en SVG même s'ils auraient pu être utilisés il y a 10 ans (ce qu'ils ne pouvaient pas faire). Les données d'un fichier SVG sont stockées au format hexadécimal (base 16), ce qui permet de l'optimiser dans des fichiers de très petite taille par rapport au stockage binaire de données de pixels.

Voici quelques ressources pour en savoir plus sur la manière de réaliser la technique de secours:

1. Maîtriser l'utilisation de SVG pour un réseau rétinien, solutions de secours avec le script PNG

2. Retour sur le workflow SVG pour des performances et un développement progressif avec des URI de données transparents

3. Astuces CSS - Repli SVG

L'extrait de code JavaScript suivant, copié à partir du premier lien, est tout ce dont vous avez besoin pour détecter la prise en charge de SVG dans la plupart des navigateurs, voire tous, et pour modifier le nom de fichier afin de fournir des solutions de rechange au format PNG.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

<DA01>

Quand utiliser SVG

• Chaque fois que vous le pouvez, il s'agit généralement du plus petit fichier et de sa résolution, ce qui signifie qu'il peut gérer n'importe quel ratio de pixels de périphérique (écrans de rétine, par exemple).
• Lorsque votre dessin convient aux formats de fichiers vectoriels (icônes en particulier)
• Lorsque vous avez le luxe de ne cibler que les navigateurs modernes (le support SVG est relativement nouveau pour certains navigateurs)

Quand utiliser les polices d'icônes

• Lorsque vous avez besoin d'un vaste ensemble d'icônes
• Quand, comme SVG, vous voulez les avantages des formats de fichiers vectoriels
• Lorsque vous avez le luxe de ne cibler que les navigateurs modernes (la prise en charge des polices Web est relativement nouvelle pour certains navigateurs)

</DA01>

Pourquoi SVG est la meilleure option?

• Échelle magnifiquement à n'importe quelle taille d'un fichier (pas besoin de servir @2x.jpgpour les écrans de rétine ou d'étirer le graphique)

• Très souvent, les fichiers moins volumineux que JPEG et PNG

• Presque jamais devoir sacrifier la qualité dans le logo

• Facilite la conception réactive à bien des égards

Remarques

• La prise en charge étant moins courante pour les SVG en ligne, il est donc préférable de lier les fichiers au moyen de balises image pour le moment. (Si vous envisagez de réutiliser le graphique n'importe où ailleurs, par exemple des icônes de navigation, vous souhaitez néanmoins le lier de manière externe afin que le navigateur le mette en cache et évite le temps de chargement des autres pages.)

• IE ne prend pas en charge SVGZle format compressé disponible pour les graphiques SVG. Pour une compatibilité optimale entre les navigateurs et les versions récentes, il est préférable de l’utiliser SVG 1.0à ce stade.

• Vous pouvez toujours créer des feuilles de sprite avec SVG de la même manière qu'avec d'autres formats d'image, mais au lieu d'utiliser des valeurs de pixels réelles pour définir les coordonnées x et y de chaque image, utilisez des valeurs en pourcentage.

  Qu'en est-il des cas où les valeurs de pourcentage ne sont pas assez précises?

  Vous devez créer la feuille de sprite dans le but de pouvoir diviser la largeur et la hauteur par 100 et d'obtenir des nombres entiers, ou des nombres avec une décimale au plus. Par exemple, si vous organisez 7 x 10px x 10pxicônes ensemble dans une feuille de sprite, ne créez pas de canevas 70px x 10px.

  Pourquoi? Parce que lorsque vous divisez 100 par 7, vous obtenez 14.285714285714285714285714285714ce qui, en tant que pourcentage arrondi, provoquerait certainement des calculs imparfaits quelque part.

  Au lieu de cela, créez un 80px x 10pxcanevas et ne vous inquiétez pas des 12,5% vides. Les icônes auront des incréments de 12,5% exactement, ce qui, il va sans dire, est beaucoup plus facile à utiliser.

Vous devez utiliser .jpeg pour les photographies ou les images avec beaucoup de couleurs. Le type de fichier .gif est utile pour les images animées ou lorsque la transparence est requise, mais son utilisation diminue. Le format le plus populaire est le .png, qui peut également offrir une transparence alpha et une gamme de couleurs plus étendue que le type de fichier .gif. Pour un aperçu plus détaillé, consultez l'article de Jonathan Snook, Quel format d'image est le meilleur ?

Une bonne formule pourrait être d’utiliser JPEG pour les photos et PNG pour tout le reste.

Bien sûr, si vous avez des graphiques qui n'ont pas besoin de transparence alpha et qui ont moins de 256 couleurs, le format GIF peut vous faire économiser de la bande passante, mais il est définitivement en train de disparaître.

J'utilise PNG pour à peu près tout, car il ne possède pas les artefacts de compression que JEPG possède, et il est presque universellement compatible de nos jours (j'ai vu quelques éditeurs de sites qui ne s'y prêtent pas bien, tels que la version de bureau du logiciel SiteBuilder de Homestead, mais c’est à peu près tout.)

Vous devez choisir votre image en base au niveau de compression / qualité que vous souhaitez atteindre.

Le Web est synonyme de rapidité pour le téléchargement d’informations, et moindre est la taille d’une image, mais meilleur pour la vitesse de chargement d’une page.

JPG : Pour des images avec des millions de couleurs (photographie)

PNG et GIF : pour la transparence et peu de couleurs. Je ne l'utilise que sous 64/128 couleurs différentes, mais généralement sous 256. (icônes, images vectorielles devant être de trame, couleur à contraste élevé, dégradés avec peu de couleurs)

Comment choisir entre PNG et GIF?

Tout d’abord, vérifiez l’optimisation compression / qualité et choisissez qui vous donne le meilleur résultat pour un poids inférieur. J'utilise toujours largement le format GIF, et il vaut parfois mieux que le format PNG pour le même type d'images. Ne faites pas de distinction entre les formats, cochez simplement celui qui vous convient le mieux pour votre optimisation.

• Choisissez GIF: pour des images animées ne dépassant pas 256 couleurs
• Si vous n'avez pas besoin d'animation, vous pouvez choisir le format PNG. Choisissez le bon PNG: Il existe 2 types 8bit et 24bit. 8bit, il a tendance à être une meilleure version du GIF sans animation pour la qualité / compression (mais comme je l'ai dit pas toujours, vérifiez-le lorsque vous enregistrez pour le Web). 24bit n'a pas de compression (donc utilisez-le à peine pour un effet graphique spécial), et a le vaule alpha pour utiliser la transparence des couleurs (les anciens navigateurs IE ne le supportaient pas, si vous n'appliquiez pas de filtre ni de comportement .htc à la page )

Je peux voir dans divers articles que 90% des concepteurs Web pensent encore que le format PNG est uniquement un format sans perte . De nombreux professionnels ne connaissent même pas l'existence de PNG-8.

Mais évidemment, PNG-8 est ce qu’ils devraient utiliser pour le Web, au lieu de PNG-32. Parce qu’il fournit des fichiers de taille 2 à 5 fois plus réduite et de qualité acceptable.

Parfois, il est difficile de décider quelle compression est la meilleure pour une image. Par exemple, si ce n'est pas une photo, mais a beaucoup de couleurs et de dégradés. Cet outil permet de comparer visuellement les deux formats avec perte et de choisir la meilleure variante.

Voici un bon outil pour comparer les formats avec perte PNG et JPEG: PNG vs JPEG

Les principaux formats graphiques Web sont GIF, JPG et PNG. Il est important de connaître les différences et de choisir le meilleur format pour chaque image. Ainsi, les images ont une belle apparence et sont aussi compactes que possible, de sorte qu'elles apparaissent rapidement sur l'écran du visiteur de votre site.

GIF - Format d'information graphique

Le format graphique GIF est préférable pour les images comportant peu de couleurs: graphiques, graphiques ou texte défini en tant que graphique. Moins vous utilisez de couleurs, plus les fichiers GIF sont efficaces. Fichiers GIF ...

• peut contenir jusqu'à 256 couleurs.

• prendre en charge une fonctionnalité appelée transparence, dans laquelle une couleur sur 256 est définie pour être transparente. Cela empêche vos graphiques de paraître comme s'ils étaient dans des zones, car l'arrière-plan du fichier est invisible, ce qui laisse apparaître l'arrière-plan de la page Web.

• peut être animé. Dans un fichier, plusieurs images sont stockées et un index indiquant la durée d'affichage de chaque image. Le format GIF animé est traité comme un fichier image standard. Il est donc chargé avec la balise standard.

• sont sans perte, ce qui signifie que la qualité de l'image n'est pas dégradée par le processus de compression.

• peuvent être entrelacés pour donner l'impression qu'ils apparaissent en fondu, d'une qualité inférieure à supérieure, lors du chargement. Cela donne à vos visiteurs quelque chose à regarder pendant qu'ils attendent.

• ne convient pas aux photographies - vous perdez la qualité et les fichiers ne seront pas compacts. Utilisez le format graphique JPG pour les photos.

JPG - Groupe mixte d’experts en photographie

Le format graphique JPG convient mieux aux images de nombreuses couleurs, telles que les photographies ou les illustrations numérisées. Fichiers JPG ...

• peut contenir jusqu'à 16 millions de couleurs.

• supporte la compression variable. Vous pouvez appliquer plus ou moins de compression à chaque image. Plus vous appliquez de compression, plus vous perdez en qualité. Bien que la taille des fichiers puisse être réduite au minimum avec ce format graphique, vous devez souvent faire des compromis entre la taille du fichier et la qualité de l'image. Le logiciel graphique le plus récent vous donne un aperçu avant d’enregistrer, ce qui vous permet d’expérimenter différents niveaux de compression afin de choisir le meilleur compromis entre qualité et taille du fichier.

• viennent en trois types: baseline ou standard, optimisé baseline ou standard optimisé, et progressif. Baseline a été conçu pour les navigateurs que nous considérions comme anciens (comme Internet Explorer version 1). L'option optimisée de base offre plus de compression que la référence standard, et pratiquement tous les navigateurs peuvent aujourd'hui lire une telle image. Un fichier JPG progressif, comme un fichier GIF entrelacé, est créé au fur et à mesure du téléchargement, passant d’une représentation brute de l’image à son aspect final. Bien que ce soit un bon format graphique Web, les navigateurs plus anciens ne supportent pas tous ce format.

• ne conviennent pas aux images contenant seulement quelques couleurs, telles que le texte défini sous forme de graphiques ou les images comportant des zones de couleurs plates. Si vous utilisez JPG pour ces graphiques, ils seront plus grands que nécessaire et auront l’air "marbrés".

PNG - Graphiques réseau progressifs

PNG est le dernier format graphique Web. Les fichiers PNG ...

• sont supportés par tous les navigateurs modernes. Ces fichiers pouvant ne pas apparaître dans les anciens navigateurs, l'utilisation de ce format graphique peut empêcher certains visiteurs de votre site Web de voir vos images.

• compacts et polyvalents, ils peuvent combiner les meilleures fonctionnalités des formats GIF et JPG, telles que la possibilité d’avoir des arrière-plans transparents ou de contenir des images de plusieurs millions de couleurs.

• ne sont toujours pas largement utilisés, principalement parce qu'ils ne sont pas supportés par les anciens navigateurs.

Quand utiliser lequel?

En choisissant le bon format graphique Web, vous pouvez vous assurer que vos images ont une belle apparence et qu’elles apparaissent rapidement sur l’ordinateur de votre visiteur. Si vous choisissez le mauvais format, vos images paraîtront mauvaises et le téléchargement prendra un temps fou.

L'erreur la plus courante en matière de graphiques sur le Web consiste à utiliser le mauvais format graphique pour leurs images. Mais le choix est vraiment très simple ...

• Si vos graphiques ont beaucoup de couleurs (comme une photo), choisissez JPG.

• Si vos graphiques ont peu de couleurs, choisissez GIF. Lorsque vous utilisez le format GIF, essayez des palettes optimisées contenant uniquement les couleurs utilisées. Elles peuvent réduire la taille des fichiers de moitié.

Dans un monde idéal, cela reviendrait à ceci:

JPEG - Pour les images matricielles et les photographies

PNG - Pour les graphiques vectoriels (par exemple, les logos, etc.)

Malheureusement, Internet Explorer 6 (et malheureusement toujours un grand nombre d'utilisateurs) ne prend pas en charge la transparence dans les images PNG. Donc, si votre PNG contient de la transparence, cela peut poser des problèmes. Heureusement, il existe un hack qui peut être utilisé pour contourner ce problème, mais pas de manière élégante:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: De plus, je pense que même IE 7 a des problèmes avec certaines fonctionnalités des PNG.)

Les GIF ne présentent que deux avantages par rapport à la PNG:

1. Support du navigateur (presque) parfait (bien que pas de transparence, donc ce n'est pas vraiment un bonus)
2. Ils peuvent être animés, mais les graphiques animés doivent être utilisés avec parcimonie dans la conception Web.

EDIT: Le format PNG est toujours préférable au format GIF, car il est pris en charge et utilisable, car le format PNG est un format ouvert.

Comme beaucoup l'ont souligné, le JPEG est bon pour la photographie et le PNG, bon pour les graphiques avec des textes et des graphiques. Le format GIF a pour seul avantage de prendre en charge l'animation, ce qui nécessite une utilisation très prudente.

Un bon conseil est d'exporter votre image au format JPEG et PNG. Presque toujours, le format le mieux adapté à votre graphique donne un fichier plus petit. Les photos deviennent plus petites en JPEG et les graphiques plus petits en PNG. Donc, si vous ne savez pas lequel choisir, cela peut être un bon choix.