Bien choisir son format d'image

Bonjour.

Bien que je pensais ne pas voir ce cas de figure chez les membres habitués, j'ai quand même vu un cas où une formatrice avait posté ses captures qui étaient au format BMP, un format peu adapté au Web. Ce cas de figure montre donc qu'il est bon de se rafraîchir la mémoire sur les formats d'images, et le choix du bon format selon le contexte.

Étant donné qu'on est sur un forum portant sur GIMP, un logiciel de création dite "matricielle" (ou bitmap), je ne parlerai pas des formats vectoriels comme le SVG et autres Illustrator. Mais par contre, je ferai mention des fichiers dites "sources" qui conservent les calques et autres composantes formant l'image, comme le .XCF.

Le format .XCF

C'est le format natif de GIMP. Il permet de conserver les calques, canaux, chemins, guides, masques et la sélection courantes, ce qui fait qu'il est fortement recommandé d'enregistrer une copie de vos travaux dans ce format afin de pouvoir y retravailler plus tard.


Le format .PSD

C'est le format natif de Photoshop. GIMP supporte ce format, mais partiellement. En effet, certaines choses ne peuvent pas être gardées lors de l'exportation en .psd, notamment certains modes de calques et les masques de calque. Vous pouvez toutefois fournir quand même une copie en PSD en plus d'une copie en .XCF dans le cas de thèmes pour forums libre-service par exemple.


Le format BMP

C'est le format sous lequel MS Paint enregistre les images par défaut et sous laquelle les images sont converties lorsque mis en wallpaper sous Windows. Ce format est non compressé, ce qui fait que l'image est d'une qualité optimale, mais par contre, elle est extrêmement lourde, ce qui fait que pour une image de 1024*768, le poids dépasse les 2 Mo alors qu'en JPEG, GIF ou PNG, la même image fait moins de 100 Ko. Ce format est donc déconseillé pour le Web, que ce soit pour le design ou les captures d'écran, car les images BMP sont très lourdes à charger, même pour les connexions haut débit. Il n'est d'ailleurs pas supporté par le BBCode img du forum. Ce format ne supporte pas la transparence.


Le format JPEG

C'est le format compressé le plus connu. Ce format étant dit "destructif", il n'est pas recommandé pour des images ayant des démarcations très franches, comme les logos, les éléments de design et les captures, car le rendu sera très baveux tout près des démarcations. Par contre, ce format est parfait pour les photos, puisque pour ce type d'images, c'est sous ce format que le poids est le plus léger, et la perte de qualité n'est pas perceptible. Ce format ne supporte pas la transparence.


Le format GIF

C'est un autre format compressé très connu. Sa palette est limitée à 256 couleurs, ce qui fait qu'il convient pour des images ayant peu de couleurs (sans avoir les bavures du JPEG), mais conviendra pas pour une image comportant des dégradés. Il convient bien à certains éléments de design. Il supporte aussi les animations simples, sans avoir besoin de plugin pour les lire. Ce format supporte la transparence, mais uniquement la transparence totale, ce qui fait qu'il n'est pas recommandé pour les images transparentes ayant beaucoup de pixels translucides (ombres portées, bordures floues), car ceci a pour résultat de les pixéliser sur les bords.


Le format PNG

Ce format ouvert est de plus en plus connu et existe en plusieurs variantes, dont les plus connues sont le PNG8 et le PNG24.
Dans le cas du PNG8, les caractéristiques sont similaires à ceux du GIF (sauf pour l'animation qui n'est pas supportée), mais son poids est plus léger, ce qui en fait également un très bon choix pour les images comportant peu de couleurs, sans les bavures du JPEG. Il convient bien à certains éléments de design.
Dans le cas du PNG24, il supporte à la fois 16 millions de couleurs et la transparence progressive grâce à une couche alpha, ce qui en fait un format parfait pour les images transparentes ayant des ombres portées et des bordures floues, ainsi que les éléments de design comportant des dégradés qui ne sont pas bien rendus avec le GIF et les démarcations nettes qui donnent un rendu baveux avec le JPEG et ce, sans être aussi lourd qu'un BMP. Personnellement, c'est le format que je préfère en webdesign.
Le seul hic avec le PNG24, c'est que sa transparence n'est pas supporté dans Internet Explorer 6, mais l'utilisation de ce navigateur continue à baisser, et certains sites comme Digg et Youtube cessent le support de cette version dès cette année. Donc, selon le type de site que vous faites, vous pouvez ne pas vous préoccuper de la compatibilité de votre site avec IE6. GIMP vous donne aussi la possibilité d'enregistrer une couleur d'arrière-plan qui s'affichera si la transparence n'est pas supportée.
Ensuite, par expérience : Lorsque vous utilisez la technique de la fausse transparence, qui consiste à mettre un arrière-plan de la même couleur que l'endroit où l'image sera placé, vous devez vous assurer de ne pas enregistrer le gamma lors de l'export, et que votre hébergeur d'image n'applique pas de traitement gamma sur tous les PNGs envoyés, car sinon, ces PNGs seront légèrement assombris sous Internet Explorer. Je l'ai appris à mes dépens en testant un de mes thèmes Forumactif-Phpbb2 que j'adaptais pour la version phpbb3, puisque j'ai dû héberger mes boutons sur le FTP de mon portfolio car je m'étais rendue compte que les boutons que j'avais envoyés sur mon photobucket étaient tous assombris sous IE.


Pour résumer

Cela va donc selon le contexte.

- Pouvoir retravailler plus tard : XCF
- Photo : JPEG
- Animation, image avec peu de couleurs : GIF
- Élément de design, image avec transparence progressive, captures : PNG, sans gamma


J'espère que c'est maintenant plus clair pour vous et que vous saurez mieux choisir votre format. Je vous laisse avec quelques liens en rapport avec les formats d'images :
- http://fr.wikipedia.org/wiki/Image_num%C3%A9rique
- http://www.en1heure.com/pratique_formats_image.php
- http://www.logiwin.ch/1002-Les_formats_d%27image_pour_le_web
- http://www.maths-informatique-jeux.com/programmation/divers/compression/images.php
- http://www.sp.k12.tr/html/images_comparatif/images.html

Si j'ai bien compris on doit enregistrer nos bann` en PNG.

Je considèrerais que oui, car bien souvent, les bannières et signatures ont une bordure bien définie, voire même une typo bien définie, ce qui fait que si c'est enregistré en jpg, ça risque de paraître.

oui en png

merci pour le partage ishi ^^

Ok merci beaucoup