HFRiens bonsoir !

Suite à de récentes discussions sur la cat graphisme, en particulier sur ce topic : http://forum.hardware.fr/hfr/Graph [...] 3304_1.htm
Je me suis dis qu'il pourrait être utile de faire un récap assez complet sur les différents formats d'image et leur utilisation pour le web.

Avec dans un premier temps une présentation des différents formats (je tacherais de vous épargner les aspects trop techniques comme le détail des algorithmes de compression), ensuite viendra des applications pratiques expliquant dans quelles conditions exploiter quels formats (dans le post suivant).

Un autre objectif est de laisser la possibilité à la communauté HFR de participer à l'enrichissement du topic avec des MAJ régulières, et aussi de pouvoir poser des questions concernant les formats d'image à la manière d'un topic unique.

Pour l'instant le topic ne concernera que les formats dédiés à une utilisation pour le web, mais on peut imaginer élargir le champ d'action par la suite...
Évidemment je ne compte pas sortir toutes les informations de mon crâne, mais plus faire un rassemblement et un résumé ordonné et réinterprété d'infos que l'ont trouve sur le net français et anglophone (les sources seront indiquées dans un 3ème post, je me permet donc de réserver les 3 premiers posts)

Le topic mettra surement un peu de temps avant d'être vraiment complet mais histoire de vous donner un avant gout, j'ai commencé la traduction "imparfaite et incomplète" d'un tuto sur le sujet que je trouve sympa. Ce qui me servira de base dans un premier temps.

Généralités sur les formats d'image pour le web

A propos du format .JPG
JPEG a été développé par le Joint Photographic Experts group. Comme on peut l'imaginer, il fonctionne bien pour les images "naturelles" (photographie). Ces types d'image, comme la photographie, ont des variations de couleurs "douces". Ce qui signifie que le format JPEG fonctionne également très bien pour des images qui contiennent des dégradés et d'importantes variations de tons et couleurs.

Un point essentiel a propos du JPEG, est qu'il s'agit d'un format qui fait appel à une compression dite "destructrive". Cette forme de compression utilise un algorithme qui perd une partie des informations d'origine. Autrement dit, si vous sauvegardez un JPG une centaine de fois, la qualité sera détériorée un peu plus à chaque fois. Il existent des versions de JPG moins destructives, mais elles sont moins utilisées et disposent de  de moins de support. Si vous souhaitez conserver une image sans détérioration de la qualité, il est conseillé d'utilisé un format tel que le TIFF ou le PSD.

[...]

A propos du format .GIF
Le format GIF (pour Graphics Interchange Format) a été développé par CompuServe et utilise la méthode de compression LZW (Lempel-Ziv-Welch), qui est dite, contrairement au JPG, sans pertes d'informations. Cette méthode de compression établis une palette de couleur pour l'image où chaque valeur de couleur est assignée aux pixels. C'est ce qui en fait une méthode idéale pour les dessins au trait, les logos, ou les images simples sans dégradés ou variations de couleurs.

[...]

D'autres avantages sont offerts par le GIF par rapport au JPG. Il permet la transparence, dans un gif un pixel est soit 100% opaque, soit 100% transparent. Le GIF est aussi un format multi-image, c'est-à-dire qu'il permet l'animation (GIF animé).

A propos du format .PNG
Le format PNG (pour Portable Network Graphics) fut créé essentiellement dans l'optique de remplacer le format GIF, ou du moins de l'améliorer. PNG utilise la méthode de compression DEFLATE, algorithme que l'ont retrouve dans les format ZIP et GZIP. La méthode est assez complexe, mais ce qu'il faut retenir c'est que comme le GIF, c'est une méthode sans pertes d'information ("non destructive" ). Il en résulte des tailles d'images plus imposante qu'en JPEG quand utilisé pour des images de type photographique. En revanche pour des images de type dessin, logos, etc. il en résulte une taille largement inférieur qu'avec le JPG et presque toujours plus léger que le GIF.

Contrairement au GIF, le PNG ne supporte pas l'animation. Cependant, l'avantage majeur du PNG, par rapport au GIF et JPG, réside dans la transparence Alpha. Alors que le GIF ne propose que 2 niveaux de transparence (opaque et transparent), le PNG lui dispose d'une transparence sur 8bits (256 niveaux). Ce qui, comme vous pouvez l'imaginer, offre des possibilités de transitions et de fondus beaucoup plus intéressantes.

