Comment optimiser vos images pour le web

Avec Adobe Photoshop

Nous allons voir dans ce premier tutoriel comment optimiser une image pour le web à l’aide du logiciel Adobe Photoshop, 

En effet, il est indispensable de proposer des images légères pour assurer de bonnes performances à votre site web.

 

Qu’entend-t-on par optimiser une image ?

Nous cherchons à obtenir le meilleur ratio poids / qualité, le but étant d’avoir une image à la fois nette et légère pour accélérer le  temps de chargement depuis votre site internet.

Ceci sera bénéfique pour augmenter la qualité de votre site et le référencement SEO pour les moteurs de recherches mais aussi l’expérience utilisateur.

 

 

Qu’est ce qui joue sur le poids d’une image ?

L’erreur commune sont les images beaucoup trop grandes pour le web, Par exemple, les photos prises avec des caméras digitales font une taille de 5000×7000 px ce qui est beaucoup trop grand pour votre site. La taille en largeur de votre site est au maximum de 1600px

C’est pour cela qu’il faut si possible réduire la taille de l’image avant de la transférer sur votre site.

 

 

À noter que WordPress 4.4 peut supporter à présent des images responsives. Il crée plusieurs tailles des images sur la médiathèque et inclus les tailles disponibles dans un attribut srcset pour que les navigateurs puissent choisir de télécharger la taille la plus approprié

Les navigateurs peuvent choisir maintenant  de télécharger la taille la plus approprié

Quel format choisir pour quel usage ?

Sur le web nous croisons majoritairement trois formats: JPG (JPEG), PNG et WEBP.

Le format : JPG ( JPEG )

Pour vos photos vous pouvez utiliser le format JPG 

Si vous n’avez pas besoin de transparence, vous pouvez utiliser le format JPG.

Le format JPG est un format qui affiche 16.7 millions de couleuurs, il restitue les images complexes comportant des nuances, dégradées. Le chargement des progressif des images est possible

 

Le format : PNG

Pour vos icons, logo, ou toute autre image nécessitant une transparence, vous utiliserez le format PNG c’est un format de compression sans perte qui gère la transparence

Si votre image contient un grands nombres de couleurs ou un tracé noir, vous n’utiliserez pas le même format de PNG

 

  •   le PNG 8 (bits) semblable au GIF (256 couleurs, gestion de la transparence) mais plus léger,
  •   le PNG 24 (bits), similaire au JPEG (16.7 millions de couleurs) mais avec une compression sans perte et un poids de fichier plus élevé.

 

Le format : WEBP

Le format WebP créé par Google sert à conserver une bonne qualité et à réduire de 25% à 30 % le poids de votre image pour optimiser la vitesse de chargement de votre site. Il prend en charge la transparence et l’animation

Comment changer le format en JPG ?

Nous allons utiliser Adobe Photoshop qui a un module d’export optimisé pour le web, une fois correctement réglé le poids de l’image sera considérablement réduit

Pour cela, Allez dans la fenêtre Fichier > Exporter > Pour le web :

Nous réglons la  Qualité sur 60 ce qui permet de garder une qualité correcte. vous êtes libre d’essayer avec vos paramètres.

Cliquez sur optimiser pour utiliser les fonctions d’optimisation de photoshop

Vous pouvez utiliser le mode progressif qui permet d’augmenter la compression de l’image

Le paramètre flou permet d’appliquer un flou à l’image, ce qui améliore encore légèrement le poids de l’image. Cependant au delà d’un certain réglage votre image perdra en netteté.

Nous utilisons un réglage situé entre 0.1 et 0.5

optimisation d'une image

Comment changer le format en PNG ?

Toujours dans la fenêtre Exporter pour le web

PNG-8

Vous pouvez y retrouver plusieurs informations : 
 
  • Dans le menu « algorithme de réduction de couleurs » qui permet de créer une table de couleurs vous pouvez retrouver plusieurs modes. Pour ce tuto, nous utiliserons le mode par défaut qui est le mode sélective qui permet de conserver les couleurs web. 

 

  • Le menu “algorithme de tramage” permet de créer virtuellement des couleurs absentes qui ne sont pas disponibles dans le système d’affichage de votre ordinateur. Vous retrouverez aussi le menu tramage qui permet de modifier l’intensité de tramage, attention pour avoir accès à celui-ci il faut avant choisir un algorithme de tramage.
  • Vous pouvez choisir une valeur comprise entre  2 couleurs (1 bit/pixel) et 256 couleurs (8 bits/pixel) dans le menu “couleurs” qui permet de préciser la profondeur de l’image.

 

  • Il y a aussi l’option de transparence, mais il faut savoir que l’effet de transparence utilise davantage d’espace mémoire et peuvent exprimer uniquement une transparence binaire.

PNG-24

La différence entre le PNG-24 et les autres formats d’images supportés par le web et que celui se comporte comme un support de transparence graduelle.

Son canal Alpha peut recevoir des valeurs entre 0 à 255 selon la valeur de l’opacité.

Il supporte aussi l’entrelacement.

Comment changer le format en WEBP ?

Le format WebP créé par Google sert à conserver une bonne qualité et à réduire de 25% à 30 % le poids de votre image pour optimiser la vitesse de chargement de votre site. Il prend en charge la transparence et l’animation.

Pour pouvoir optimiser vos images WebP vous devrez utiliser un plugin comme WebpFormat qui a pour but de rendre compatible le format Webp avec Photoshop.

 

Github plugin Webp :

https://github.com/webmproject/WebPShop

Une fois le fichier décompresser, il faut se rendre à l’intérieur et s’intéresser au fichier avec l’extension .8bi 

Ouvrez Photoshop est essayer d’ouvrir une image Webp, normalement cela devrait fonctionner.

Samya Baz
Rédactrice