Une histoire de pixels…


Brand Content

 

Le pixel est l’élément de base dans le design digital. Comme le parpaing l’est pour le maçon.

Commençons par découvrir la définition du pixel selon Wikipédia :

Le pixel (souvent abrégé px) est l’unité de base permettant de mesurer la définition d’une image numérique matricielle. Son nom provient de la locution anglaise « picture element », qui signifie « élément d’image »

 

Comprendre les résolutions d’écran

img 1 Une histoire de pixels...

Le pixel permet de spécifier les définitions d’affichage (largeur × hauteur)

La résolution spatiale est une mesure de la finesse des détails d’une image pour une dimension donnée. Une image matricielle est composée de pixels. Pour l’impression, on peut également lui définir une taille en (centimètres ou pouces) et la conjonction de ces deux données s’exprime en nombre de pixels par unité de longueur. Cette résolution spatiale qui indique la « densité de pixels » est couramment nommée « résolution ».

En français, il y a souvent confusion entre « pixel par pouce » et « points par pouce » (ppp ≠ PPP). Le pixel ne doit pas être confondu avec le point de trame.

Contrairement aux images numériques destinées à être imprimées, les sources vidéos émettent un flux d’images sans résolution spatiale prédéfinie. On parle pourtant souvent de la « résolution d’affichage » pour les écrans d’ordinateur, et cette dernière s’exprime en nombre de pixels et non en « pixels par pouce ». Afin d’éviter cette confusion entre résolution d’affichage et résolution d’impression ou de capture, certains préfèrent utiliser le terme unique de « définition » pour la quantité de pixels des images et/ou des écrans. Cependant, le terme « résolution d’écran » reste celui utilisé par les fabricants et par les développeurs de logiciels comme Microsoft, Apple, nVidia ou ATI.

 

Une vidéo pour comprendre tout ça :

Et voici un outil utile pour connaitre les résolutions d’écrans les plus utilisées sur une période donnée :  StatCounter 

 

Le «  pixel perfect »

 

img 2 Une histoire de pixels...

Pour avoir un rendu qualitatif en web design, il est important  de créer les éléments de nos sites (boutons, typos, formes géométriques…) de manière propre avec un rendu net ou pixel perfect. Ustwo nous livre un guide qui explique toutes les techniques permettant d’obtenir des designs « web pixel perfect » !

La particularité des écrans rétina réside dans la densité de pixels. En effet, pour une résolution donnée, nous allons avoir deux fois plus de pixels. Par exemple, un écran iPhone 5 de 1136/640 pixels en contient en réalité 2272/1280. Cela permet d’avoir une netteté incroyable, où il est quasiment impossible de distinguer les pixels. Oui, sauf si le site Internet que vous visitez n’a pas été optimisé Retina Design.

Pour optimiser les images bitmap en rétina, il suffit de les créer en 2 versions : une version originale (par exemple 300/500 px) et une version au double de sa résolution (600/1000 px). L’intégrateur et ses Media Queries se chargeront ensuite de spécifier l’affichage en fonction du device.

En langage CSS, l’unité pixel (px) a été dissociée du pixel matériel afin de pallier la diversité croissante des résolutions d’écrans. Ainsi, lorsque la taille d’un élément CSS est exprimée en pixels, le rendu sera similaire quelle que soit la densité de pixels de l’appareil d’affichage.

 

Le pixel et l’art

img 3 1024x724 Une histoire de pixels...

Le pixel a inspiré de nombreux artistes qui pratiquent le « Pixel Art  »

Parmi les plus connus, on peut citer Eboy et le street artiste Invader.

Pour se lancer dans le pixel art (et plus précisément créer des décors de rétrogamming), nous vous recommandons ces très bons tutoriels 

 

Conclusion

Avec les années, le pixel s’affirme comme un moyen d’expression artistique à part entière. Il est néanmoins nécessaire d’en maîtriser les subtilités lors de la réalisation de sites. Aussi bien d’un point de vue graphique que technique.

 

Sources :

– https://graphism.fr

– https://www.anthedesign.fr

 

Laisser un commentaire