Optimiser ses images pour le web


Pourquoi optimiser ses images ? Lorsque vos visiteurs arrivent sur votre site, la page se charge plus ou moins vite. Comme vous le savez, une page longue à charger est frustrante, et nous pousse à quitter la page. Donc si vous voulez garder du traffic pour votre site, il faudra penser à optimiser vos images. Le petit bonus, c’est qu’en plus de conserver votre traffic, vous pourrez en attirer du nouveau grâce à vos images ! Eh oui, alors n’attendez plus pour les optimiser ! 
Et joyeux Halloween !

 

Le poids

Une image se charge plus ou moins vite en fonction de son poids. L’optimisation majeure vise donc à alléger vos images, pour les afficher plus vite. 

La connaissance principale à mémoriser est que le poids s’exprime en octets, où 1 000 Ko = 1 Mo. Vos images s’exprimeront en Ko une fois optimisées (quelques dizaines de Ko pour une image simple). Les images les plus grandes et complexes pèseront forcément plus lourd et peuvent s’exprimer en Mo. 

Voici maintenant les différents facteurs à optimiser pour limiter le poids :

 

La résolution

Premier point à aborder : la résolution. Que les choses soient claires, changer la résolution de votre image ne changera strictement rien pour le web ! Une croyance populaire veut que la norme pour la résolution d’une image soit de 72 dpi. Cette croyance date des écrans cathodiques où la résolution était en effet de 72 dpi. 
Mais les temps ont changé, il existe désormais une multitude d’écrans de résolutions différentes, souvent supérieures à 100 dpi. Pour vos images, cela n’a aucune importance. Que votre image soit à 1 dpi ou à 3000 dpi, vous ne constaterez aucune différence ! Pour les plus sceptiques, essayez ! 

Alors à quoi elle sert cette résolution ? 

Elle a une utilité pour l’impression. Plus votre image a une résolution élevée, plus l’image sera imprimée petite mais précise. Pour vos images web, la résolution n’a donc aucun effet. Alors comme elle n’alourdit pas votre image, autant en profitez et mettre une valeur élevée. Mais comme je le répète cela ne changera pas l’aspect visuel de votre image. C’est juste pour le style. 

 

Le format

Première chose à bien choisir pour son image : son format ! Vous pouvez le voir grâce à l’extension de l’image (ex: « image.jpg » = votre image est au format JPG). C’est la première étape à réussir pour ne pas alourdir son image inutilement. 

JPEG

Le format JPG ou JPEG est le plus courant pour les photos. Avec ses 16,7 millions de couleurs, il offre un bon compromis entre qualité et poids. C’est donc le format qu’on utilisera le plus fréquemment pour un site web, notamment pour illustrer un article.

PNG

L’atout du PNG est qu’il gère la transparence et donne un aspect plus net et sans perte. Il faut l’utiliser si vous avez besoin de transparence, car le JPEG ne la gère pas. A utiliser également pour un logo, un dessin, un graphique, une icône. Aussi si vous intégrez du texte dans votre image ! En JPEG vous aurez un texte avec un aspect plus flou… Dans tous les autres cas, préférez le JPEG, il sera nettement plus léger pour un rendu similaire. 

GIF

Clairement, le GIF est le format nécessaire si vous utilisez une image animée (enchaînement de plusieurs images sur l’emplacement d’une). Sinon, laissez-le tomber. 

 

Un exemple de gif

 

LA COMPRESSION

Maintenant que votre format a été choisi à bon escient, attaquons les choses sérieuses. La compression consiste à effacer toutes les données qui ne sont pas utiles d’être conservées (métadonnées, simplification de l’algorithme, …). Après quelques manipulations, votre image sera clairement moins lourde ! 

 

Compresser avec Photoshop

Redimensionner son image

Il existe quelques manipulations très simples à effectuer avec Photoshop. Mais d’abord, il va falloir donner la bonne dimension à notre image. Ça évitera qu’elle se déforme une fois postée, mais ça évite aussi d’avoir une image trop lourde pour rien. En effet, plus votre image est grande en termes de pixels, plus elle va être lourde (car elle contiendra plus d’informations). 

Ouvrez votre image (Fichier > Ouvrir). Allons la redimensionner (Image > Taille de l’image).

 

Redimension de la taille d'une image avec Photoshop

 

Vous voyez ici la taille de l’image : 943 Ko. Ça nous fait presque 1 Mo puisque 1 Mo = 1 000 Ko. Or, je vous disais en début d’article que vos images d’illustration feront quelques dizaines de Ko tout au plus. Notre image est donc clairement trop grosse. 

