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

👉 A savoir : La largeur maximum de l'affichage des images sur le site est de 570 à 770, on calcule la taille de l'image en tenant compte du ratio de l'image = 2 (qui permet d'afficher une bonne qualité)

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