Un outil génial pour optimiser les images

Nous savons qu'un des points les plus importants pour optimiser la vitesse de chargement des sites est d'utiliser des images avec le "bon" dimensionnement. Et par dimensionnement on parle à la fois de la taille (inutile de charger une image de 4000 x 3000 pixels pour l'afficher ensuite en 600 px) et du taux de compression de ces images.

Lorsque vous utilisez Photoshop (ou autre), vous pouvez enregistrer vos images "pour le web". Mais parfois vous avez trouvé des photos sur une banque d'images ou bien c'est votre client qui vous en a fourni et elles sont énormes et pas optimisées.

Bien sûr vous pouvez utiliser un plugin pour traiter le sujet une fois les images envoyées sur le site mais c'est encore mieux de les envoyer déjà optimisées.

Un jour où je m'intéressais au sujet, je suis tombée sur un article d'un enseignant qui m'a donné envie d'essayer l'outil dont il parlait (EDIT : j'ai supprimé le lien car son site a manifestement été piraté).

Je l'ai donc téléchargé et installé et c'est d'une telle simplicité qu'il n'y a pas grand-chose à en dire. Quelques images valent mieux que des milliers de mots alors allons-y.

J'ai cherché sur Pixabay une image pour illustrer un article sur le bac à sable d'Oxygen, pour l'exemple (en fait en cherchant une photo pour illustrer cet article je suis tombée sur celle que Philippe a utilisée pour l'article sur le bac à sable et j'ai trouvé ça amusant)... Pour la démonstration je l'ai téléchargée en grand format (5760 x 3840 px) La photo fait plus de 5 Mo.

Une fois RIOT installé sur votre ordinateur vous le lancez puis vous "tirez" tout simplement l'image que vous voulez traiter dans la fenêtre de gauche de l'outil : Déjà vous avez une alerte :

L'outil ayant détecté ces dimensions énormes vous propose de redimensionner votre photo. Là j'ai mis 1200 px en largeur pour pouvoir éventuellement l'utiliser en bandeau et déjà sans autre optimisation le poids de la photo est divisé par 5 :

Maintenant je me demande si en optimisant je peux encore gagner. En faisant varier le curseur "Quality" je me rends compte qu'en le descendant à 60 % je ne vois pas de différence perceptible à l’œil nu et le poids de ma photo a quasiment été divisé par 10 !

Comme beaucoup d'autres outils, RIOT vous propose aussi quelques outils de retouche photo (contraste etc.) :

Bien. Je suis satisfaite, je clique sur la disquette en haut à gauche pour enregistrer. Par défaut il propose d'écraser la photo existante :

Si vous cliquez sur No il ouvre une nouvelle boîte de dialogue qui vous permet de donner un autre nom à la photo optimisée.

Et voilà. Simple non ?

Mais le meilleur est à venir. Le traitement par batch est très simple lui aussi. Vous sélectionnez les n photos que vous voulez optimiser et vous les "tirez" dans la partie gauche de l'outil. Petite alerte :

Après avoir cliqué sur "Yes" l'outil charge les photos et vous propose 4 actions :

Il faut définir un répertoire de sortie. L'outil est malin et vous propose le dernier utilisé. Si vous l'avez supprimé après votre dernière séance de travail il le recrée donc ce n'est pas un souci.

Là j'ai choisi l'action redimensionner sur un lot de photos trop grandes (3072 x 4608 px):

Remarquez l'énorme gain... Pour télécharger RIOT c'est ici. (Par contre désolée mais il semblerait que ça ne fonctionne qu'avec Windows).

Voilà. Personnellement j'utilise cet outil pour tous mes projets depuis que je l'ai découvert et je n'utilise plus de plugin d'optimisation en ligne. Ces plugins sont néanmoins très intéressants lorsque vous donnez la main sur le site à votre client et que du coup vous ne maîtrisez plus la qualité des photos qu'(il va éventuellement y mettre...

D'ailleurs, quels sont vos outils préférés pour l'optimisation online (gratuits / payants) ?