HTML/CSS - Apprendre à optimiser vos images pour le responsive et les écrans Retina
Chers membres du club,
J'ai le plaisir de vous présenter ce tutoriel :
Citation:
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 ;)
:fleche: Retrouvez les meilleurs cours et tutoriels pour apprendre le développement Web.
