Optimiser son logo pour un site Internet

1. Les couleurs sur le web

Couleur RVB « Rouge, Vert, Bleu » : ce mode colorimétrique est utilisé pour les écrans, qu’il s’agisse d’ordinateurs, de smartphones, de télévisions ou encore d’appareils photo. Pour faire simple, les écrans d’ordinateurs ou de téléphones doivent être éclairés pour qu’on y voie ce qui est affiché.

Petite explication : chaque pixel d’un écran est composé de trois points lumineux de couleur rouge, vert et bleu. Pour obtenir des couleurs différentes, on fait donc varier l’intensité de ces points lumineux, de 0 à 255. Si les trois couleurs — rouge, vert et bleu — sont à 0, on obtient un écran noir : luminosité nulle. En revanche, si les trois couleurs sont à 255, on obtient du blanc : luminosité maximale.

Voici quelques exemples de couleurs

1. Couleur rouge pure #FF0000

2. Les formats d’images sur le Web

2.1 JPG ou JPEG

• Le format JPG est un format d’export classique pour une image.
• C’est un format dit destructeur, car si l’on réduit le poids d’une image JPG, on réduit aussi sa qualité.

2.2 PNG

• Le principal avantage du PNG est qu’il prend en compte la transparence d’un calque, contrairement à un JPG. C’est intéressant pour exporter un logo sans couleur de fond.
• Contrairement au format JPG, c’est un format d’image non destructeur car ce format permet de réduire le poids d’une image sans altérer sa qualité.

Le format PNG dispose de plusieurs modes d’exportation :

• PNG 24 : c’est un enregistrement avec plus de 16 millions de couleurs. C’est une exportation de haute qualité qui permet d’avoir une image sans perte.
• PNG 8 : c’est un enregistrement utilisant différentes palettes : 256, 128, 64, 32 ou 16. Plus la palette est petite, moins il y aura de couleurs différentes sur l’image. L’image est donc moins lourde mais aussi de qualité médiocre.

2.3 WebP

Ce format d’image a été développé par Google. Il fournit le même fichier qu’une image JPG, mais avec une taille de fichier plus petite.

En réduisant la taille de vos fichiers image avec ce format, cela aide à offrir une meilleure expérience aux visiteurs d’un site internet, car les pages du site se chargeront plus rapidement.

Dans l’étude sur la compression WebP de Google, on se rend compte qu’une image WebP est

• 25–35 % plus petite qu’une image JPEG comparable.
• 26 % plus petite qu’une image PNG comparable.

Le format WebP est pris en charge par la plupart des navigateurs comme Chrome ou Firefox. Cependant, le format WebP n’est pas compatible avec le navigateur d’Apple, Safari. En effet, on retrouvera des images « cassées » avec un fond blanc sur un PNG par exemple. Même si les utilisateurs de Safari sont moins nombreux, il ne faut pas les négliger et il faut trouver une alternative.

Autre souci avec le format WebP : le CMS WordPress ne permet pas d’ajouter une image WebP dans sa bibliothèque, un joli message d’erreur s’affichera à la place. Pour utiliser le WebP sur WordPress, il faut donc télécharger un plugin WebP Express.

2.4 SVG (Scalable Vector Graphics)

Avantages :

• Poids ultra-léger.
• Facilement modifiable depuis n’importe quel éditeur de texte grâce au CSS ou avec un logiciel de création graphique comme Illustrator ou Sketch.
• Aucun changement de qualité d’image : format idéal pour les écrans HD et Ultra HD, peu importe la taille finale de l’image.
• Compatible avec tous les navigateurs.
• Animation possible à l’infini avec du CSS ou JS.

Inconvénients :

• La taille d’un SVG augmente très vite si son contenu comporte de nombreux éléments graphiques ou de nombreux calques.
• Un CMS comme WordPress ne permet pas, de base, d’importer des fichiers SVG. Pour les plus téméraires, vous devrez toucher au code et y ajouter quelques lignes afin de pouvoir importer des SVG. Pour les autres, il faudra vous contenter d’un format JPG, JPEG ou PNG pour vos images.

Pour optimiser au mieux votre logo, utilisez le format SVG pour son export. Il ne pèsera alors que quelques octets et ne nuira pas à la vitesse de chargement de votre site.

Bon à savoir : Il existe maintenant le format SVGZ, qui est le format compressé d’un fichier SVG. Ce format permet de réduire de 30 % le poids d’un SVG sans aucune perte de qualité. L’inconvénient, c’est que vous n’avez plus accès aux modifications via le CSS ; il faudra passer par un logiciel comme Illustrator pour le modifier.

3. L’export des images

Lorsque vous créez votre logo, pensez à le travailler davantage horizontal que vertical. En effet, un logo plus haut que large ou bien carré ne s’adaptera pas correctement dans le header (menu) de votre site internet.

Voici un exemple en image pour le logo Snoweb : avec un logo plus horizontal, le header est moins haut et prend donc moins de place sur la page, laissant de la place aux informations importantes du site.

Quelques tailles pour les exports

Pour un format horizontal :

• 250 px x 100 px
• 350 px x 75 px
• 400 px x 100 px

Favicon :

• 16 px x 16 px
• 32 px x 32 px
• 48 px x 48 px