Optimiser des images pour le web avec gnu linux

De Analyse Développement Hacking
Sauter à la navigation Sauter à la recherche

Glider.png

Le wiki : Accueil - Administrateur - Bureautique - Développeur - Intégrateur - Marketing - Multimédia - Objets numériques - Jeux - We make Hack

Le site : Accueil - Annuaire - Blog - Forum - Outils - Utilisateur
Le FTP : Consulter les fichiers partagés sur le FTP
Le Redmine : Consulter le Redmine

Optimiser des images pour le web avec gnu linux

Choisir le bon format

JPG - Format compressé, donc moins lourd. Le JPG est le format préconisé pour le web.
PNG - Moins léger que le JPG, ce format a l'avantage de gérer la transparence. Il est souvent utilisé pour les logos.
GIF - Permet de gérer des animations image par image. Pour une image statique, on privilégiera le JPG ou le PNG.
Utiliser le JPG est intéressant pour le poids de chargement du site, sauf dans les deux cas suivants :
Votre image doit gérer la transparence. Utiliser alors le PNG.
Votre image doit être animée. Utiliser alors le GIF.

Optimiser des images PNG

pngquant average reduction / quality: 63.91% / 8.5
pngcrush average reduction / quality: 4.75% / 9.88
optipng average reduction / quality: 13.48% / 9.88
pngnq average reduction / quality: 63.93% / 6.62
pngquant et pngnq ont le meilleur taux de réduction (63.91% et 63.93%)
optipng and pngcrush ont la meilleur qualité après compression.
Je retiens pngnq pour compresser les images avec un poids minimum.
Je retiens optipng pour compresser les images avec une qualité maximum.
pngnq + optipng semble donner les meilleurs résultats qu'il soit possible d'obtenir.
En fait, c'est pngcrush qui conserve une meilleur qualité, mais, la compression de 4,75 % est peut être un peu faible.
optipng avec 13,48 % de compression est déjà plus intéressant pour des images de qualité pour le web.
pngnq et optipng préservent la transparence des fichiers PNG.

Installer les 2 logiciels

sudo apt-get install pngnq optipng

Compresser une image PNG au maximum

pngnq -vf -s1 image.png
En sortie, l'image optimisée est nommée image-nq8.png
-vf demande à pngnq d'afficher ce qu'il est en train de faire, et d'écraser le fichier s'il existe déjà.
-s1 demande à pngnq de faire l'optimisation maximum (par défaut, c'est -s3)

Compresser une image PNG en gardant sa qualité

Simuler l’optimisation.
optipng -simulate *.png
Vérifier les résultats.
On lance l’optimisation :
optipng image.png
optipng -o7 image.png
-o7 demande à optipng de faire un maximum de tests avec des combinaisons différentes.
Pour optimiser tous les PNG de manière récursive (sous-répertoires compris) :
find -type f -name "*.png" -exec optipng {} \;

Traitement de fichiers par lot

pngnq -vf -s1 *.png
optipng -o7 *-nq8.png
Les fichiers optimisés porteront le nom "Leur-Nom-nq8.png"
Le script suivant optimise automatiquement tous les fichiers png du répertoire courant (sans que vous ayez à renommer les xxx-nq8.png en xxx.png à la fin.).
Il n'est pas recommandé de passer plusieurs fois ce script sur un même png, car pngnq dégrade à chaque fois la qualité d'image. 
#!/bin/bash
pngnq -vf -s1 *.png  
rename -f 's/-nq8.png$/.png/' *.png  
optipng -o7 *.png

Optimiser des images JPG/JPEG

