Optimiser ses images pour réduire leur poids (jpeg, png, svg)

On vous demandera souvent d’optimiser vos images, que ce soit pour votre site internet ou pour vos projets de développement.

Le fait d’optimiser ses images en réduisant leur taille n’altère pas forcément la qualité (ou parfois peu), mais a de réels avantages :

• meilleur référencement (le poids des images est un critère dans l’algorithme de Google)
• chargement plus rapide des vos pages

Je vous conseille réellement d’avoir des images compressés sur vos serveurs en production ; bien que ce soit un peu chiant à mettre à place, voici comment vous pouvez rendre ça facile et efficace.

Les images JPG/JPEG sont la plupart du temps plus légères

Les fichiers SVG sont parfaits pour les icônes.

Les fichiers GIF ok pour les animations si pas remplaçable par SVG + CSS.

Les fichiers PNG sont ok si on veut de la transparence.

Les fichiers JPEG/JPG sont généralement plus légers que ceux en JPEG, pour preuve.

du -hs netflix-ajouts-recents.*
2,1M netflix-ajouts-recents.jpeg
11M netflix-ajouts-recents.png

N’hésitez donc pas à convertir vos fichiers PNG !

Installation des logiciels nécessaires pour optimiser ses images sur internet

Je vais partir du principe que vous êtes sous Linux (ou du moins que votre serveur de production l’est).

Sous Debian / Ubuntu

apt-get install --no-install-recommends jpegoptim optipng

Sous Centos 7

yum -y install jpegoptim optipng

Concernant l’optimisation des SVGs (si vous en avez) :

npm install -g svgo

Cliquez ici si vous n’avez pas NodeJS / npm d’installé

Optimiser toutes les images d’un répertoire

Le script suivant vous permettra d’optimiser les images au format : jpeg, jpg, png et svg du répertoire /var/www.

#!/bin/bash

HTTP_PATH='/var/www'

find "${HTTP_PATH}" -regex '\(.*jpeg\|.*.jpg\)' -exec jpegoptim -m90 --strip-all {} \;
find "${HTTP_PATH}" -iname "*.png" -exec optipng -o7 -strip all {} \; 
find "${HTTP_PATH}" -iname "*.svg" -exec svgo {} \;

chown -R httpd:httpd /var/www
chmod -R 755 /var/www

Attention ! La commande « optipng » est plus longue que les autres. En effet le logiciel calcule les différents ratio de RGB dans l’image et choisi le modèle le plus adapté à l’image.

Je vous recommande donc de lancer ce script dans un émulateur virtuel tmux ou screen, ce qui vous permettra de quitter votre session SSH sans pour autant tuer le processus qui exécute le script (car toute commande lancé dans une session SSH se ferme avec ladite connexion).

Optimiser automatiquement les images de son serveur web

Là où est l’astuce, c’est que vous pouvez automatiser la compression de vos images automatiquement !

Le script donné plus haut, il vous suffira de l’exécuter une fois par semaine, ainsi vous n’aurez pas à relancer l’optimisation à chaque upload d’images.

nano /etc/crontab

Ajoutez–y cette ligne avec le chemin de votre script

0 0 * * 7 root bash /opt/img-optimizer.sh

On ne laisse que « root » lancer, lire et modifier le script.

chmod 700 /opt/img-optimizer.sh

Et voilà ! Toutes vos images seront automatiquement optimisées.

Un plugin pour WordPress ?

J’utilise également sur le site ‘WP-Smush‘, qui me permet d’optimiser encore un peu plus mes images même après compression avec les logiciels utilisés plus haut.