Optimiser automatiquement ses images jpg depuis son serveur web

Yeah!

Mon premier post technique voit enfin le jouuuurrr!!! Depuis le temps que devais m’y mettre. C’est maintenant chose faite 😛

Alors voilà, j’te fais le topo. Je suis fan de tout ce qui touche au temps de chargement. J’trouve que c’est un sujet hyper passionnant. Car plus on se rapproche de temps faibles (en dessous de 300ms, ça commence à être chaud), plus la tâche devient difficile et stimulante. Même qu’au delà de certains seuils, plus rien n’est acquis. Du coup la seule chose qu’il reste à faire c’est de se former, réfléchir et innover. J’adore!

Comme le titre l’indique, ici je vais te montrer comment mettre en place une optimisation automatique des images au format .jpg pour ton site web depuis le serveur qui l’héberge (sous entendu, faut que ce soit un serveur linux). De manière à ce qu’on ne s’en soucie plus vraiment et qu’on soit plus souples sur les images qu’on veut uploader.

Let’s go, c’est parti!

Faisons un premier constat

En premier lieu nous allons générer un simple test sur google page speed insight pour voir ce qu’il nous dit sur les images. Si tu n’as rien fait de particulier avant, je parie qu’il va tilter dessus.

Voici ce que ça donne chez moi :

Rapport de Google Page Speed Insight avant l'optimisation des images

Bingo! Ce rapport me conseille de diffuser les images aux formats de nouvelle génération et me liste en dessous un échantillon des fichiers concernés. En gros, ce que Google veut me dire par là, c’est qu’il va falloir que j’applique à mes images au moins ces deux traitements :

  1. Optimiser leur poids sans en détériorer la qualité
  2. Transformer les images en images dites « progressives »

Qu’est ce qu’une image progressive?

Pour faire simple, un JPEG normal sera visible sur la page une fois que le navigateur l’aura chargé en entier. Tandis qu’un JPEG progressif s’affichera… progressivement 😁. Au départ l’image sera floue, puis au fur et à mesure de son chargement elle deviendra plus nette. Cela rend la navigation plus fluide.

Voyons de quoi je vais avoir besoin

Alors, déjà je vais avoir besoin des outils suivants :

  • Pour la compression des fichiers .jpg, je vais utiliser jpegoptim
  • Et exiftool pour le taggage des fichiers déjà compressés

Ces deux softs sont disponibles sur les repo officiels d’ubuntu. Pour les installer sur ton serveur, rien de plus simple. Un p’tit apt-get install et pouf!

sudo apt-get install jpegoptim exiftool

Ensuite je vais devoir développer un script bash que je sauvegarderai à la racine de mon projet et que je vais appeler optimize-images.sh.

C’est depuis ce script que seront lancées les commandes de compression. Et aussi, je rajouterai au script une petite logique intéressante.

Pour finir, je vais devoir mettre en place un cron job pour que l’optimisation des nouvelles images s’exécute automatiquement au moins une fois par jour.

Création du script bash

Aaaahhh ce script. J’ai passé deux jours entiers à pondre ce petit bout de code. On a vécu tellement choses ensemble en si peu de temps (j’en ai surtout chié à trouver les bonnes formules ouai!) que j’en ressens presque de l’amour ❤️ .

Tiens, c’est cadeau 😉

#!/bin/bash
for f in $(exiftool -p '$directory/$filename' -r -q -q -if '(not $comment) or ($comment ne "optimized") and ($filetype eq "JPEG")' ./wp-content/uploads); 
do
	optimized=false
	filename=$(basename -- "$f")
	extension="${filename##*.}"
	if [[ "$extension" == "jpg" || "$extension" == "jpeg" ]]; then
		jpegoptim --all-progressive --max=70 "${f}" > /dev/null 2>&1
		optimized=true
	fi
	if [ "$optimized" == true ] ; then
    	exiftool -overwrite_original -comment="optimized" "${f}" > /dev/null 2>&1
		echo "$(date +'[%Y-%m-%d %H:%M:%S]') ${f}"
	fi
done

Identifier les fichiers déjà traités par le script

Ici réside une astuce. Comme le script s’exécutera de manière régulière, il ne doit traiter que les images non optimisées. J’ai donc besoin d’identifier ces images.

Pour ça je vais tout simplement exploiter les données EXIF des images. EXIF est un ensemble de metadatas techniques présentes par défaut dans le corps d’un fichier image. Dedans on y retrouve par exemple la date, la taille, le poids et tout plein d’autres informations techniques.

Et c’est là que la magie opère!

Grâce à exiftool (un des softs évoqués plus haut) je peux justement lire et écrire dans ces metadatas. Je vais donc pouvoir utiliser le champs « comment » (destiné aux commentaires techniques) et y injecter la valeur « optimized » à chaque fois qu’un fichier est optimisé par le script.

De cette manière, à chaque lancement, le script ne traitera que les images qui ne contiendront pas ce tag. 🙂

Voyons ce que ça donne

Ok, je vais de ce pas exécuter ce script d’optimisation sur mon serveur. Puis on regarde le résultat. Juste pour garder une sécurité, je vais faire avant un backup des images dans un autre répertoire.

cp -R ./uploads ./uploads-bck #Création du backup
./optimize-images.sh #Exécution du script

Verdict…

Zone des opportunités dans le rapport Google Page Speed Insight après optimisation des images

It’s aaaaaallll riiiight!!!

Pour Google la tâche est validée. Elle ne figure plus dans la rubrique « Opportunités ». Elle se trouve désormais dans la rubrique « Audits réussis ».

Zone des audits réussis dans le rapport Google Page Speed Insight après optimisation des images

Il nous reste un dernier point : l’automatisation

J’te rassure, on a fait le plus dur. Maintenant nous n’avons plus qu’à rajouter une tâche cron pour programmer l’exécution du script chaque jour à minuit.

Donc dans un premier temps on va entrer dans le fichier des crons avec l’utilisateur apache (www-data) pour que quand il écrase les images d’origine par les images optimisées, elles puissent grader le même owner.

crontab -e -u www-data

Ensuite il n’y a plus qu’à ajouter la tâche. Et pour garder une trace de chaque exécution, on va diriger les messages de sorties dans un fichier de log.

0 0 * * * /var/www/dev.pizza/optimize-image.sh >> /var/log/crons/dev.pizza/optimize-image.log 2>&1

Voilà!

Si cet article t’as intéressé, n’hésites pas à le tester dans tes projets. Normalement ça ne devrait pas de prendre plus de quelques minutes!

Avec ça tes utilisateurs seront contents, Google sera content, toi tu seras content et moi aussi du coup 😀.

Laisser un commentaire