{"id":17713,"date":"2013-07-22T18:01:08","date_gmt":"2013-07-22T10:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17713"},"modified":"2025-04-04T01:34:54","modified_gmt":"2025-04-03T17:34:54","slug":"css-retina-display","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/","title":{"rendered":"Understanding Retina Displays and Media Queries"},"content":{"rendered":"<p>Apple revolutionized screen quality with its <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.apple.com\/macbook-pro\/features-retina\/\">Retina display<\/a>. This technology offers incredibly clear, vibrant, and detailed images. However, it also presents a challenge for designers and developers. <strong>If images aren\u2019t optimized for Retina displays, they won\u2019t look as good as they could.<\/strong><\/p>\n<p>In this article, we\u2019ll explore how to serve images that look great on high-resolution screens.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/\" class=\"ref-block__link\" title=\"Read More: A Guide to Better and Sharper UI Icons with Web Fonts\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Guide to Better and Sharper UI Icons with Web Fonts<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webfont-icons.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15616 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/webfont-icons.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Guide to Better and Sharper UI Icons with Web Fonts<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAre you using bitmap images like PNGs and GIFs for icons on your website? If so, you might...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>How to Use Vector Graphics<\/h2>\n<p>Firstly, if your images <strong>don\u2019t need to look realistic or have complex colors<\/strong>, vector graphics are likely your best choice. Unlike raster images, vector graphics <strong>aren\u2019t pixel-based<\/strong>, so they\u2019ll look crisp and clear on any screen size.<\/p>\n<p>You can add vector graphics to your website in several ways, such as using SVG, Fonts, or Canvas. Here are some resources to help you:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/svg\/\">Scalable Vector Graphic Series<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/webfont-icons\/\">A Guide to Better and Sharper UI Icons with Web Fonts<\/a><\/li>\n<\/ul>\n<h2>How to Use Media Queries<\/h2>\n<p>Media Queries allow you to deliver optimized graphics based on screen resolution. Unlike typical Media Queries that focus on viewport width, these queries target the device\u2019s pixel ratio and screen resolution.<\/p>\n<pre>\r\n@media only screen and (min-device-pixel-ratio: 2), \r\nonly screen and (min-resolution: 192dpi) {\r\n  \/* Style Rules *\/\r\n}\r\n<\/pre>\n<p>The example above sets styles for screens with a minimum device pixel ratio of <code>2<\/code> or a minimum resolution of <code>192dpi<\/code>.<\/p>\n<p>You can calculate the DPI (dots per inch) by dividing the screen resolution by its diagonal size in inches. For instance, a 13.3-inch screen with a 1280\u00d7800 resolution has a DPI of 96. The example uses roughly twice that number (192dpi).<\/p>\n<p>If you\u2019re interested in the math behind device pixel ratios, check out this article by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/high-dpi\/\">Boris Smush at HTML5 Rocks<\/a>.<\/p>\n<p>You can also find the device pixel ratio using JavaScript, as shown below:<\/p>\n<pre>\r\nvar dpr = window.devicePixelRatio;\r\nalert('Device Pixel Ratio: ' + dpr);\r\n<\/pre>\n<p>This will display the device pixel ratio on Retina screens like the new MacBook Pro and iPhone 4.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/retina-dpr.jpg\" width=\"500\" height=\"506\" alt=\"Retina Display DPR\"><\/figure>\n<p>On non-Retina displays, the number will be <code>1<\/code>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/normal-dpr.jpg\" width=\"500\" height=\"425\" alt=\"Normal Display DPR\"><\/figure>\n<h3>Device Pixel Ratios for Popular Devices<\/h3>\n<p>Here\u2019s a table showing the device pixel ratios for some popular devices:<\/p>\n<table>\n<thead>\n<tr>\n<td align=\"left\">Device<\/td>\n<td align=\"center\">Device Pixel Ratio<\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td align=\"left\">iPhone 4, iPhone 4S, iPhone 5, iPod Touch<\/td>\n<td align=\"center\">2<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">iPad with Retina Display<\/td>\n<td align=\"center\">2<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Galaxy Nexus, Galaxy Note, Galaxy SIII<\/td>\n<td align=\"center\">2<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Kindle Fire HD<\/td>\n<td align=\"center\">1.5<\/td>\n<\/tr>\n<tr>\n<td align=\"left\">Galaxy S Plus, Galaxy SII<\/td>\n<td align=\"center\">1.5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>As you can see, some HD screens have a 1.5 device pixel ratio. You might want to set your Media Query minimum threshold to 1.5 for broader compatibility.<\/p>\n<pre>\r\n@media only screen and (min-device-pixel-ratio: 1.5),\r\nonly screen and (min-resolution: 192dpi) {\r\n  \/* Style Rules *\/\r\n}\r\n<\/pre>\n<h3>Example<\/h3>\n<p>We\u2019ve created a demo page that uses two image formats: a <code>.png<\/code> for standard screens and an SVG for HD screens. These are set using Media Queries.<\/p>\n<pre>\r\na {\r\n  background-image: url('img\/hongkiatcom.png');\r\n  background-size: 100%;\r\n  background-repeat: no-repeat;\r\n}\r\n@media only screen and (-webkit-min-device-pixel-ratio: 1.5),\r\nonly screen and (min--moz-device-pixel-ratio: 1.5),\r\nonly screen and (-o-min-device-pixel-ratio: 3\/2),\r\nonly screen and (min-device-pixel-ratio: 1.5),\r\nonly screen and (min-resolution: 192dpi) {\r\n  a {\r\n    background-image: url('img\/hongkiatcom.svg');\r\n    background-size: 100%;\r\n    background-repeat: no-repeat;\r\n  }\r\n}\r\n<\/pre>\n<p>You can test this demo on both standard and Retina displays to see which image is displayed.<\/p>\n<ul class=\"download download-2c\">\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css-retina-display\/\">View Demo<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css-retina-display\/\">Download Source<\/a><\/li>\n<\/ul>\n<h2>Additional Resources<\/h2>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2012\/08\/towards-retina-web\/\">Towards a Retina Web<\/a> \u2013 Smashing Magazine<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/developer.apple.com\/library\/ios\/#documentation\/2DDrawing\/Conceptual\/DrawingPrintingiOS\/SupportingHiResScreensInViews\/SupportingHiResScreensInViews.html#\/\/apple_ref\/doc\/uid\/TP40010156-CH15-SW8\">Supporting High-Resolution Screens in Views<\/a> \u2013 Apple.com<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/blog\/CSS\/2012\/06\/14\/unprefix-webkit-device-pixel-ratio\/\">Unprefixed Webkit Resolution Media Query<\/a> \u2013 W3.org<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/high-dpi\/\">High DPI Images for Variable Pixel Densities<\/a> \u2013 HTML5 Rocks<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-values\/#resolution\">CSS3 Values for Resolution<\/a> \u2013 W3.org<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Apple revolutionized screen quality with its Retina display. This technology offers incredibly clear, vibrant, and detailed images. However, it also presents a challenge for designers and developers. If images aren\u2019t optimized for Retina displays, they won\u2019t look as good as they could. In this article, we\u2019ll explore how to serve images that look great on&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Understanding Retina Displays and Media Queries - Hongkiat<\/title>\n<meta name=\"description\" content=\"Apple revolutionized screen quality with its Retina display. This technology offers incredibly clear, vibrant, and detailed images. However, it also\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Retina Displays and Media Queries\" \/>\n<meta property=\"og:description\" content=\"Apple revolutionized screen quality with its Retina display. This technology offers incredibly clear, vibrant, and detailed images. However, it also\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-22T10:01:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:34:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/retina-dpr.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Understanding Retina Displays and Media Queries\",\"datePublished\":\"2013-07-22T10:01:08+00:00\",\"dateModified\":\"2025-04-03T17:34:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/\"},\"wordCount\":474,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-retina-display\\\/retina-dpr.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/\",\"name\":\"Understanding Retina Displays and Media Queries - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-retina-display\\\/retina-dpr.jpg\",\"datePublished\":\"2013-07-22T10:01:08+00:00\",\"dateModified\":\"2025-04-03T17:34:54+00:00\",\"description\":\"Apple revolutionized screen quality with its Retina display. This technology offers incredibly clear, vibrant, and detailed images. However, it also\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-retina-display\\\/retina-dpr.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-retina-display\\\/retina-dpr.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-retina-display\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding Retina Displays and Media Queries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Understanding Retina Displays and Media Queries - Hongkiat","description":"Apple revolutionized screen quality with its Retina display. This technology offers incredibly clear, vibrant, and detailed images. However, it also","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:\/\/www.hongkiat.com\/blog\/css-retina-display\/","og_locale":"en_US","og_type":"article","og_title":"Understanding Retina Displays and Media Queries","og_description":"Apple revolutionized screen quality with its Retina display. This technology offers incredibly clear, vibrant, and detailed images. However, it also","og_url":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2013-07-22T10:01:08+00:00","article_modified_time":"2025-04-03T17:34:54+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/retina-dpr.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Understanding Retina Displays and Media Queries","datePublished":"2013-07-22T10:01:08+00:00","dateModified":"2025-04-03T17:34:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/"},"wordCount":474,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/retina-dpr.jpg","keywords":["CSS"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/","url":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/","name":"Understanding Retina Displays and Media Queries - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/retina-dpr.jpg","datePublished":"2013-07-22T10:01:08+00:00","dateModified":"2025-04-03T17:34:54+00:00","description":"Apple revolutionized screen quality with its Retina display. This technology offers incredibly clear, vibrant, and detailed images. However, it also","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-retina-display\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/retina-dpr.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-retina-display\/retina-dpr.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-retina-display\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding Retina Displays and Media Queries"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4BH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=17713"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17713\/revisions"}],"predecessor-version":[{"id":73613,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/17713\/revisions\/73613"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=17713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=17713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=17713"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=17713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}