{"id":2139,"date":"2012-06-21T10:22:14","date_gmt":"2012-06-21T15:22:14","guid":{"rendered":"https:\/\/www.highedwebtech.com\/?p=2139"},"modified":"2013-10-18T13:50:47","modified_gmt":"2013-10-18T17:50:47","slug":"will-retina-displays-make-more-work-us","status":"publish","type":"post","link":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/","title":{"rendered":"Will Retina Displays Make More Work for Us?"},"content":{"rendered":"<p>For as long as the web has been around, we&#8217;ve lowered the resolution of our images to 72 DPI. That low-res size was always been fine, until now, when we&#8217;ve entered the era of the retina display.<\/p>\n<p>Last week, Apple announced its new <a href=\"http:\/\/www.apple.com\/macbook-pro\/features\/\" target=\"_blank\" rel=\"nofollow\">Retina display MacBook Pro<\/a>. The resolution of this laptop display is basically insane.\u00a0Screen real estate double the size of a 1080p HDTV? Whoa.<\/p>\n<p>Here&#8217;s what&#8217;s starting to worry me as a web person: you can be sure this is not the last laptop or desktop computer to have a high resolution display. It may take a few years, but eventually many different kinds of computers and tablets and phones will have these types of displays. It&#8217;s worth starting to think about now how we&#8217;re going to deal with these devices.<\/p>\n<p>We&#8217;re already seeing apps like Chrome starting to integrate higher DPI images into its browser. Check out this image from the <a href=\"http:\/\/chrome.blogspot.co.uk\/2012\/06\/chrome-and-new-shiny.html\" target=\"_blank\" rel=\"nofollow\">Chrome developers blog<\/a>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" title=\"Chrome\" alt=\"\" src=\"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png\" width=\"398\" height=\"398\" \/><\/p>\n<p>I&#8217;m not sure yet what this means for us as web people. Will we have to start saving our images in higher resolutions? Will we have to use some form of CSS media queries to detect this type of display? <a href=\"http:\/\/benfrain.com\/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4\/\" target=\"_blank\" rel=\"nofollow\">This blog post<\/a> shows how to do it for iPhones and iPads with retina displays, but I don&#8217;t know if this type of CSS will work for laptops and other larger screens.<\/p>\n<p>Or, do we just start offering hi-res versions of all our graphics, thereby eliminating the need for media queries. This is the easy way to solve the problem, but that&#8217;s potentially a lot of wasted bandwidth. This is even more important in the days of metered data plans.<\/p>\n<p>Have you started to think about this for your institution and its website? I&#8217;d love to hear your ideas and thoughts on this.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Will retina display devices like the iPad and new Macbook Pro make more or different work for us as web developers?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[9,21,22,46],"tags":[608],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Will Retina Displays Make More Work for Us? || HighEdWebTech<\/title>\n<meta name=\"description\" content=\"Will retina display devices like the iPad and new Macbook Pro make more or different work for us as web developers?\" \/>\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.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Will Retina Displays Make More Work for Us? || HighEdWebTech\" \/>\n<meta property=\"og:description\" content=\"Will retina display devices like the iPad and new Macbook Pro make more or different work for us as web developers?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/\" \/>\n<meta property=\"og:site_name\" content=\"HighEdWebTech\" \/>\n<meta property=\"article:published_time\" content=\"2012-06-21T15:22:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-10-18T17:50:47+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png\" \/>\n<meta name=\"author\" content=\"Mike\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:site\" content=\"@mrichwalsky\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/\"},\"author\":{\"name\":\"Mike\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"headline\":\"Will Retina Displays Make More Work for Us?\",\"datePublished\":\"2012-06-21T15:22:14+00:00\",\"dateModified\":\"2013-10-18T17:50:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/\"},\"wordCount\":308,\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png\",\"keywords\":[\"retina display\"],\"articleSection\":[\"apple\",\"CSS\",\"Design\",\"iphone\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/\",\"url\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/\",\"name\":\"Will Retina Displays Make More Work for Us? || HighEdWebTech\",\"isPartOf\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png\",\"datePublished\":\"2012-06-21T15:22:14+00:00\",\"dateModified\":\"2013-10-18T17:50:47+00:00\",\"description\":\"Will retina display devices like the iPad and new Macbook Pro make more or different work for us as web developers?\",\"breadcrumb\":{\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage\",\"url\":\"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png\",\"contentUrl\":\"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.highedwebtech.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Will Retina Displays Make More Work for Us?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.highedwebtech.com\/#website\",\"url\":\"https:\/\/www.highedwebtech.com\/\",\"name\":\"HighEdWebTech\",\"description\":\"Web &amp; Marketing for Education &amp; Nonprofits\",\"publisher\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.highedwebtech.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980\",\"name\":\"Mike\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"contentUrl\":\"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png\",\"width\":595,\"height\":128,\"caption\":\"Mike\"},\"logo\":{\"@id\":\"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/mikerichwalsky\/\",\"https:\/\/twitter.com\/mrichwalsky\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Will Retina Displays Make More Work for Us? || HighEdWebTech","description":"Will retina display devices like the iPad and new Macbook Pro make more or different work for us as web developers?","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.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/","og_locale":"en_US","og_type":"article","og_title":"Will Retina Displays Make More Work for Us? || HighEdWebTech","og_description":"Will retina display devices like the iPad and new Macbook Pro make more or different work for us as web developers?","og_url":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/","og_site_name":"HighEdWebTech","article_published_time":"2012-06-21T15:22:14+00:00","article_modified_time":"2013-10-18T17:50:47+00:00","og_image":[{"url":"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png"}],"author":"Mike","twitter_card":"summary_large_image","twitter_creator":"@mrichwalsky","twitter_site":"@mrichwalsky","twitter_misc":{"Written by":"Mike","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#article","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/"},"author":{"name":"Mike","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"headline":"Will Retina Displays Make More Work for Us?","datePublished":"2012-06-21T15:22:14+00:00","dateModified":"2013-10-18T17:50:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/"},"wordCount":308,"publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage"},"thumbnailUrl":"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png","keywords":["retina display"],"articleSection":["apple","CSS","Design","iphone"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/","url":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/","name":"Will Retina Displays Make More Work for Us? || HighEdWebTech","isPartOf":{"@id":"https:\/\/www.highedwebtech.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage"},"image":{"@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage"},"thumbnailUrl":"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png","datePublished":"2012-06-21T15:22:14+00:00","dateModified":"2013-10-18T17:50:47+00:00","description":"Will retina display devices like the iPad and new Macbook Pro make more or different work for us as web developers?","breadcrumb":{"@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#primaryimage","url":"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png","contentUrl":"http:\/\/1.bp.blogspot.com\/-JUm5Qm-mdzg\/T9kaIsOfQXI\/AAAAAAAAA0k\/_6MkZplv6SY\/s400\/high-res.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.highedwebtech.com\/2012\/06\/21\/will-retina-displays-make-more-work-us\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.highedwebtech.com\/"},{"@type":"ListItem","position":2,"name":"Will Retina Displays Make More Work for Us?"}]},{"@type":"WebSite","@id":"https:\/\/www.highedwebtech.com\/#website","url":"https:\/\/www.highedwebtech.com\/","name":"HighEdWebTech","description":"Web &amp; Marketing for Education &amp; Nonprofits","publisher":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.highedwebtech.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/c923dc4801e5e0b88fa4def573701980","name":"Mike","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/","url":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","contentUrl":"https:\/\/www.highedwebtech.com\/wp-content\/uploads\/2019\/11\/HEWT-2020-Logo.png","width":595,"height":128,"caption":"Mike"},"logo":{"@id":"https:\/\/www.highedwebtech.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/www.instagram.com\/mikerichwalsky\/","https:\/\/twitter.com\/mrichwalsky"]}]}},"_links":{"self":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/2139"}],"collection":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/comments?post=2139"}],"version-history":[{"count":0,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/posts\/2139\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/media?parent=2139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/categories?post=2139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highedwebtech.com\/wp-json\/wp\/v2\/tags?post=2139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}