Loupe
Vous êtes ici : Pédagogie et outils Des logiciels et des tutoriels Tutoriels vs. Tutoriaux

Une loupe pour zoomer sur les images

Loupe

Tutoriel pour utiliser une loupe sur les images dans les articles

xavier birnie-scott
dimanche 10 mai 2015

Une nouvelle fonctionnalité des sites de la galaxie Clionautes à utiliser sur des images pour zoomer sur des détails de la photo, carte, etc ...

La loupe est un outil pour permettre au lecteur de zoomer sur image telle qu’une carte. Il peut alors réveler des détails. L’effet obtenu est assez esthétique.

Il est préférable de choisir ses images en connaissant leurs tailles. Une bonne taille dans sa largeur (ou hauteur) se situe vers 1000px. Ces images remplissent largement l’écran qui a pour définition 1920px × 1080px.
Une image de 500px de largeur remplit donc à peu près un quart de l’écran.
Ce choix permet de ne pas alourdir le poids des fichiers sur le serveur. Une image peut avoir un poids d’une petite centaine de kiloOctets.

Un téléphone portable type Galaxy S4 possède un appareil photo de 13 MegaPixels. Les photos sont en format 4/3. Ce qui donne des photos de 3100px (80cm) par 2300px (60cm) à peu près. Cela remplit et dépasse largement les dimensions d’un écran qui est maintenant de 1980px (52cm) par 1080px (28cm).
Les images importées du téléphone sont affichées obligatoirement avec une réduction. Le fichier est enregistré en JPG (voir plus loin) et peut occuper une place de plusieurs MegaOctets, en fonction de la qualité. Cette taille, même si l’internet moderne est très rapide, ralentit de façon significative le chargement de la page.

Tout logiciel de retouche d’images, ou de visionnage parfois, autorisent le redimensionnement. Il existe également des logiciels gratuits qui font cela (ex : pixResizer, imageResizer ...), et des sites qui proposent ce service en ligne (resizeyourimage.com, ...).

Le format privilégié est le "jpg". JPEG (acronyme de Joint Photographic Experts Group) puis JPG est une norme qui définit le format d’enregistrement et l’algorithme de décodage pour une représentation numérique compressée d’une image fixe. Ce format compressé est idéal pour le web car la taille de l’image est optimisée.
Le format PNG (Portable Network Graphics) est plus lourd, il prend néanmoins en charge les effets de transparence. Ses caractéristiques lui permettent d’enregistrer des photographies sans perte de données, mais au détriment de la taille du fichier qui reste la plupart du temps très supérieure à celle de formats spécifiques aux photographies comme JPG.
Enfin un dernier format pour le web est le GIF (Graphics Interchange Format). Ce format permet de stocker de plusieurs images dans un fichier. Ceci permet de créer des diaporamas, voire des animations si les images sont affichées à un rythme suffisamment soutenu. Chaque image d’une animation peut avoir sa propre palette, qui malheureusement se réduit à 256 couleurs choisies parmi 16 777 216 nuances.

En clair :

  • JPG (ou JPEG) : Format idéal pour les photos et les illustrations compliquées. Contient des millions de couleurs. La Compression de l’image se fait avec une perte de qualité qui va de 0% à 99% (à choisir pour chaque image en fonction de son poids final).
  • GIF : Très pratique pour les dessins et images simples, avec peu de nuances, ainsi que pour les logos. Peut contenir 256 couleurs ou moins. Ce qui veut dire qu’une image de plus de 256 couleurs enregistrée au format GIF ne va en retenir que 256. Gère la transparence et les animations.
  • PNG : Format libre de droits. Convient pour tout type d’image, la transparence mais pas les animations. Il existe en 8 bits (type GIF, 256 couleurs) et en 24 bits (type JPEG, millions de couleurs, mais pas de compression).

Pour un article, un auteur peut vouloir choisir une image pour illustrer son propos, en insistant sur certains détails de celle-ci sans qu’elle occupe toute la place sur son article.
Les sites de la galaxie des Clionautes utilisent maintenant un effet de zoom sur les images. En passant la souris sur l’image, une loupe permet d’apprécier certains détails :

Cette image au format JPG a des dimensions de 1000px × 763px et occupe un poids de 122Ko, ce qui est raisonnable pour la taille et permet un chargement rapide de la page. Mais elle occupe toute la largeur de l’article. En outre, elle a été redimensionnée par le CSS et le javaScript (si l’on réduit ou augmente la taille de la fenêtre), ceci afin de permettre une meilleure mise en page et un responsive design pour s’adapter à tous les écrans.

On peut vouloir cependant réduire sa taille à l’écran et révéler des détails par un effet de zoom qui sera obtenu en passant la souris (ou le doigt pour les écrans tactiles) sur l’image.

On encadre l’image de la façon suivante :

<loupeClio>
  <imgXXX>
  <span class="taille 40%"></span>
</loupeClio>

La ligne précisant la taille est obligatoire et précise le pourcentage de réduction de l’image. L’image réduite est affichée, l’image en taille réelle sert pour la loupe lorsque l’on déplace la souris sur l’image.





Image centrée <imgXXX|center>




Image flottante à droite <imgXXX|right>




Image flottante à gauche <imgXXX|left>

Dans l’espace privé, SPIP redimensionne les images et insère des retours à la lignes avec une image pour les indiquer : . Votre image réduite ne sera donc pas de la même taille dans l’espace privé et dans l’espace public. Peut-être même qu’elle ne sera plus visible si vous utilisez cette loupe sur plusieurs images. Il se peut encore que la loupe ne fonctionne pas dans l’espace privé, mais elle fonctionnera dans l’espace public. Pour rappel, le bouton Prévisualiser vous permet, en cours de rédaction, de voir la mise en forme de votre article. Vous pouvez insérer des balises HTML telles que <div>, <span>, <p>... . Dans tous les cas, pensez à refermer celles-ci avec / : </div>, </span>, </p>...

Par xavier birnie-scott

Enregistrer l'article au format PDF

Clio-Carto 2017

Licence Creative Commons
Les Clionautes sous licence Creative Commons Attribution
Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Site développé avec SPIP, un programme sous licence GNU/GPL.

Design et Squelettes : B. Modica & X. Birnie-Scott pour Clio-Carto.

Hébergement Clio-Carto par