UNE GALERIE PHOTO SUR INTERNET

Afficher une photo

Pour afficher une image dans une page HTML, la commande est :

<img src="images/avion.jpg" alt="envol" width=150 height=98>

avec les attributs suivants :

src="images/avion.jpg"	emplacement de l'image à afficher. Ici c'est avion.jpg qui se trouve dans le répertoire images
alt="envol" title="envol"	texte alternatif qui est affiché par les navigateurs n'ayant pas l'option image activée. Mais certains affichent aussi cette valeur dans une petite fenêtre popup lorsque la souris passe sur l'image. Cet effet est pourtant réservé à l'attribut title.
width=150 height=98	dimensions d'affichage, place occupée à l'écran. Ce ne sont pas forcement les dimensions de l'image!

voilà ce que donne la commande ci-dessus (où les paramètres width et height ont pour valeurs les vraies dimensions de la photo) :



si les paramètres sont différents :

<img src="images/avion.jpg" alt="plus petit" width=75 height=49>

<img src="images/avion.jpg" alt="plus grand" width=300 height=196>

Avec cette dernière ligne de commande, la photo est affichée au double de sa taille réelle : la qualité est détériorée, les pixels peuvent être visibles. Par contre une photo réduite reste nette. Si les paramètres width et height sont omis, la photo apparait à sa taille réelle.

Cette commande est la base d'une galerie photo !

Quelles dimensions pour les photos?

La photo avion.jpg ci-dessus fait 150 pixels dans sa plus grande dimension. C'est nettement insuffisant pour apprécier la photo. Mais il ne faut pas imaginer que plus grande sera l'image, mieux ce sera.

La grande majorité des écrans d'ordinateurs des internautes n'ont qu'une résolution de 800x600 pixels. Sur un site tel que TheM, il faut rajouter la marge de 145 pixels qui accueille le sommaire. Il ne reste donc plus que 655 pixels pour afficher une photo, son commentaire, etc.

450 pixels semble être une bonne dimension permettant d'apprécier correctement la photo et ses détails, tout en aérant le site web. Car la galerie doit mettre en valeur les photos, et non l'inverse!

L'ennemi de la galerie photo :
le temps de chargement

Un fichier photo de 450 pixels, compressé en format JPEG, fait en général entre 25 et 100ko. Si toutes les photos sont présentées sur une seule et même page, le temps de chargement est si long avec un modem téléphonique classique que les éventuels visiteurs risquent de se décourager avant même d'avoir vu la moindre image.

La galerie photo doit donc laisser le choix à l'internaute de passer ou non du temps à télécharger une image. Cela ne doit pas lui être imposé. Il doit se sentir libre, naviguer à son aise dans le site. Ainsi il reviendra plus volontier.

Le plus simple est d'avoir une page d'accueil présentant toutes les photos mais dans une petit format. Pour chaque imagette, un lien mènera vers la photo pleine résolution. Attention, ce sont bien des photos de taille réduite et non pas des photos pleine résolution dont les dimensions d'affichage sont réduites par les paramètres width et height de la commande <img ... >. En effet dans ce cas, charger la page d'accueil revient à télécharger toutes les photos pleine résolution! Et c'est exactement ce qu'il faut éviter!

Il est donc nécessaire d'avoir 2 images pour chaque photos présentées :

• une image dans un petit format (150 pixels dans leur plus grande dimension) pour la page d'accueil
• une image grand format (environ 450 pixels) que le visiteur choisit de télécharger s'il désire apprécier tous les détails de la photo.

Les liens de la page d'accueil

Pour accéder à la photo pleine résolution, le plus simple est de cliquer sur l'imagette de l'accueil. La commande pour créer ce lien est la suivante :

<a href="images/avion_gf.jpg">
<img src="images/avion_pf.jpg" alt="envol" width=150 height=98>
</a>

La commande <img ...> d'affichage de l'imagette est inclue dans une commande <a>... </a> qui indique qu'un lien est créé. Les paramètres sont les suivants :

src="images/avion_pf.jpg"	la source de l'imagette visible sur la page d'accueil. C'est un fichier JPEG différent de celui de la photo pleine résolution.
href="images/avion_gf.jpg"	le lien vers la photo grand format. Celle-ci s'affichera alors dans la fenêtre du navigateur internet à la place de la page d'accueil. Il faudra utiliser “revenir à la page précédente” pour retrouver la page d'accueil et voir d'autres photos.

Pour en savoir plus

Et voilà une galerie virtuelle tout à fait fonctionnelle. Pour en savoir plus sur le traitement des photos numériques, et en particulier leur dimensionnement, un très bon site est indiqué sur la page des liens.