Écrire un article
Tea Innovation




Lors de la création d'un site internet, pour la gestion quotidienne de votre site ou pour un envoi par email, il est indispensable de réduire le poids (Kilo octet) de vos images pour un affichage rapide de la page web. En effet, si l'augmentation du débit du réseau internet a permis un temps d'afficher des images plus grandes et de meilleure qualité, l'arrivée des technologies web mobile, pose de nouveau la question d'une bonne optimisation des images. Votre image finale devra avoir un poids max de 150 Ko, mais en suivant ce tutoriel vous pourrez réduire certaines de vos images à quelques octets !

 

 

 

1 - Dimensions de l'image et poids

Le poids de l'image dépend en grande partie de ses dimensions (largeur x hauteur). Recadrez donc l'image pour ne garder que les éléments vraiment utiles et redimensionnez l'image !

 

 

2 - Optimiser une photo

Le format le plus adapté aux photos est le jpg. Le rendu des aplats de couleurs et des textes pourra être médiocre. Le jpg peut être compressé pour être allégé. Le taux de compression est généralement exprimé en %. Voyons avec cette photo de Buzz Aldrin :

Exemple de compression jpg


La compression suit cette courbe :

Courbe du poids du jpg en fonction de la compression


La qualité perçue étant proportionnelle au taux de compression on peut retenir de cette courbe 2 principes :
- Pour avoir une belle image il n'est pas utile de garder une compression à 100%. À 85% on divise le poids par 2 avec une bonne qualité visuelle !
- Compresser vos images en dessous de 40% vous apporteras un gain de poids quasi nul pour une qualité très médiocre.

En résumé, dans la plupart des cas compressez vos photos entre 95% et 40%.

 

 

3 - Optimiser une image avec des aplats de couleur

Le format le plus adapté aux aplats est le png en couleurs indexées (aussi appelé png-8) :

Exemple de png en couleurs indexées


Ce format est très bien adapté aux logos, aux icônes et parfois aux petites photos. Il rend très mal les dégradés.

Comparatif du jpg et du png indexé sur un logo

Comparaison du jpg et du png indexé sur un logo

 

 

4 - Optimiser une image avec un fond transparent

Une image translucide ou avec des parties transparentes est intéressantes pour des effets de superposition.
Pour garder la transparence (canal alpha) le png classique (aussi appelé png-24) est le plus adapté. Il n'est pas vraiment optimisable et reste très lourd en général. On l'utilisera donc de préférence pour des petites images.

Le png indexé peut aussi être utilisé mais propose uniquement une transparence tout ou rien.

 

 

5 - Tutoriel

Niveau requis :
Photoshop niveau basique
ou
Gimp niveau basique (logiciel gratuit Open Source)

Avec Photoshop

Alors là c'est facile, pour une fois l'interface est plutôt bien faîte pour un produit Adobe !

Capture d'écran du module enregistrer pour le web de Photoshop

1- Ouvrir votre image (vous pouvez faire un glissé déposé)
2- Cliquez sur Fichier > Enregistrer pour le web
3- Vous pouvez tester tous les paramètres et comparer jpg et png. Le poids de l'image finale est affiché en bas à gauche. Vous pouvez également modifier les dimensions de l'image.
4- Cliquez sur Enregistre


Avec Gimp

Redimensionner :
1- Glisser-déposer une image dans Gimp
2- image > échelle et taille des images
3- Largeur
4- Échelle

Enregistrer un jpg :
1- fichier > exporter (enregistrer sous sur les anciennes versions de Gimp)
2- nomdufichier.jpg
3- Taper entrée
4- Déplacer le curseur de qualité (compression)
5- Vous pouvez utiliser Afficher dans la fenêtre d'image et options avancés
6- Taper entrée

Enregistrer un png indexé :
1- image > mode > couleur indexé (régler le nombre de couleurs)
Pour faire une modification par la suite sur l'image, repassez en mode RVB
2- fichier > exporter (enregistrer sous sur les anciennes versions de Gimp)
3- nomdufichier.png
4- Taper entrée
5- Décocher toutes les options
6- Taper entrée

 

 

6 - Pour aller plus loin

Fichiers vectoriels

Le format svg est désormais supporté par la plupart des navigateurs (sauf IE 8, ha, ha !). Idéal pour les grandes images en aplats. Si Illustrator fait aussi du svg, le logiciel rêvé pour faire du dessin vectoriel est Inkscape (gratuit, open source).

Une nouvelle mode, un peut compliqué selon moi, consiste à placer ses icônes dans une font. On obtient ainsi des fichiers vectoriels compatibles avec tous les navigateurs via @font-face.

Flou jpg

Si vous aimez le brouillard, le paramètre flou permet de réduire considérablement le poids de l'image.



Jpg avec différentes zones de compression

Ce Saint-Graal de la compression jpg, serait possible avec les vielles versions de Photoshop ou le logiciel payant Jpeg Wizard.

Un grand Jpg

Parfois un grand jpg très compressé et redimensionné par le navigateur sera bien moins lourd qu'un jpg peu compressé à l'échelle originale.

À l'inverse, il est possible d'agrandir une petite image avec le navigateur, pour la mettre en plein écran par exemple.



Trame CSS

Une trame de pixels blancs en png sur l'image jpg permet de camoufler une grosse compression.

Sites web

Certains sites internet comme Facebook redimensionnent et compressent automatiquement vos images. Pensez donc à leur envoyer des images pas trop compressées pour garder une bonne qualité !

 

 

Auteur : Nicolas Barré



retour au blog

Commentaires  

ID booster 11-05-2016 12:30
Ces instructions sont absolument valables dans le cas où on traite des images numériques, sinon le calage des images argentiques passées aux numérisations nécessitent d’autres traitements spécifiques ! En effet, la qualité de pixellisation varie selon le traitement effectué sur l’image scannée.
Signaler à l’administrateur

Posez votre question !

Code de sécurité