 |
 |
||||||
 |
 |
 |
|
||||
 |
 |
 |
 |
 |
|
||
 |
|
||||||
 |
|
||||||
 |
|
||||||
Les galeries photographiques sur le Web
Les conseils qui suivent ne sont pas destinés aux débutants qui veulent créer leur première page, mais plutôt à ceux qui ont déjà exploré un peu le HTML et l'infographie et qui veulent aller plus loin en réalisant des galeries photographiques de qualité sur le Web.
Considérations esthétiques et pratiques
Une bonne galerie photographique sur Internet doit présenter des images à ses visiteurs de manière esthétique et pratique. Esthétique, signifie que les qualités originelles des photos doivent être, dans la mesure du possible, conservées dans leur version Web. Pratique, signifie qu'elles doivent être chargées rapidement et être compatibles avec les logiciels de navigation et les matériels des visiteurs.
Un des choix cruciaux qu'il faut faire lors de la création d'une galerie est la taille, en pixels et en octets, des images. Plus l'image sera grande et mieux un visiteur sera à même de voir les détails de celle-ci, mais deux contraintes vous empêchent d'utiliser des images aussi grandes que vous le souhaiteriez :
- La résolution de l'écran du visiteur. Une photo qui est trop grande pour être vue en entier à l'écran va obliger le visiteur à la balayer et il n'aura jamais une vision d'ensemble de celle-ci. Inutile de vous dire qu'il sera beaucoup moins à même de l'apprécier (sauf dans le cas particulier d'un panoramique). Les tailles d'écran les plus répandues sont 1024x768 pixels et 1280x1024 pixels, mais on rencontre également aux deux extrémités du spectre des écrans dont le nombre de pixels est plus ou moins élevé. La règle précédente s'applique aussi bien pour les photos cadrées verticalement que celles cadrées horizontalement et un écran d'ordinateur permet, compte tenu de sa forme, d'afficher plus facilement les images cadrées horizontalement que celles cadrées verticalement, surtout depuis que certains ordinateurs ont des écrans au format 16/10e, plus propice pour visionner des films. Mais ce n'est pas parce que l'écran aura une hauteur de 768 pixels que vous disposez réellement de cet espace. En effet, la zone effectivement consacrée à l'affichage du site est amputée. En haut par la barre de titre, la barre de menus, les différentes barres d'outils et en bas par la barre de statut et la barre de Windows (sur un Mac c'est éventuellement encore pire avec les docks). Cela réduit parfois tellement la taille utile qu'on se demande comment on peut encore afficher quelque chose ! Ce n'est pas tout : on veut souvent rajouter une légende à l'image, et il faut bien avouer que la position la plus naturelle est au-dessus ou en-dessous. Et voici encore quelques pixels de perdus !
La vitesse de chargement des pages chez le visiteur. Vos images ont beau être magnifiques, si le visiteur doit à chaque fois patienter plusieurs minutes avant de les voir, il ira patienter ailleurs ! La rapidité avec laquelle il verra l'image dépend bien sûr de sa taille (en octets cette fois), de la disponibilité du serveur qui héberge votre site, de l'encombrement d'Internet et de la rapidité de la connexion du visiteur au réseau. De votre coté, vous ne maîtrisez guère que les deux premiers éléments. Choisir un hébergeur dont les serveurs ont des temps de réaction rapides est une nécessité quand on crée un site à dominante photographique, mais l'élément sur lequel vous pouvez le plus agir est la taille (en octets) des fichiers images. Ce facteur est de moins en moins important : en France et dans les autres pays industrialisés, le haut débit représente aujourd'hui la majorité des accès et le pourcentage d'accès haut débit ne cesse de croître. Il n'est toutefois pas interdit d'avoir, lors de la création de votre site, une petite pensée émue pour les 35% d'internautes Français qui mi-2005 n'avaient pas d'accès haut débit ou pour les internautes des pays en voie de développement qui vont attendre ce confort encore longtemps.
Il résulte des contraintes que je viens d'exposer que la taille, en pixels et en octets, des images d'une galerie va devoir être réduite par rapport à l'original issu d'un scan ou d'un appareil numérique. Les deux seules manières de réduire la taille en octets d'un fichier image sont de réduire la taille de l'image en pixels ou d'augmenter le facteur de compression JPEG (le format incontournable pour montrer des photos sur le Web). Réduire la taille de l'image en pixels est une méthode très efficace, mais si vous la réduisez au format d'un timbre poste, les détails de l'original auront disparu dans l'opération. Augmenter le facteur de compression dans votre logiciel de traitement d'images est une solution séduisante : le fichier image voit sa taille diminuer sans que la taille d'affichage ne change. Le revers de la médaille est que l'image devient rapidement de très mauvaise qualité avec du flou et des artefacts très perturbants (voir exemple). Il est ainsi très fréquent de voir sur le Web de superbes images honteusement massacrées par des webmestres désirant un chargement très rapide de leurs pages. Je vous avoue que, massacre pour massacre, je préfère encore la solution du timbre poste.
Dans la pratique, quelles tailles adopter ? Cela dépend du design de votre site. Si vous utilisez JavaScript pour ouvrir une fenêtre de navigateur à la taille de l'écran et sans barres de navigation et d'état, vous pourrez afficher des images plus grandes, mais attention : ces scripts ne se comportent pas toujours de la même manière dans les différents navigateurs et il y a un risque que des internautes soucieux de sécurité empêchent leur utilisation dans le leur. Ne pas les utiliser entraîne deux conséquences :
- la première est qu'il faut choisir pour les images cadrées verticalement une plus petite dimension que pour celles cadrées horizontalement. Je vous l'ai dit, l'écran d'un ordinateur est plus propice à la représentation des images horizontales que des images verticales. Dès lors, il n'est pas logique de pénaliser une majorité d'images horizontales en voulant à tout prix leur donner la même taille que les images verticales restreintes par l'écran et le navigateur.
- la deuxième est qu'il faut faire deux galeries (ou même plus). Une pour les personnes qui ont un écran de faible définition (optimisée pour le 800x600, par exemple, mais qui peut également être utilisée par les personnes ayant un accès internet bas débit), et une pour les écrans de plus haute définition.
Par ailleurs, on peut utiliser des images dont le rapport des dimensions est un peu moins classique que le traditionnel 3/2 issu du 24x36. Notamment le 16/9e, le format carré et un panoramique dont la largeur est trois fois plus importante que la hauteur. Pour déterminer la taille de ces images tout en veillant à une certaine «équité» entre les surfaces d'image de ces formats, Il faut veiller à ce que les images aient chacune le même nombre de pixels que celles au format horizontal 3/2.
Ces règles peuvent donner pour une galerie adaptée à un écran 1024x768 :
- images horizontales : 525x350
- images verticales : 460x307
- images carrées : 429x429
- images 16/9e : 572x322
- images panoramiques (3:1) : 742x247
Et pour une galerie adaptée à un écran 800x600 :
- images horizontales : 342x228
- images verticales : 300x200
- images carrées : 279x279
- images 16/9e : 372x209
- images panoramiques (3:1) : 484x161
Une fois la décision de la dimension prise, une autre question se pose : présenter toutes les photos d'une galerie simultanément à un tel format n'est pas possible, le temps de chargement serait trop important. Plusieurs astuces sont envisageables pour contourner cet inconvénient :
- Les vignettes (version réduite de l'image) sur une page de sommaire
- Les vignettes dans une marge indépendante (frame)
- Le slideshow avec défilement temporisé des images
- Le slideshow avec défilement des images par l'utilisateur (boutons)
On peut bien sûr également envisager d'autres variantes de ces techniques de base. D'une manière générale, l'avantage du slideshow par rapport aux vignettes est d'afficher plus rapidement la première image, mais l'inconvénient est que le visiteur doit obligatoirement suivre l'ordre préétabli des photos. En cas d'utilisation de vignettes, 100 pixels pour la plus grande dimension de chaque image est un excellent choix pour la grande galerie, pour la petite ce sera 65 pixels.
Il existe également des galeries photo qui utilisent le logiciel Adobe Flash. Ces galeries permettent de réaliser des transitions entre les images très spectaculaires (ce qui n'est peut-être pas indispensable) mais aussi, quelquefois, d'adapter la taille de l'image vue par le visiteur à la taille de la fenêtre de son navigateur, ce qui est beaucoup plus intéressant. Attention toutefois : même si le téléchargement de Flash n'est pas très compliqué, prévoyez par correction vis à vis de vos visiteurs une version de la galerie qu ne fait appel qu'au langage HTML.
Quel est le bon facteur de compression d'une image JPEG pour une galerie ? Un logiciel comme Adobe Photoshop permet de visualiser côte à côte la version compressée et la version non compressée d'une image et de suivre les altérations au fur et à mesure que l'on change le taux de compresssion. Cela aide grandement à définir un seuil à partir duquel les altérations introduites par la compression ne sont plus admissibles.
Numériser les photos
L'étape de la numérisation est également cruciale pour la réussite d'une bonne galerie. Si vous faites de la photo numérique, les longues séances de scan d'images ne sont plus qu'un mauvais souvenir pour vous. Dans le cas contraire, je vous encourage à utiliser la solution de la diapositive numérisée à l'aide d'un scanner de diapos. Ceci dit, je conviens parfaitement que tout le monde n'a pas envie d'investir 600 euros (au moins) dans ce genre d'appareil et que la solution du scanner à plat est bien plus économique (on en trouve aujourd'hui pour moins de 100 euros). Evidemment, la numérisation par un scanner à plat d'un tirage ne contient pas la gamme de luminosité de l'image originelle puisque le papier ne peut restituer toute l'information présente sur un négatif ou une diapositive.
Dans tous les cas, les opérations à effectuer dans votre logiciel de retouche d'images pour passer du fichier sortant du scanner ou de l'appareil numérique à celui qui sera inclus dans un site Web sont les mêmes que celles que j'ai décrites dans l'article «La photographie numérique en trek» au chapitre «Le traitement des images» et je vous invite à le consulter.
Création des pages et rapidité de mise à jour du site
De retour de voyage, la création d'une galerie de photos peut être une tâche longue et rebutante : sélectionner les photos, les numériser, les traiter, créer les vignettes, écrire les pages HTML, mettre à jour le site. Lorsque j'ai créé mon site, il fallait souvent plusieurs mois après mon retour pour que je ne me décide à m'atteler à la tâche, et il fallait ensuite deux ou trois semaines de travail avant que je ne la termine.
Lassé, j'ai écrit un programme qui examinait les images présentes dans un répertoire et qui générait pour moi le code HTML nécessaire à leur présentation (il fallait tout de même que je donne les légendes).
J'ai ensuite découvert que je n'étais pas le seul à avoir eu cette idée : des auteurs de sharewares avaient également créé ce genre de logiciel et le vendaient sur le Web. Comme les possibilités de leurs créations dépassaient de loin celles de la mienne, je n'ai pas hésité à dépenser les quelques dizaines d'euros nécessaires à l'acquisition de l'un d'entre eux.
Il s'appelle Arles Image Web Page Creator. Il est capable de lire des images, quelque soit leur format, dans un répertoire donné. De changer leur taille, d'augmenter la netteté, de superposer un titre, de les sauvegarder au format JPEG, de créer des vignettes (version réduite de l'image pour l'index), de créer le HTML à partir de vos légendes et de vos spécifications. Et tout cela en quelques secondes ! Comme le logiciel comporte énormément de paramètres, vous n'aurez aucun mal avec Arles à créer une galerie du type que vous souhaitez avec la présentation que vous souhaitez. Je le recommande sans réserve.
Mais récemment, j'ai trouvé une solution encore plus intéressante par certains points : Adobe vient de sortir un logiciel dédié aux photographes appelé Adobe Photoshop Lightroom. Non seulement ce logiciel contient tout ce que peut désirer un photographe mais il génère également des galeries internet, et quelles galeries ! Certains types de galeries (template) qu'il est capable de générer utilisent la technologie Flash, d'autres le HTML. Les images de la galerie sont générées automatiquement dans plusieurs dimensions et, lorsqu'elles sont affichées, la dimension la plus adaptée à la taille de la fenêtre du navigateur du visiteur (et donc à la taille de son écran) est automatiquement chargée. Voilà qui économise beaucoup de travail au créateur de cette galerie ! Quand vous saurez que la galerie est personalisable et que les légendes des images peuvent être affichées à partir des tags ITPC de l'image elle-même, vous n'aurez pas de mal à comprendre pourquoi j'ai désormais choisi cet outil. Des développeurs indépendants, comme SlideShowPro commencent à créer des galeries additionnelles pour Lightroom et le résultat est aussi esthétique que facile à utiliser, c'est mon choix actuel.
Une solution plus simple, si vous ne désirez pas générer de galerie, même à travers un logiciel, consiste à utiliser un site qui vous permet d'héberger vos photos comme Flickr. Non seulement vous pourrez, grace à Flickr partager vos photos en leur ajoutant titre et description et en affichant les données EXIF de prise de vue, mais vous pourrez également situer la prise de vue sur une carte, recevoir des commentaires d'internautes, les référencer dans un site ou dans votre blog et les présenter sous forme d'un slide-show écrit en Flash et très réussi. La seule peine que vos aurez à vous donner pour cela est d'injecter les images sur le site.