Article Contribute
Joe Gillespie
www.wpdfd.com*
Conversion d'images en graphiques web
Alors que l'ajout de texte aux pages web est un processus relativement simple (la saisie de texte dans un produit tel que Macromedia Contribute, par exemple), ce n'est pas forcment le cas des photographies, graphiques ou logos. Vous trouverez dans cet article quelques conseils pratiques qui vous permettront d'ajouter des images leur site web sans risquer d'altrer l'apparence visuelle de vos pages.
Le tlchargement des graphiques prend beaucoup plus de temps que celui du texte. En effet, une petite image de 6Ko comprenant l'quivalent d'un millier de mots, il faudra les utiliser avec parcimonie pour ne pas risquer d'ennuyer les lecteurs, qui doivent attendre la fin de leur tlchargement.
Il existe heureusement plusieurs faons de rduire la taille des fichiers de vos graphiques web. Tout comme pour les meubles emballs de la faon la plus efficace* ou une bote de concentr, les images peuvent tre compresses pour en faciliter le transfert avant leur affichage dans le navigateur.
La compression d'un fichier graphique consiste simplement l'enregistrer dans le format appropri*, le navigateur s'occupant du reste. Nous disposons de deux principaux formats convenant particulirement aux graphiques web, le meilleur format dpendant du type de l'image.
Cependant, avant de pouvoir compresser une image, vous devrez la redimensionner dans un programme de retouche afin de lui donner la taille qu'elle devra avoir dans la page web. En effet, le processus de redimensionnement utilis par le navigateur ne donne pas toujours les rsultats escompts et ralentit l'affichage de la page. L'image d'origine devrait toujours tre plus grande que l'image finale. L'agrandissement d'une image de taille rduite donne de mauvais rsultats tant donn qu'il est impossible de crer les dtails ncessaires un bon affichage.
Ajout de photographies au format JPEG
Une photographie utilise dans une page pourra provenir d'une collection numrique. Sinon, vous devrez numriser un transparent ou une photo papier, ou avoir pris votre photo avec un appareil numrique. L'image d'origine pourra avoir t enregistre dans diffrents formats (TIFF, PNG, PSD) en fonction de votre appareil-photo ou logiciel de numrisation. Le format convenant le mieux une utilisation sur le web est le format JPEG, qui porte l'extension jpg. La faon dont le format JPEG compresse les fichiers est relativement complexe, mais tout ce que vous devez savoir est que la qualit de l'image diminue en mme temps que la taille du fichier. Le format JPEG est un format avec perte, ce qui signifie que la qualit de l'image diminue chaque compression.
Une image JPEG de haute qualit donne un fichier volumineux, une image JPEG de moindre qualit donnant un fichier de taille plus rduite. Vous trouverez, entre ces deux extrmes, une taille de fichier optimale qui donne un rsultat pratiquement identique au document d'origine. Ce sera vous de juger de la qualit souhaite. Vous pourrez gnralement afficher un aperu de la qualit de l'image dans votre programme de retouche et effectuer les rglages ncessaires*. Des problmes de qualit de plus en plus importants apparaissent dans les rgions de couleur uniforme et le long des bords des objets au fur et mesure de la compression. Il conviendra donc de rduire le niveau de compression ds l'apparition de ces problmes. Le bon quilibre entre le niveau de compression maximum et une qualit visuelle acceptable est atteint lorsque vous ne pouvez plus dtecter ces problmes de rendu.
Mais voyons quelques exemples:
Ce fichier, provenant d'un CD photo, pesait environ 62Ko. Un niveau moyen de compression m'a permis d'obtenir une taille de 15Ko. Aucune perte de qualit n'est visible.
Cette version de 6,5Ko est nettement plus compresse, ce qui entrane une perte de qualit vidente, surtout au niveau du bord des nuages.
Compress au maximum, ce fichier ne pse plus que 5Ko mais est de trs mauvaise qualit. La diffrence de 1,5Ko seulement par rapport au fichier prcdent prouve bien qu'il est important d'quilibrer la taille du fichier et la qualit.
N'oubliez pas de garder une copie du fichier d'origine non compress une fois le niveau de compression idal confirm. En effet, le redimensionnement ou un nouvel enregistrement du fichier JPEG entranerait une perte supplmentaire, qui donnera une apparence encore moindre et pourra mme augmenter la taille du fichier.
Ajout d'images aux couleurs uniformes avec le format GIF
Pour les logos ou d'autres images qui contiennent principalement des zones de couleur uniforme sans dgrads, il est recommand d'utiliser le format GIF (.gif). Le format GIF ne convient pas aux photographies ou aux illustrations contenant diffrentes nuances de couleur. La taille de votre fichier GIF correspondra mme au nombre de couleurs de l'image.
Mais voyons cela de plus prs. Les zones de couleur uniforme de cette image, lorsque enregistre au format GIF avec une taille de fichier comparable celle de la meilleure image JPEG, n'apparaissent pas correctement, les nuances tant mme compltement perdues:
Vous devrez donc enregistrer le fichier avec un nombre de couleurs plus important ou activer la fonction de tramage, qui permet de simuler les nuances avec des motifs de points de couleurs dj prsentes. Cette image, plus volumineuse que son quivalent JPEG, est galement d'une qualit moindre.
Voici le principe du format GIF: au lieu de mmoriser la couleur de chaque pixel d'une image, le format GIF compte simplement le nombre de pixels de la mme couleur sur une ligne. Par exemple, il serait plus pratique de dire cette bote contient douze crayons rouges, cinq crayons bleus et un crayon jaune plutt que ceci est un crayon rouge, ceci est un crayon rouge, ceci est un crayon rouge, etc. En gros, le format GIF compte le nombre total de pixels d'une mme couleur. Cela est bien plus efficace et compact que le format JPEG.
La dcision prendre avec le format GIF est la suivante: De combien de couleurs ai-je besoin?. Si vous numrisez un logo bleu sur un fond blanc et le redimensionnez pour le faire tenir dans l'espace qui lui est rserv dans la page web, vous devrez slectionner un codage de couleur pour l'image correspondante. Vous dciderez ainsi du nombre de couleurs utilises pour afficher l'image. La quantit la plus rduite est deux couleurs une pour le premier plan et une pour l'arrire-plan ce qui aurait pour effet de pixelliser le logo et d'en dtriorer les bords. Avec quatre couleurs, les bords apparaissent un peu plus corrects mais sont encore crnels. Huit couleurs permet d'obtenir un aspect suffisamment lisse. L'utilisation de plus de huit couleurs pour un tel logo ne permettra pas d'amliorer la qualit de l'image et ne fera qu'augmenter la taille du fichier.
Dans cet exemple, l'image se fond progressivement du premier plan bleu l'arrire-plan blanc, avec un certain nombre de tons bleus intermdiaires. Alors que huit paliers sont gnralement suffisants, dans le cas d'un logo comprenant plus d'une couleur il sera judicieux d'utiliser un nombre gal de paliers pour les autres couleurs. Le nombre maximum de couleurs qui peuvent tre utilises dans une image GIF est de 256 une image comprenant 256 couleurs tant nettement plus volumineuse qu'une image n'en contenant que8.
Voyons un autre exemple. Le logo Jasmine suivant est un exemple de l'effet de la rduction du nombre de couleurs dans une image. Bien qu'une seule couleur avec un bord lisse soit utilise pour les lettres, le logo comprend galement un perroquet bigarr. Il est donc absolument ncessaire de reproduire les lettres de couleur uniforme tout en conservant la subtilit des couleurs de l'oiseau:
Ce GIF de 256 couleurs reproduit trs bien l'image, mais la taille du fichier est de 4,4Ko.
La rduction 128 couleurs n'entrane pas de diffrence visible mais permet d'obtenir un fichier de 3,62Ko.
A64 couleurs, l'image est encore de qualit acceptable, avec un fichier de taille de 2,87Ko. Ce format est probablement celui qui convient le mieux ce logo.
Avec 32 couleurs, et avec une taille de 2,37Ko, la couleur de l'aile suprieure a t divise en trois zones distinctes.
La rduction 16 couleurs entrane un rsultat encore moins subtil. Si vous dcidez que cette rduction de couleur reste acceptable, vous disposez d'un logo qui ne pse plus que 1,94Ko.
Mme avec huit couleurs, est une taille de 1,5Ko, le perroquet reste reconnaissable. Vous remarquerez que le texte n'a pas du tout souffert. Il reste encore suffisamment de couleurs pour obtenir un bord lisse.
Rduit quatre couleurs seulement, le fichier ne pse plus que 1,14Ko mais contient maintenant un perroquet aux couleurs appauvries et du texte aux bords crnels, tant donn qu'il ne reste plus assez de couleurs pour obtenir un fondu fluide avec l'arrire-plan. Vous remarquerez galement que le jaune a disparu.
Il est vident que deux couleurs ne suffisent pas reproduire l'image (mme si la taille de 0,76Ko peut sembler allchante). Un format limit deux couleurs ne peut tre utilis que pour les simples rectangles.
L'enregistrement du logo au format JPEG avec une taille semblable celle du GIF optimal (2,54Ko) prouve que le format JPEG ne convient pas ce type d'images. En effet, le format JPEG ne donne pas un bon rsultat avec les couleurs uniformes.
Obtention d'un fichier GIF avec une couleur transparente
Un des aspects intressants du format GIF est qu'il vous permet de dsigner une des couleurs comme devant tre transparente (ce qui est impossible avec le format JPEG). Une couleur transparente permet de faire apparatre le fond du document. Cette fonction est trs pratique lorsque la page web comprend un arrire-plan avec une texture ou des motifs. Vous devrez cependant faire attention, par exemple, dans le cas d'une image comprenant un arrire-plan blanc et place sur une page web avec un arrire-plan bleu. Etant donn que les tons intermdiaires le long du bord des lettres changent graduellement vers le blanc au lieu du bleu, vous obtiendrez un halo blanc autour du texte.
Pour obtenir un rsultat correct, vous devrez d'abord placer l'image (dans le programme de retouche) sur un arrire-plan de la mme couleur que celui de la page web finale et rendre cette couleur transparente*. Dans le cas d'un arrire-plan compos d'une texture ou d'un motif, vous pourrez utiliser la couleur dominante ou une couleur moyenne.
Voici ce que je veux dire:
La conversion de l'arrire-plan blanc de ce logo en couleur transparente (image de gauche) avant de placer cette image sur un arrire-plan bleu ne donnera pas le rsultat escompt. Le passage des bords au blanc entranera l'apparition d'un halo sur un arrire-plan bleu (image de droite).
Ici, l'image d'origine se trouvait sur un arrire-plan bleu que j'ai rendu transparent dans le programme de retouche (image de gauche), ce qui lui a donn un aspect anticrnel (image de droite).
Obtention de fichiers (et donc de pages) de taille rduite
Maintenant que vous savez comment obtenir des graphiques de taille rduite, vous devrez galement penser au nombre de graphiques que vous placerez sur vos pages. Si vous rduisez la taille d'un fichier 10Ko mais en placez dix exemplaires sur une mme page web, vous obtiendrez une page dpassant 100Ko, ce qui pourra poser un problme lorsque l'utilisateur ne disposera pas d'une connexion haut dbit.
Dans les conditions optimales, qui restent encore rares, une page web de 100Ko prendra de 15 20 secondes pour apparatre dans le navigateur (dans le cas d'une connexion 56K), ce qui est encore trop long. Un temps de chargement trop important et l'utilisateur passe simplement un autre site. Une taille de page maximum, y compris tout le texte et les images) devrait tre d'environ 50Ko (tlchargeable en 7 10 secondes avec un modem 56K).
Le test des dlais de tlchargement sur votre propre machine ou sur un rseau local ne donne jamais de rsultat raliste. C'est le rsultat obtenu par l'internaute qui compte. Vous devrez donc, avant de publier vos pages, les afficher sur un ordinateur connect au web l'aide d'un modem ordinaire. Le rsultat que vous obtiendrez sera le rsultat final.
A propos de l'auteur Joe Gillespie est un consultant bas Londres. Il gre, depuis 1996, Web Page Design for Designers*, un site consacr aux aspects cratifs du design web. Il a galement conu des polices pour le web, telles que MINI 7*, maintenant classique.
