BLOG

Une petite révision ou mise au point sur les formats d’images pour le web:

Les formats print:
Fait pour l’impression, à convertir pour le web.
Classiques: Tiff, et BMP (Bitmap)
Et plus exotiques et/ou polyvalents: Dicom, DCX, Targa, PCX, Pixar, Scitex…
La résolution standard sur le web est 300 dpi (Dot per Inch) soit 300 pixels sur 2.54 cm.
La colorimétrie print est le CMJN (Cyan-Magenta-Jaune-Vert) ou synthèse additive.

Les formats web/
Résolution standard 72 dpi soit 72 pixels pour 2,54 cm.
La colorimétrie standard est le RVB (Rouge-Bleu-Vert) ou synthèse soustractive.

– Le .jpg ou jpeg, pour « Joint Photographic Experts Group » est l’un des premiers format compressé pour le web. Particulièrement conseillé pour la photo grâce à sa bonne qualité d’image et son amplitude de résolution, on le retrouve d’ailleurs partout comme standard en photo, vidéo, smartphone… Meilleur choix donc pour afficher une phot sur internet standard (sans détourage) car la transparence n’est pas prise en compte.

– Le .gif pour « Graphics Interchange Format », inventé en 1987 spécialement pour le web. Format très compressé en 8/16/24/64 bits, gère parfaitement la transparence et les animations (Gif animé). S’adresse plus aux logos, illustrations et graphiques que les photos dû à la très forte compression qui privilégie le poids au détriment de la qualité. Après avoir connu une éclipse, ce format revient sur le devant de la scène depuis quelques années grâce à la possibilité d’exporter facilement des extraits de vidéos sans en passer par des plugins et embeds des formats vidéos.

– Le .png pour « Portable Network Graphics », format plus récent (1996) se présentant comme une version très améliorée du gif. « lossless bitmap image format ». De qualité très supérieure il gère toujours la transparence, et de manière beaucoup plus fine, avec des transitions alors que le gif ne permet aucune gradation (on passe d’une opacité 100% à une opacité 0%). Très largement utilisé sur le web aujourd’hui en complément du jpg.

– Le .svg pour « Scalable Vector Graphics » (1999). Si vous êtes un usager de wikipedia vous devez le connaître puisque ce format open source s’est largement fait connaître grâce à ce site. C’est un format comparable au .png qui commence à s’imposer depuis le début des années 2000. Il permet aussi la gestion des animations et des transparences, est de base vectorielle (coordonnées de formes et couleurs plutôt que comptages de pixels) et supporte même l’aimation 3d. Il peut contenir des instructions supplémentaires depuis un fichier XML ce qui donne plus de latitude que pour une image classique. Il supporte bien également l’encodage en base 64 bits.

Alors que choisir ?
– La photo ? Sans hésitation, jpg. Directement depuis votre appareil photo, smartphone, ect. Attention toutefois la résolution de ces derniers peut être 300 dpi par défaut, pour l’impression papier. Il faudra trouver un logiciel qui permette de diminuer la résolution à 72 dpi.
– Des extraits de vidéos ? Si c’est court (5 secondes), le gif animé est parfait. Parfait aussi si vous n’avez besoin que d’un graphisme très léger, un simple carré de couleur par exemple.
– Des images avec transparences ? Png ou Svg. Attention toutefois pour le second qui n’est pas encore supporté par tout les navigateurs, et les anciennes versions.

A signaler que vous pouvez aussi agrémenter vos images avec du code (style CSS), mais à vos risques et périls car le rendu sera différent selon les navigateurs, ce qui n’est pas le cas pour une image, toujours interprétée de la même façon.
Exemples: Bordures transparente ou couleur, dégradés, ombrages, effets de rollover (interactivité)…

Depuis que les sites doivent êtres « responsives » (auto-adaptables aux smartphones/tablettes) Vous pouvez aussi remplacer certaines images par des pictogrammes vectoriels. Il en existe des milliers venant de nombreuses banques actuellement. L’un des standards les plus utilisés, avec Bootstrap (architecture responsive) comme Fonts Awesome. Viedoc.fr en affiche sur les pages de présentation.