**SpipFactory.fr**
# Article validé
L’article "**Images vous avez dit "Images"**
(https://spipfactory.fr/?images-vous-avez-dit-images)" vient d’être
publié par spipfactory.fr.
* * *
## Images vous avez dit "Images"
lundi 22 juillet 2019 , par [spipfactory.fr](.././?_spipfactory-fr_)
**Le format d’image et sa résolution sont très importants, quel est le
bon format d’image à utiliser ** ?
*Le format d’image peut être différent selon le type d’utilisation de
cette image. *
Il existe deux types d’images :
* Les images fixes, par exemple les photos.
* Les images animées, comme les vidéos.
L’image est constituée d’un ensemble de points, appelés des « pixels
».
La résolution de l’image est exprimée en DPI (Dots Per Inch), une
unité de mesure anglaise, appelé PPP en français (points par pouce) et
également « pixels par pouce ».
Par exemple :
700 DPI = 700 colonnes et 700 lignes de pixels par pouce carré.
La résolution est le rapport entre le nombre de pixels de l’image et la
taille réelle de sa représentation sur un support physique, tels qu’une
imprimante ou un scanner.
**Quel format d’image et quelle résolution pour le web ?**
Pour avoir un beau visuel non pixelisé, il est important de respecter le
format d’image demandé.
Aussi, la résolution standard sur le web est de 72 dpi soit 72 pixels x 72
pixels pour un carré de 2,54 cm de côté. La colorimétrie standard est
le RVB (Rouge, Bleu, Vert)
* Le format d’image jpg ou jpeg (Joint photographic experts group) est
l’un des premiers formats compressés pour le web, c’est de très loin
le format d’image le plus répandu. Il est également conseillé pour la
photographie, à la fois pour la bonne qualité de la photographie après
compression et l’amplitude des résolutions possibles. Il gère des
millions de couleurs.
<!-- -->
* Le gif (Graphics Interchange Format) est inventé en 1987 par
Compuserve pour l’Apple II. Ce format d’image utilise un système de
compression non destructif. Il est codé en 8 bits, il gère la
transparence et il est limité à 256 couleurs. C’est un format de moins
en moins utilisé (sauf pour les gifs animés, ex : les smileys).
<!-- -->
* Le png (Portable Network Graphic) est un format datant de 1996, c’est
une version améliorée du gif, elle gère plus de 16.7 millions de
couleurs. Sa qualité est supérieure au .gif et la transparence est
gérée. Le poids d’une image au format png est supérieur au .jpg.
**Que choisir ?**
Pour le web, le format GIF est à éviter, vous pouvez encore l’utiliser
pour les des pictogrammes ou la favicon.
Le format PNG permet d’afficher une belle image de bonne qualité et de
grandes tailles. C’est idéal pour des grandes photos, des fonds
d’écrans.
Le .gif et le .png permettent de gérer la transparence. Le format JPEG,
c’est pour “tout le reste”.
Si vous souhaitez optimiser le référencement naturel d’un site
internet, la diminution du poids des images permet très souvent de baisser
le temps de chargement d’une page web.
Si vous souhaitez réaliser un site internet avec des images de qualité
sur des écrans HD, vous devrez en plus respecter les contraintes du
retina.
Le format d’image adapté au responsive
Depuis que les sites internet sont responsive (ils s’adaptent à toute
taille d’écran : Ecran ordinateur, tablette, smartphone), il est
possible de remplacer les images par un format d’image léger, le SVG
(Scalable Vector Graphics).
Le format d’image SVG est un format de dessin vectoriel idéal pour
représenter des formes simples. Ces formes sont étirables à volonté
sans perte de qualité et sans effet de pixellisation.
Le SVG présente de nombreuses qualités, il est issu d’un code ouvert et
libre, il peut -être :
* Edité avec un éditeur de texte de type notepad++ car c’est du XML,
* Stylé grâce au CSS,
* Manipulé via JavaScript.
pour conclure un tableau récapitulatif :
Format
JPG
GIF
PNG 24
PNG 8
SVG
Avantages
Léger
Possibilité de choisir le niveau de compression
16 millions de couleursGestion des animations
Pas de pixellisation
Gestion de la transparencePas de pixellisation
16 millions de couleurs
Gestion de la transparence, même partielleLéger
Pas de pixellisation
Gestion de la transparence
Possibilité de choisir le nombre de couleurs indexéesLéger
Pas de pixellisation
Vectoriel : agrandissement de l’image sans perte de qualité, sans
pixellisation
Gestion de la transparence
Inconvénients
Pas de gestion de la transparence
Mauvais rendu sur les aplats et textes
PixellisationLimité à 256 couleurs maximum
Pas de transparence partielle (seulement des zones entièrement
transparentes)
Lourd
Limité à 256 couleurs maximum
Pas de transparence partielle (seulement des zones entièrement
transparentes)
Non supporté par Internet Explorer 8 et ses versions antérieures
Uniquement pour les images vectorielles
Implémentation variable de la balise <svg> selon les navigateurs
Utilisation
Photos sans transparence Images animées
Visuels nécessitant une transparence partielle (dégradé sur fond
transparent, opacité partielle…)
Visuels nécessitants beaucoup de couleurs et des aplats
Visuels avec aplats et sans transparence partielle : logos, schémas,
icônes…
Icônes, logos et pictogrammes
---------------------------------------------------------------------------
**Dans SPIP**
SPIP vous offre la possibilité d’illustrer vos articles et vos brèves
avec des images. Cela s’effectue en plusieurs étapes : vous devez
envoyer le fichier de votre image vers le site, puis insérer l’image à
l’intérieur du texte.
SPIP permet de déposer les images sous deux formes :
* En tant qu’illustration : sert à illustrer le texte de votre
article.
* En tant que documents joints ou portfolio : sert à placer des images
plus lourdes, pour créer un diaporama, une planche contact... Cette option
n’est valable que si le webmaster a activé l’option Configuration >
Contenu du site > Documents joints > Activer le téléversement pour les
contenus : Articles
SPIP reprend entièrement le mode d’ajout des images grâce au plugin
medias (livré par défaut, anciennement nommé mediatheque). Il est donc
maintenant possible d’ajouter des images (ou documents) de plusieurs
façons :
* depuis mon ordinateur : permet d’uploader un fichier stocké depuis
son disque dur
* depuis la médiathèque : permet de sélectionner un document déjà
ajouté sur le site grâce à une page centralisant touts les documents «
multimédias »
* depuis le serveur : permet de charger des documents ayant été
déposés par FTP dans le répertoire /tmp/upload du serveur
* depuis internet : permet d’ajouter une ressource distante comme par
exemple une image flickr, un zip de github, une vidéo youtube...
- **Les informations liées à votre image**
Une fois votre image envoyée au serveur, une case apparaît sur la gauche
de l’écran. Il y a là toutes les informations nécessaires qui la
concernent.
* le nom de l’image
* le titre de l’image si renseigné
* Affichage sous forme de vignette. Une prévisualisation de votre image
apparaît. Si l’image est de grande taille (plus de 200 pixels de large),
c’est une version de taille réduite qui est affichée.
* Les iconnes de rotation de l’image
* Raccourcis SPIP. Voir ci-après : SPIP vous rappelle les 3 «
raccourcis » qui vous permettent d’insérer cette image à
l’intérieur de votre texte. Notez que chaque image est « numérotée »
ainsi : « IMG1 », « IMG2 »... Ces « raccourcis » sont utilisés dans
la troisième étape.
* Déposer l’image dans le portofolio
* -*Supprimer cette image. Comme son nom l’indique, le bouton «
Supprimer cette image » permet d’effacer ce fichier, si vous avez fait
une erreur de manipulation, ou si vous décidez finalement de ne pas
utiliser l’image dans ce texte. Il est conseillé d’effacer les images
inutilisées, afin d’éviter d’encombrer votre serveur avec des
fichiers inutiles.
* Détacher l’image
* Modifier vous ouvrira
* Taille de l’image. Juste au-dessus de l’image, la largeur et la
hauteur de votre image (en pixels - ou « points ») sont rappelées.
* Titre et description de l’image. Vous pouvez, si vous le désirez,
indiquer un nom et une description pour chaque image. Par exemple une
explication, ou une mention du copyright du photographe...
* rajouter une vignette ou laisser faire spip
Vous pouvez recommencer l’opération avec autant d’images que vous le
désirez (un article ou une brève peuvent contenir autant d’images que
nécessaire).
L’on peu donc rajouter l’image en tant qu’illustration ou dans le
portfolio.
**Comprendre les raccourcis images de SPIP**
Les raccourcis images permettent l’affichage des images dans SPIP. Ces
accourcis sont traduits sous forme d’un code HTML précis (qui est
défini via les modèles présents dans le répertoire
plugins-dist/medias/modeles/ ). Ce code HTML est ensuite « habillé » par
les feuille de style (CSS) pour obtenir la présentation finale.
les raccourcis , <emb>, <doc> sont équivalents. Ils affichent l’image en
pleine taille.
Raccourci
Signification
Illustration
Portfolio
`<img>`
image
Image
Le logo de SpipFactory
Vignette + Lien
Affiche la vignette avec un lien cliquable vers l’image en pleine taille
` <doc> `
document
Image + Titre
<figure class='spip\_document\_162 spip_documents' role="group">
(https://spipfactory.fr/sites/spipfactory.fr/IMG/png/logo-spipfactory.png)
<figcaption class='spip\_doc\_caption'style='width:150px;'>
**Le logo de SpipFactory**
ici la description de l’image :
Polatouche (écureuil) réalisé par le coup de crayon de Jc
crédits : logo réalisé par Kyodev
</figcaption></figure>
Vignette + Titre + Lien
Affiche la vignette et son titre avec un lien cliquable vers l’image en
pleine taille
`<emb>`
embed
(« embarqué »)
Image + Titre
<figure class='spip\_document\_162 spip_documents' role="group">
<figcaption class='spip\_doc\_caption'style=''>
**Le logo de SpipFactory**
ici la description de l’image :
Polatouche (écureuil) réalisé par le coup de crayon de Jc
crédits : logo réalisé par Kyodev
</figcaption></figure>
Image + Titre
Affiche l’image en pleine taille avec son titre sans lien (embed)
---------------------------------------------------------------------------
** Comprendre le paramètre alignement : left, right, center**
Les images sont intégrées dans le fil du texte qui respecte la logique du
HTML
Positionnement
Résultat graphique
code
Résultat
Position par défaut
L’image se place dans le fil du texte
`<imgXX>`
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec .... Le
logo de SpipFactory Lorem ipsum dolor sit amet consectetuer consequat et
Donec lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id
volutpat Donec ....
Position à gauche
L’image se place à gauche et le fil du texte continue sur sa droite
jusqu’à dépasser l’image en hauteur
`<imgXX|left>`
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec .... Le
logo de SpipFactory Lorem ipsum dolor sit amet consectetuer consequat et
Donec lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id
volutpat Donec ....
Position centrée
L’image se place au centre et le texte passe à la ligne
`<imgXX|center>`
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec .... Le
logo de SpipFactory Lorem ipsum dolor sit amet consectetuer consequat et
Donec lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id
volutpat Donec ....
Position à droite
L’image se place à droite et le fil du texte continue sur sa gauche
jusqu’à dépasser l’image en hauteur
`<imgXX|right>`
Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec .... Le
logo de SpipFactory Lorem ipsum dolor sit amet consectetuer consequat et
Donec lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id
volutpat Donec ....
---------------------------------------------------------------------------
Par exemple, pour placer une image à droite d’un paragraphe, la syntaxe
sera donc
`<imgXX|right>Lorem ipsum dolor sit amet consectetuer consequat et Donec
lacinia id. Lorem pretium Curabitur lacus Pellentesque leo id volutpat
Donec ....`
et non
`Lorem ipsum dolor sit amet consectetuer consequat et Donec lacinia id.
Lorem pretium Curabitur lacus Pellentesque leo id volutpat Donec ....<br
/>
<imgXX|right>`
Pour placer des images les unes à côté des autres :
`<img50|left><img57|left><img58|left> ...`
**Dans SpipFactory**
Hello
Voici ce qui est défini dans le fichier escal_options.php :
// les images de plus de 2000 pixels de largeur ou de hauteur ne seront pas
enregistrées
define(’\_IMG\_MAX_WIDTH’, 2000) ;
define(’\_IMG\_MAX_HEIGHT’, 2000) ;
// Et pour éviter de faire planter GD2 :
define(’\_IMG\_GD\_MAX\_PIXELS’, 2000000) ;
Ces valeurs peuvent être modifiées en créant un fichier mes_options.php
dans le dossier /config dans lequel on écrira
`<?php<br />
// les images de plus de 2000 pixels de largeur ou de hauteur ne seront pas
enregistrées<br />
define('_IMG_MAX_WIDTH', 2000);<br />
define('_IMG_MAX_HEIGHT', 2000);<br />
<br />
// Et pour éviter de faire planter GD2 :<br />
define('_IMG_GD_MAX_PIXELS', 2000000);`
il ne restera plus qu’à modifier les valeurs selon son souhait
Pour le poids en octets, cela dépend de l’hébergeur mais on peut
écrire dans ce même fichier
`// les images de plus de 350 Ko ne seront pas enregistrées<br />
define('_IMG_MAX_SIZE', 350);`
— Envoyé par SpipFactory.fr (https://spipfactory.fr/)