Installer jpegoptim :
sudo apt-get install jpegoptim
Utiliser jpegoptim et optimiser une image :
jpegoptim monimage.jpeg
Par défaut, une compression de 1.75% est effectuée sur cette image.
Paramétrer la puissance de la compression avec l’option “-m” suivi d’un nombre de 1 à 100.
1 donnera une image très légère, mais avec une qualité très médiocre alors que 100 donnera une compression de qualité.
80 est un bon compromis entre légèreté et qualité de l’image :
jpegoptim monimage.jpeg -m 80
jpegoptim -n -t *.jpg
-n permet de simuler l’optimisation.
-t permet de calculer l’espace gagné
Résultat : Average compression (2730 files): 0.95% (452k)

Lancer l'optimisation des images progressives, sur un dossier complet

# --all-progressive permet de créer des fichiers JPG progressifs, qui se chargent progressivement.
jpegoptim -t --all-progressive --strip-all *.jpg
Ajouter le taux de compression avec -m 80
Sans avoir renseigné le taux de compression, l'optimisation se fait sans perte.
Optimiser les JPEG de façon récursive (sous-répertoires compris) :
find -type f -name "*.jpg" -exec jpegoptim -t --all-progressive --strip-all {} \;

Installer imagemagick package sous Debian Jessie

Imagemagick permet de compresser également, change de format de l'image, et peut créer des gifs animés.
apt-get install imagemagick
Package information
name 	imagemagick
distro 	Debian Jessie
repository 	Main
version 	6.8.9.9-5
ImageMagick ne s'ouvre pas depuis le menu.
Utiliser ImageMagick avec un clic droit sur une photo, ouvrir avec, utiliser ImageMagick.
J'ai facilement trouvé comment redimensionner la taille d'une image, mais, pas son poids.
Comment redimensionner le poids d'une image avec ImageMagick ?

Redimensionner une image en ligne de commande avec ImageMagick

convert entree.jpg -resize 800x600 -strip -quality 50 -interlace line sortie.jpg
ImageMagick en ligne de commandes : http://www.tux-planet.fr/imagemagick-manipuler-des-images-en-ligne-de-commande/
Source complémentaire : https://www.commentcamarche.net/faq/6120-imagemagick-manipuler-les-images-en-ligne-de-commande

Conseils pour un site internet

Utiliser des images libres de droit.
Privilégier le format JPEG sauf pour les logos avec fond transparent (png).
Retailler les images au bon format pour votre thème avant de les uploader.
Nommer le fichier des images de façon qu'il soit lisible par un être humain.
Compresser la taille des images manuellement ou avec une extension.
Renseigner le texte alternatif et le titre de vos images.
Vérifier que vos images sont bien incluses dans votre sitemap.
Paramétrer le partage des images sur les réseaux sociaux.

Bibliographie

Tatouage numérique d'une image : https://www.imagemagick.org/Usage/annotating/#wmark_text

NAVIGATION

PARTICIPER ET PARTAGER

Bienvenue sur le wiki de Vision du Web.
De nombreuses pages sont partagées sur ce wiki.
Créer un compte utilisateur pour participer sur le wiki.
Les pages présentées sur le wiki évoluent tous les jours.
Certaines recherches sont peu abouties et incluent des erreurs.
Utiliser la recherche interne du wiki pour trouver votre contenu.
La page de discussion de VisionDuWeb vous permet de poser une question.
Utiliser la recherche interne du site pour chercher dans tout le contenu.
Ce contenu ne doit pas servir à nuire à autrui ou à un système informatique.
Protéger votre système Linux ou Windows en lisant la page dédié à la sécurité.
Améliorer le contenu des pages avec vos propositions depuis l'onglet discussion.

SOUTENIR CE WIKI

Soutenir le wiki avec un don en monnaie numérique :
AEON - Bitcoins - Bitcoins Cash - Bitcoins Gold - Bitcore - Blackcoins - Basic Attention Token - Bytecoins - Clams - Dash - Monero - Dogecoins - Ğ1 - Ethereum - Ethereum Classique - Litecoins - Potcoins - Solarcoins - Zcash

OBTENIR DE LA MONNAIE NUMERIQUE

Obtenir gratuitement de la monnaie numérique :
Gagner des Altcoins - Miner des Altcoins.