Traitement et optimisation des images
Accessibilité
Il est important de toujours renseigner le texte "alternatif" (titre + descriptif de l'image) lors de l'ajout d'une image sur le site. Il n'aide pas seulement les personnes malvoyantes qui utilisent un lecteur d'Ă©cran, il peut aider les gens Ă comprendre le contexte de l'image, Ă fournir un emplacement pour une image manquante ou Ă charger une image sur une connexion internet lente.
En savoir plus : https://alttexthalloffame.org/
La taille des images
Les images du site Ritimo doivent avoir comme taille 1140 pixels x 760 (1)
Citations : courte mettre entre guillemets et en ital ; longues utiliser l'outil spip
Lorsqu'elles sont plus grandes, il faut les réduire
Lorsqu'elles sont plus petites, on n'y touche pas (ne jamais agrandir une image : on perd en qualité)
Provenance : pour le type de doc "campagnes" : ne rien mettre.
L'image de la Une 1 doit être au format : 1400 x 733 (ou, si l'image est plus petite, dans ces proportions impérativement). Le poids de l'image doit être inférieur à 70 ko dans la mesure du possible, d'où la nécessité d'optimiser les images. Pour compresser les images, compresseur en ligne : https://imagecompressor.com/fr/
Les différents formats d'image
Citations : italiques entre guillemets.
GIF = interdit pour le site car s'utilise uniquement pour des images animées (qui bougent)
JPEG = à utiliser pour les photos. Lorsque les images en JPEG sont compressées, il y a une perte d'information
PNG = à utiliser pour les « aplats », images avec peu de dégradés, comme les dessins, les schémas, les cartes. A la compression, il n'y a pas de perte d'information. Il ne faut pas les redimensionner car il y a perte de qualité de l'image.
Webp = à utiliser pour le web, bonne compression (mais problèmes de sécurité).
Traiter une image avec GIMP (JPEG)
Auteurs personnes physiques : Ă mettre toujours !
Ouvrir l'image JPEG. Pour diminuer la taille de l'image :
Menu image > Choix Echelle et taille de l'image
SĂ©lectionner la largeur (maximum) 1140 pixels
Menu fichier > Choix Exporter comme > Choisir l'extension JPEG puis afficher l'aperçu : la qualité de l'image détermine le poids : changer la qualité (en%)
SĂ©lectionner Exporter
(Pour couper une image : Menu Outil > outils de transformation > découpage)
Optimiser une image (jpeg ou png)
Avec GIMP :
Menu Image > Mode Couleur indexée > Convertir Utiliser des utilitaires : Trimage pour linux (pour supprimer les métadonnées, à utiliser en dernier, donc. Remarques :GIMP optimise mieux que photoshop car il supprime les métadonnées. Ne pas toucher la résolution de l'image quelque soit sa valeur, cela ne sert à rien (c'est pour les impressions papier).Kb = KoBytes n'est pas = à bits https://css-ig.net/articles/optimiser-images-web.php
En savoir plus
Tour d'horizon des images libres (et pas libres), linuxfr.org, le 22/02/21. Pour illustrer un site web, une plaquette, une dépêche, une app… nous recherchons bien souvent des images. Et comme sur LinuxFr.org, nous respectons toujours le droit d’auteur, nous exigeons, tous, des images libres. Mais où les trouver ? Il y a-t-il des pièges ? Peut-on faire confiance aux banques d’images ? Cette dépêche décortique les licences et conditions d’utilisation de 24 banques d’images, la plus exhaustive étude au monde !
OĂą chercher des images libres de droit / en creative commons ?
flickr : https://www.flickr.com
cc search : https://search.creativecommons.org/
Wikimedia Commons : https://commons.wikimedia.org/wiki/Main_Page?uselang=fr
pixabay : https://pixabay.com/
photopin : http://photopin.com/
Unsplash : https://unsplash.com
Recherche avancée d'images google : https://www.google.fr/advanced_image_search
Les supports issus de la formation de Dimitri Robert : ​
Présentation sur les notions en infographie : http://formation-logiciel-libre.com/wp-content/uploads/2018/07/notions_essentielles_en_infographie-vect.svg
Support de cours GIMP : http://ma.formation-logiciel-libre.com/gimp/
Support de cours Scribus : http://ma.formation-logiciel-libre.com/scribus/
Tutoriels de détourage : https://formation-logiciel-libre.com/?s=détourage
Télécharger GIMP : https://www.gimp.org/downloads/
Quelques ressources libres
Images et polices
Polices libres : https://www.fontsquirrel.com/
Last updated