{"id":719,"date":"2012-05-16T19:26:42","date_gmt":"2012-05-16T17:26:42","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=719"},"modified":"2023-04-01T18:09:54","modified_gmt":"2023-04-01T16:09:54","slug":"remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/","title":{"rendered":"Remplacement d’image CSS adapt\u00e9 au retina display des appareils mobiles"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

De plus en plus d’appareils mobiles que ce soit sur tablette ou smartphone ont des \u00e9crans dits \u00ab\u00a0retina\u00a0\u00bb avec un pixel ratio plus \u00e9lev\u00e9 que nos \u00e9crans de bureau. L’arriv\u00e9e du retina sur l’iPad 3 s’est d’ailleurs fait grandement remarqu\u00e9.<\/p>\n

Les designers d’applications natives ont depuis un petit moment d\u00e9j\u00e0 pris l’habitude de cr\u00e9er deux versions de leurs images et ic\u00f4nes : une version \u00ab\u00a0normale\u00a0\u00bb et une avec le suffixe @2x destin\u00e9es aux \u00e9crans retina. Sur Android, c’est m\u00eame 4 images qu’il faut fournir : ldpi, mdpi, hdpi et xhdpi.<\/p>\n

C’est en testant une application jQuery Mobile sur un iPhone 4S que je me suis rendue compte que les ic\u00f4nes utilis\u00e9es pour l’interface \u00e9taient floues sur l’\u00e9cran retina. Il en va de m\u00eame pour le Galaxy Nexus par exemple (sous Android).<\/p>\n

J’ai donc cherch\u00e9 un moyen de proposer \u00e0 ces appareils des images de meilleur qualit\u00e9.<\/p>\n

Pour cela j’ai cr\u00e9e une page de d\u00e9monstration<\/a> dont vous pouvez t\u00e9l\u00e9charger le code<\/a>. Vous pouvez directement tester la page sur votre mobile en flashant ce qrcode.<\/p>\n

\"le<\/p>\n

Cette d\u00e9monstration utilise les media queries, et en particulier \u00a0\u00bb min-device-pixel-ratio<\/strong> \u00a0\u00bb pour fournir aux appareils qui ont un pixel ratio sup\u00e9rieur \u00e0 deux (plus commun\u00e9ment appel\u00e9 retina display) une image alternative de meilleur qualit\u00e9. Cette image est ensuite redimensionn\u00e9e \u00e0 la bonne taille en utilisant la propri\u00e9t\u00e9 CSS3 background<\/strong>-size<\/strong> . Les images en qualit\u00e9 retina utilisent le suffixe @2x par habitude de l’export retina pour les applications natives, mais ce n’est en aucun cas une obligation de nommage.<\/p>\n

Vous pouvez retrouver sur Noupe un tutoriel complet d\u00e9di\u00e9 \u00e0 cette technique :<\/p>\n

The Mobile Web: CSS Image Replacement for Retina Display Devices<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu’il ne soit plus \u00e0 jour.De plus en plus d’appareils mobiles que ce soit sur tablette ou smartphone ont des \u00e9crans dits \u00ab\u00a0retina\u00a0\u00bb avec un pixel ratio plus \u00e9lev\u00e9 que nos \u00e9crans de bureau. L’arriv\u00e9e du retina sur l’iPad 3 s’est d’ailleurs fait grandement remarqu\u00e9. Les designers d’applications natives ont depuis un petit moment d\u00e9j\u00e0 pris l’habitude de cr\u00e9er deux versions de leurs images et ic\u00f4nes : …<\/p>\n","protected":false},"author":3,"featured_media":720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224],"tags":[],"class_list":["post-719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles-dates-pas-mis-a-jours"],"yoast_head":"\nRemplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles avec les propri\u00e9t\u00e9s CSS min-device-pixel-ratio et background-size\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles avec les propri\u00e9t\u00e9s CSS min-device-pixel-ratio et background-size\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-16T17:26:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-01T16:09:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/05\/cssimg.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"630\" \/>\n\t<meta property=\"og:image:height\" content=\"180\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/\",\"name\":\"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/05\/cssimg.jpg\",\"datePublished\":\"2012-05-16T17:26:42+00:00\",\"dateModified\":\"2023-04-01T16:09:54+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles avec les propri\u00e9t\u00e9s CSS min-device-pixel-ratio et background-size\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/05\/cssimg.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/05\/cssimg.jpg\",\"width\":630,\"height\":180},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles avec les propri\u00e9t\u00e9s CSS min-device-pixel-ratio et background-size","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/","og_locale":"fr_FR","og_type":"article","og_title":"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles avec les propri\u00e9t\u00e9s CSS min-device-pixel-ratio et background-size","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-05-16T17:26:42+00:00","article_modified_time":"2023-04-01T16:09:54+00:00","og_image":[{"width":630,"height":180,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/05\/cssimg.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/","name":"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/05\/cssimg.jpg","datePublished":"2012-05-16T17:26:42+00:00","dateModified":"2023-04-01T16:09:54+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Remplacement d'image CSS adapt\u00e9 au retina display des appareils mobiles avec les propri\u00e9t\u00e9s CSS min-device-pixel-ratio et background-size","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/remplacement-dimage-css-adapte-au-retina-display-des-appareils-mobiles\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/05\/cssimg.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/05\/cssimg.jpg","width":630,"height":180},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=719"}],"version-history":[{"count":1,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/719\/revisions"}],"predecessor-version":[{"id":8408,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/719\/revisions\/8408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/720"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}