Pourquoi j’ai un logo flou et pixelisé dans mon site Web?

Pourquoi j’ai un logo flou et pixelisé dans mon site Web?

Le logo devient flou et pixelisé dans l’écran d’une tablette ou d’un appareil mobile. Mais quand nous regardons un site Web dans l’écran d’un ordinateur, le logo sort bien. Et ça s’applique à tous les types d’images.

À savoir pour éviter que le logo soit flou et pixelisé

Un détail important à savoir, chaque écran possède une résolution d’affichage différente. Avec les appareils mobiles récents, la qualité a augmenté de manière radicale. Une image qui paraissait bien dans le navigateur (Edge, Chrome, Safari, Firefox…) de l’ordinateur ressemble tout d’un coup à un tas de pixels.

Idéalement, on ajuste un logo et les divers types d’images en fonction de l’écran qui détient la meilleure résolution.

Voici une règle de base toute simple, je double la taille en pixels d’une image afin qu’elle reste belle sur appareil mobile et autres écrans de grande résolution. Par exemple, si elle a une taille de 640 par 320 pixels sur ordinateur, je crée l’image à 1280 x 640 pixels.

Le format

Pour le cas d’un logo qui doit posséder un fond transparent, le format SVG [en courbe de Béziers] conserve sa qualité que l’image soit très petite à celle d’un stand d’exposition. Si ce n’est pas accessible avec votre outil de site Web, on passe au format PNG [en pixels].

Le format d’image récent WebP tente de s’imposer en tant que norme, mais l’ensemble des navigateurs ne le supporte pas encore. Nous pouvons utiliser des plus vieux comme les GIF, TIFF et plus, mais les SVG et PNG restent toujours les 2 formats « standard ».

En conclusion

Et bien entendu, au point de départ, ça prend une image de qualité. Dernièrement, j’ai dû retracer plusieurs logos et autres visuels dans Illustrator, car les documents d’origines étaient perdus. Puis, solliciter des photos d’une taille plus grande que celle d’un timbre postal. Pour détenir un site Web attirant, ça demande du matériel en conséquence.

Pourquoi j’ai un logo flou et pixelisé dans mon site Web?
Partager