Ainsi, le PNG est plus performant que le GIF à l'utilisation dans la plupart des cas à l'exception de très petits fichiers (comme des motifs de fond). Le principal inconvenient du PNG est sont incompatibilité avec certains vieux navigateurs (comme internet explorer 6, pour ne pas le citer...), cependant le problème peut-être contourné avec l'utilisation de scripts.

Ils existent deux types de PNG :
-PNG-8 (8-bits) : équivalent au GIF en terme de limitation de couleurs (256 max) mais dispose de la transparence alpha.
-PNG-24 (24-bits) : autorise un nombre de couleurs plus important (16 millions).

Les formats d'image en pratique
[réservé]

Les ressources et outils sur le sujet
[réservé]

Merci pour cette contrib
 
Perso je fais mon choix comme ça :
1 Peu de couleurs -> gif
2 Besoin de transparence -> gif ou png
3 Beaucoup de couleurs/teintes -> jpg ou png24
 
J'évite autant que possible l'utilisation du png24, bien trop lourd.
 
Si on l'utilise pour moi ça doit valoir le coup. Si c'est pour superposer un logo sur une banière il faut revoir son html/css...
 
Un outils interessant, All smush.it de yahoo. C'est un outils de Yslow, extension yahoo pour firebug pour firefox.
 
All Smush.it scan les images d'une page et tente de réduire leur poids sans altérer la qualité.
 
L'ensemble des images réduites est téléchargeable. Le fichier reprends l'architecture fichier du site, y'a plus qu'à écraser l'ensemble des fichiers modifiés en un seul clic.
 
Le module "components" de Yslow permet aussi d'avoir un rapide aperçu des images d'une page (poids, réponse) et le module "stat" permet de voir le poids de la page au premier chargement puis avec le cache.

Ben justement d'après ce que j'ai pu lire jusqu'ici le gif n'amène pas d'avantage par rapport au png, et de manière générale la compression png serait meilleure, après y'a surement des expections...

Bonne initiative Progenik  

+1
Je ne l'ai jamais vu plus avantageux qu'un PNG-8 pour du templating web...
 
Il pourrait être intéressant de faire un Topic similaire sans se focaliser à l'export web (le compositing video... ?), parler du PNG-48 (une couche alpha par canaux de couleur), du RLA, TGA... Si j'ai le temps, why not, un peu la flemme là...

 
J'avais jamais creusé la question
 

oh c'est bleu

alors safari et consorts seraient daltonien?

C'est magique hein
 
Bon en fait c'est juste que IE (pour chrome/safari je sais pas si c'est tjrs d'actu) ne supporte pas cette variante du png qui permet de faire des anim comme le gif avec plsrs images. IE affiche donc la première image (bleu) alors que FF passe à la suite (jaune).
 
http://fr.wikipedia.org/wiki/Anima [...] k_Graphics

Ok j'étais entrain de chercher qu'est-ce que supportais firefox et opera mais pas IE/Chrome/safari
Le APNG of course  
 

SVG et IE ne font pas bon ménage.
Y'a pas de support natif du format, uniquement par plugin.
A voir pour ie9, je sais pas.

edit : un lien pour ceux qui veulent en savoir plus sur le support du SVG http://www.codedread.com/svg-support.php

Merci Skopos pour cet ajout…
Je l'ai dans l'os donc. Je vois mal mon pote demander aux internautes d'installer un plugin pour qu'ils voient son logo.
Ça serait un élément graphique spécial encore OK, mais pas pour le logo de sa boite.
 
Question :
Statistiquement quel est le navigateur le plus plébiscité des internautes ?
IE ou Firefox ?  

En france
 
IE 39%
FF 36.5%
Chrome 16%
Safari 16.5%
Opera 1%
 
http://gs.statcounter.com/#browser [...] 002-201102

On sort un peu du contexte mais pour toutes les stats liées aux navigateurs web, il y a
 
http://www.w3schools.com/browsers/browsers_stats.asp
 
On peut aussi y voir les stats de résolution d'affichage, selon les années, les stats par navigateur selon les versions etc...