On Noupe : The Mobile Web: CSS Image Replacement for Retina Display Devices

Stéphanie Walter

Senior UX & UI designer

Senior UX & UI Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Product Design (GDE)

Follow on Twitter

This content is 7 years old. Remember that the following content might be outdated.

With the evolution of technologie, more and more devices get the retina display capability. For those devices, serving normal images results in an ugly interface, with pixelized graphics. There are some solution to serve those devices high quality images using the min-device-pixel-ratio CSS3 media query, combines with some background-size.

Here is a demo page  to see what can be done, and your can also download the code.

le qrcode ainsi qu'un screenshot de l'application

I created a tutorial to explain the technique :

The Mobile Web: CSS Image Replacement for Retina Display Devices

Are you looking for a UX or UI designer, for a site or mobile application? Do you want me to give a talk at your conference, or simply want to know more about me? You can take a look at my portfolio and contact me.

Comments are closed.