Menu
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.
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.
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é
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 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
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
Comment changer le format en PNG ?
Toujours dans la fenêtre Exporter pour le web
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.
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.
