Escaliens de SpipFactory, vous allez devoir travailler en amont sur vos médias afin de pouvoir les utiliser sur votre site. Sachez que par ce geste vous garantissez :
- un volume-disk faible avec un coût moindre pour l’association, donc pour vous.
- vous allez offrir la meilleure qualité et vitesse d’affichage à vos utilisateurs.
Ce qui suit indique les formats d’image à éviter sur SpipFactory en raison de leur compatibilité faible ou de l’existence de meilleurs formats.
- BMP sont assez volumineuses et ne se prêtent que sous certaines conditions à un emploi dans une page Web
- ICO (Microsoft Windows icon) a été conçu par Microsoft pour les icônes de bureau des systèmes Windows.
- TIFF standard pour les photos haute résolution et les données d’impression
Info : Léon notre script de surveillance qui balaye le serveur régulièrement, interdit l’usage des formats "TIFF" & "BMP" sur la plateforme.
Les formats moins récents comme PNG, JPEG, GIF possèdent de moins bonnes performances que des formats comme WebP et AVIF mais bénéficient d’une compatibilité navigateur plus large.
Ajouter une image, mais 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 : Écran, 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 :
- Édité avec un éditeur de texte de type Notepad++ car c’est du XML,
- Stylé grâce au CSS,
- Manipulé via JavaScript.
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 couleurs |
Gestion des animations
Pas de pixellisation Gestion de la transparence |
Pas de pixellisation
16 millions de couleurs Gestion de la transparence, même partielle |
Léger
Pas de pixellisation Gestion de la transparence Possibilité de choisir le nombre de couleurs indexées |
Lé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 Pixellisation |
Limité à 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 |
| 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 |
SpipFactory préconise le formats d’image WebP [1]
qui proposent souvent une meilleure compression que PNG et JPEG. Par conséquent, les téléchargements sont plus rapides et la consommation de données est réduite.
WebP
est un format d’image matricielle développé et mis à disposition du public par Google. Il exploite un algorithme de compression avec pertes
- Spécifications du WebP :
- Métadonnées EXIF
- Profil de couleur ICC
- Transparence (canal alpha)
- Possibilité d’animations (à la manière des GIF)
- Option de compression sans perte de qualité avec le format WebP Lossless
Résumons tout ça
AVIF, WebP, JPEG et PNG : quelle est la différence ?
Le format d’image AV1 n’existe que depuis trois ans, contrairement au WebP, qui existe depuis 11 ans, au PNG depuis 24 ans et au JPEG depuis 29 ans
La principale différence entre ces formats d’image est le rapport entre la qualité de l’image et la taille du fichier compressé. AVIF, le format d’image récemment développé, présente un meilleur rapport entre la qualité de l’image et la taille du fichier compressé, car il permet d’améliorer le format d’image existant.
Par exemple, si vous avez une image au format PNG avec une taille de fichier de 1,25 Mo. Si vous convertissez cette image en JPEG tout en conservant une bonne qualité d’image, la taille du fichier sera réduite à 76,62 Ko, soit 94 % de moins par rapport au fichier d’origine.
En prenant la même image et en la transformant en WebP, vous aurez une taille de fichier de 37,51 Ko, soit 97 % de moins que celle du fichier original en PNG. Mais si vous décidez de convertir cette même image au format AV1, la taille du fichier sera réduite à 16,86 Ko, soit 99 % de moins du fichier original de bonne qualité.
Notez que le résultat de la conversion de n’importe quelle image d’une taille de fichier de 1,25 Mo au format PNG peut être différent de l’exemple que j’ai utilisé ci-dessus. Il s’agit simplement du résultat que j’ai obtenu lors de la conversion d’une image personnelle.
Super, je me lance mais je suis pas informaticien moi !
SpipFactory vous propose d’utiliser :
- en ligne : https://squoosh.app/
Le site Squoosh permet de convertir des images dans tous les formats communs, mais a l’inconvénient de traiter une image à la fois.
- sur votre Pc : https://www.xnview.com/fr/
Qu’est-ce que Xnview ?
Mettre en ligne des photos directement sorties de l’appareil, soit 4 ou 5 Mo pour chaque image, n’est vraiment pas une bonne idée... lenteur et encombrement garantis. Alors, redimensionner les images une par une ? Non, on va réduire la taille d’un lot d’images en une seule fois !
Avec l’application photos XnView MP/Classic, vous pouvez facilement ouvrir et modifier vos fichiers photo.
Cet outil prend en charge de nombreux formats d’image (JPEG, TIFF, PNG, GIF, WEBP, PSD, JPEG2000, OpenEXR, appareil photo RAW, HEIC, PDF, DNG, CR2).
En tant que visualiseur d’images, vous disposez de fonctionnalités telles que le réglage des couleurs, le redimensionnement, le recadrage, la capture d’écran et l’édition des métadonnées (IPTC, XMP). Grâce à son interface de type explorateur facile à utiliser, XnView MP vous permet de visualiser vos photos et images, ainsi que de les gérer. De plus, vous pouvez créer des planches de contact, des diaporamas, un outil de recherche d’images en double, un convertisseur par lots et une conversion par lots.
XnView est une excellente alternative à la visionneuse de photos Windows, mais il est également disponible sur Linux et macOS.
XnView prend en charge AVIF & webP
Comment faire ?
Un peu d’organisation... Le plus simple est de regrouper les images à réduire dans un dossier et d’en créer un autre qui accueillera les images réduites.
Ensuite on sélectionne les images dans XnView et on fait une conversion par lot. On ajoute l’action de redimensionnement.
Comment choisir la dimension finale ?
Question fréquente et à laquelle il est difficile de répondre... Quelques repères :
- une image d’illustration sur une page web a rarement besoin de dépasser 300 à 500 pixels pour sa plus grande dimension, on peut avoir besoin de 800-900 pixels pour un grand schéma. Dépasser 800-900 pixels n’a pas beaucoup d’intérêt car l’image sera redimensionnée par le système de publication pour tenir dans le cadre dans lequel elle sera insérée ou bien elle va vite dépasser la largeur de la fenêtre et obliger l’internaute à scroller vers la droite ;
- pour le partage de photos, 1000-1500 pixels est en général suffisant.
Redimensionner et réduire ?
Diviser les dimensions d’une image par deux c’est réduire son poids de fichier par 4, et on peut souvent régler la compression, finalement le gain est énorme.
Mais ce n’est pas tout, on peut aussi jouer sur les formats et les couleurs. Par exemple, des dessins ou des images ont rarement besoin de 16 millions de couleurs... cette appli utilise des png de 150 pixels environ. Leur poids est de 30 à 40 ko, c’est beaucoup. Au lieu du redimensionnement, on peut paramétrer l’action « Modifier le nombre de couleurs » dans la catégorie « Image ». En utilisant la prévisualisation, on choisit « 32 couleurs », ce qui change peu le résultat à l’œil.
A noter :
- Escal empêche le téléversement d’image de plus de 2000 pixels de largeur ou de hauteur
C’est un fait, la simple présence d’un média (photo, vidéo ou infographie le plus souvent) au sein d’un contenu permet de doper sa visibilité mais aussi le trafic qu’il génère en plus de le rendre plus agréable à lire, mais ce sont également les médias qui font grossir le répertoire /IMG et donc votre quota disk.
Quant au répertoire IMG/ il contient l’ensemble des documents éditoriaux ajoutés par les rédacteurs du site, classés (par défaut) par extension dans des sous-répertoires.
Allez plus loin avec vos Images