IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

HTML/CSS - Apprendre à optimiser vos images pour le responsive et les écrans Retina
Un tutoriel de Quentin Busuttil

Le , par Buzut

411PARTAGES

17  0 
Chers membres du club,

J'ai le plaisir de vous présenter ce tutoriel  :

Apprendre à optimiser vos images pour le responsive et les écrans Retina
La « technologie » Retina, si on peut l’appeler ainsi, consiste en une densité de pixels assez élevée pour que l’œil (d’où le nom de Retina) ne puisse discerner les pixels sur l’écran. Cependant, avec une telle densité, pour éviter que tout paraisse minuscule, la valeur en pixels de chaque élément est doublée. Concrètement, cela signifie que dans votre feuille CSS, tout élément que vous définissez, par exemple, avec une width:100px; fera en réalité 200px. Tout est multiplié par deux.
À de telles résolutions, autant dire que vos images peuvent vite paraître pour le moins pixelisées. Il faut donc penser aux différentes tailles d’écrans, mais aussi aux différentes densités d’écrans. Un 22″ HD (1920×1080) n’aura pas besoin de la même qualité d’image qu’un 22″ en 4k (4096×2016). Voyons comment penser nos images pour qu’elles soient éclatantes en toute situation.
Bonne lecture

Retrouvez les meilleurs cours et tutoriels pour apprendre le développement Web.

Une erreur dans cette actualité ? Signalez-le nous !