Je veux utiliser cette image à une dimension de 300×300 px. Je modifie donc les valeurs de largeur et de hauteur. La résolution on a vu que peu importe, pensez par contre à garder la case de rééchantillonnage cochée.

 

Le nouveau poids de mon image redimensionnée sur Photoshop

 

On voit que l’image passe déjà de 943 à 264 Ko ! Ne reste plus qu’à cliquer sur « OK ».

 

Compresser

Une fois redimensionnée, nous allons utiliser une fonction très pratique de Photoshop dans l’onglet « Fichier », « Enregistrer pour le web » ! Le logiciel va nous mâcher tout le travail de compression, nous n’avons qu’à lui donner nos préférences. Le mode « 4 vignettes » permet de comparer l’image avec 3 niveaux de compression différents en plus de l’image originale. 

 

Choisir le niveau de compression de l'image avec Photoshop

 

Vous n’avez qu’à modifier la valeur de la qualité en haut à droite. Vous pouvez le faire avec 3 des vignettes pour les comparer avec l’originale et entre elles. La compressée au maximum (qualité 0) ne pèse plus que 4 Ko (contre 264 Ko pour l’originale), mais comme vous le voyez l’image est très floue et perd en couleurs. Il faut alors réduire la compression (donc remonter la qualité), jusqu’à trouver le ratio parfait entre poids et qualité.

Arbitrairement, je trouve que le meilleur ratio poids/qualité est à 75 de qualité pour cette image, car à 50 le personnage perd trop de ses couleurs au visage. Mon image pèse alors 26,04 Ko. 

Vous pouvez constater sous mon image de base qu’elle est en PNG. Photoshop a effectué le changement automatiquement en JPEG car enregistrer mon image en PNG l’aurait inutilement alourdit. Nous sommes alors passés de 943 Ko à 264 Ko, pour enfin arriver à 26 Ko sans qu’il y ait visuellement trop de changement. Votre navigateur web vous dit merci !

 

Le nom de l’image

Petit bonus au passage pour le référencement ! Car oui de plus en plus de recherches internet s’effectuent grâce aux images (Google Image principalement), alors ne les négligez pas ! Un geste très simple se situe dans le nom du fichier. Plutôt que de laisser ou d’utiliser un nom barbare, donnons un nom de fichier adapté au web. Ce nom de fichier comportera les mots-clés concernant l’image, qui seront séparés par des tirets (-), et sans accent ! Par exemple : « jeu-video-foot.jpg ». A partir du nom de l’image, vous devinez aisément son contenu.

Il y a eu des débats concernant l’utilisation du tiret ou de l’underscore (_) dans le référencement. D’après les recherches que j’ai effectué le tiret sépare bien les mots-clés, cependant un doute plane sur l’underscore. Il serait en fait considéré comme un caractère normal et non un séparateur, ce qui implique que vos mots-clés n’en forment qu’un seul qui n’a aucun sens. Alors dans le doute, préférez le tiret !

 

Nommer son image pour le web

Un très mauvais nom d’image pour le web.

 

Compresser avec un site web

Il est aussi possible de compresser avec de nombreux sites web. Personnellement, j’utilise Compressor.io.

 

L'interface du site compressor.ioL’interface de Compressor.io

 

Il existe de nombreux sites de compression d’image, mais d’après mes différents tests ce site est le plus fiable et le plus intuitif. Si vous en préférez un autre le principe est le même. Vous avez deux modes de compression : « Lossy » (avec perte) et « Lossless » (sans perte). Le premier signifie que vous aurez une dégradation de l’image, et le second qu’au contraire le visuel restera inchangé.

 

Compression avec Compressor.io Après une compression « Lossy » (avec perte), un allégement de 45% du poids de l’image.

 

Le site choisit automatiquement le niveau de qualité de l’image, à l’inverse de Photoshop où on peut comparer et l’ajuster. Mais en général il fait un bon travail : il réduit considérablement le poids et l’image reste belle. Il y a cependant de rares cas où l’image ne me convenait pas et où je suis simplement passer par Photoshop.

C’est tout pour cet article ! Si vous commencez votre site web ou projetez d’en faire un, prenez dès maintenant ces bonnes habitudes avec vos images ! Et si vous avez déjà un site mais que vous ne compressiez pas vos images, le changement permettrait de l’accélérer de manière considérable ! 


 

 

Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *