Integration des images dans SPIPIntegration des images dans SPIP

septembre 2010 | Pierre Boureau


Logos d’articles et de rubriques

Chaque article ou rubrique du site peut se voir attribuer un logo, sorte de petite vignette visible à droite du titre de l’article dans le squelette par défaut de SPIP. Le logo du présent article est un fichier PNG semi-transparent représentant une diapo et un appareil photo. Les logos permettent d’agrémenter les longues listes d’articles sur les différentes pages du site. C’est le premier élément iconographique illustrant l’article. Ses dimensions ne devraient pas excéder 300 à 500 pixels de côté.

Les images pleines "embarquées" au sein du texte

Capture d'écran

Une fois téléchargé depuis la page d’édition d’un article, le fichier image (jpg, png, gif) peut être simplement intégré au corps du texte par copier/coller du code proposé sous la vignette : <imgXXX|left>, <imgXXX|center> ou encore <imgXXX|right>. Les trois X correspondent au numéro identifiant unique de l’image, et le choix de l’alignement déterminera la façon dont l’image s’intégrera au texte présent autour.

C’est la façon la plus élémentaire d’intégrer une image au texte. Dans ce cas de figure, l’image n’affichera aucun titre ou légende, même si ceux-ci ont été renseignés !

On peut néanmoins forcer l’affichage de la légende en remplaçant manuellement <imgXXX|center> par <docXXX|center>. Attention, cette astuce ne fonctionne QUE si l’image N’A PAS été déposée dans le portfolio, sans quoi ce n’est plus qu’une miniature qui s’afficherait !

Le Portfolio

Capture d’écran {PNG} Le Portfolio rapproche le comportement de l’image de celui d’un document-joint. Le documents-joint nécessite, pour être visualisé, qu’une action d’ouverture provoque son affichage : un clic.

Les images du portfolio sont ainsi présentée sous forme de miniatures cliquables. Chaque fichier image peut, ou non, être “déposé dans le portfolio”. Les codes évoqués plus haut changent alors sensiblement d’effet (voir tableau ci-dessous).

Le portfolio représente par ailleurs une manière simple et rapide de créer une petite galerie photos en dessous du texte courant. En effet, par défaut, le système affichera sous forme de documents-joints cliquables les images du portfolio si le code de celles-ci n’est pas explicitement ajouté au texte.

Le code d’intégration et ses effets pratiques

Voici donc un résumé des différents modes d’intégration d’un fichier Jpeg de 453px de large par 604px de haut. La Photographie, sous licence Creative-Commons-by est de nataliekbeats

Mode Simple, Hors-Portfolio
CodeEffet
<img529|center> Taille réelle sans légende La Tour Eiffel // Paris
<doc529|center> Taille réelle avec titre et légende apparents
JPEG - 72.3 ko
La Tour Eiffel // Paris
Licence CC-by nataliekbeats
Mode Portfolio
CodeEffet
<doc528|center> Miniature “cliquable” avec Légende apparente
JPEG - 72.3 ko
La Tour Eiffel // Paris
Licence CC-by nataliekbeats
<img528|center> Miniature “cliquable” sans légende apparente La Tour Eiffel // Paris {JPEG}
<emb528|center> Taille réelle. Bien qu’intégrée au Portfolio, on peut néanmoins forcer l’embarquement en taille réelle de l’image, avec Légende apparente
JPEG - 72.3 ko
La Tour Eiffel // Paris
Licence CC-by nataliekbeats

Une fois ajoutée à un article, n’importe quelle image peut être réutilisée sur n’importe quelle autre page du site si l’on dispose du code (numéro identifiant) qui lui est associé, même si on peut rappeler qu’une image ne peut bien sûr pas être à la fois hors et dans le Portfolio...

Taille et Poids des images

Pour s’afficher rapidement lors du chargement de la page web, les images doivent avoir des dimensions et un poids étudiés. De trop petite taille, l’image sera peu lisible. Trop lourd, le fichier ralentira le chargement de la page web et encombrera l’espace du serveur sans apporté de bénéfice conséquent.

Il faut bien distinguer la taille en pixels des images, et leurs poids en Octets. Si la taille a une influence sur le poids, celui-ci dépend également beaucoup du facteur de compression appliqué à l’image, du format d’image (GIF, JPEG, PNG).

On veillera donc à optimiser le poids du fichier-image en fonction de ses besoins, en distinguant les cas où l’image doit être intégrée à la page dans ses dimensions pleines des autres cas où on préfèrera des miniatures cliquables aux dimensions potentiellement plus grandes.

La colonne principale qui contient ces présentes lignes mesure par exemple 680px de large. Pour un affichage plein, on redimensionnera donc notre fichier à une taille proche de cette largeur. Correctement compressé, une photo JPEG de cette dimension pèsera entre 40 et 80 Kilo-Octets.

Pour présenter une meilleure définition, on choisira plutôt l’intégration sous forme de miniatures cliquables (mode Portfolio), dont l’agrandissement peut atteindre une valeur proche de la taille de l’écran de l’internaute. Mais là encore, des dimensions comprises entre 1000 et 1500px sont généralement très suffisantes. Les fichiers peuvent alors peser jusqu’à 200 ou 300 Ko.

Dans presque tous les cas, on évitera de publier "brutes" les images issus des appareils photo numériques actuels, pesant couramment plus de 4000Ko, un poids conçu pour les tirages papier de grandes tailles !!!

Ajouter un commentaire


SPIP v.3.0.17 [21515] | | Plan du site | Suivre la vie du site RSS 2.0