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 : ​

Quelques ressources libres

Images et polices

Last updated