{"id":303,"date":"2013-05-31T09:50:52","date_gmt":"2013-05-31T09:50:52","guid":{"rendered":"http:\/\/www.siriinnovations.com\/blog\/?p=303"},"modified":"2016-01-08T04:39:52","modified_gmt":"2016-01-08T04:39:52","slug":"every-designer-must-know-about-retina-graphics","status":"publish","type":"post","link":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/","title":{"rendered":"Every Designer must know about Retina graphics"},"content":{"rendered":"

Retina graphics for Web Designs<\/strong><\/p>\n

Retina Display is a brand name used by Apple for liquid crystal displays which they have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance.Now a days Retina graphics used for phones, tablets and laptops.<\/p>\n

Resourses for Retina Graphics<\/strong><\/p>\n

Retina.js is a JavaScript script that checks your server to see if you have high resolution pictures available on your website. For example, if you originally have picture.jpg available, to make it retina ready, they will look for that picture that you uploaded that\u2019s twice the size, and should be named accordingly. This takes care of much of the issue with high-res pictures.<\/p>\n

formore ditails vist retinajs.com<\/a><\/p>\n

Basic steps to follow for retina graphics<\/strong><\/p>\n

1. Download the script<\/p>\n

Go to http:\/\/retinajs.com and click the “Download Zip” link. Open the zip file and copy the ‘retina.js’ file to where you keep your \u00a0website’s javascript file.<\/p>\n

2. Install the script<\/p>\n

Add the script to your website by adding a <script> tag for retina.js to the bottom of the page, right before your closing <\/body> tag.<\/p>\n

Ex: <script src=”\/path\/to\/retina.js”><\/script<\/p>\n

3.Add high-resolution images to your website<\/p>\n

RetinaJS looks for images on your server that use the “@2x” naming convention. To start using high-resolution graphics on your \u00a0 \u00a0 website, simply upload images that follow this naming pattern.<\/p>\n

<div id=”logo”>
\n<img src=”\/images\/logo.png”>
\n<\/div><\/p>\n

RetinaJS will automatically look for a corresponding image located at “\/images\/logo@2x.png”. If it finds the @2x image on your server then it will load that onto your web page, effectively transforming your logo’s markup to look like this:<\/p>\n

<div id=”logo”>
\n<img src=”\/images\/logo@2x.png”>
\n<\/div><\/p>\n

About the project<\/strong><\/p>\n

Retina.js is an open source script, created by the Boulder-based digital agency Imulus. You can help them in their project on Github.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Retina graphics for Web Designs Retina Display is a brand name used by Apple for liquid crystal displays which they have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance.Now a days Retina graphics used for phones, tablets and laptops. Resourses for Retina Graphics Retina.js […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,14,7,3,15],"tags":[],"class_list":["post-303","post","type-post","status-publish","format-standard","hentry","category-design","category-news","category-resources","category-technical","category-tips"],"yoast_head":"\nEvery Designer must know about Retina graphics - Siri Innovations<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Every Designer must know about Retina graphics - Siri Innovations\" \/>\n<meta property=\"og:description\" content=\"Retina graphics for Web Designs Retina Display is a brand name used by Apple for liquid crystal displays which they have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance.Now a days Retina graphics used for phones, tablets and laptops. Resourses for Retina Graphics Retina.js […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/\" \/>\n<meta property=\"og:site_name\" content=\"Siri Innovations\" \/>\n<meta property=\"article:published_time\" content=\"2013-05-31T09:50:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-01-08T04:39:52+00:00\" \/>\n<meta name=\"author\" content=\"Venu Gopal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Venu Gopal\" \/>\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:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/\"},\"author\":{\"name\":\"Venu Gopal\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/bd7f4c313bf2bf40949e5c313c59d895\"},\"headline\":\"Every Designer must know about Retina graphics\",\"datePublished\":\"2013-05-31T09:50:52+00:00\",\"dateModified\":\"2016-01-08T04:39:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/\"},\"wordCount\":351,\"commentCount\":0,\"articleSection\":[\"Design\",\"News\",\"Resources\",\"Technical\",\"Tips\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/\",\"url\":\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/\",\"name\":\"Every Designer must know about Retina graphics - Siri Innovations\",\"isPartOf\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/#website\"},\"datePublished\":\"2013-05-31T09:50:52+00:00\",\"dateModified\":\"2016-01-08T04:39:52+00:00\",\"author\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/bd7f4c313bf2bf40949e5c313c59d895\"},\"breadcrumb\":{\"@id\":\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/siriinnovations.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Every Designer must know about Retina graphics\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#website\",\"url\":\"https:\/\/siriinnovations.com\/blog\/\",\"name\":\"Technical blog from Siri Innovations\",\"description\":\"Innovative like no other\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/siriinnovations.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/bd7f4c313bf2bf40949e5c313c59d895\",\"name\":\"Venu Gopal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/84a90652653e74a9243226558592a565ae9a5aafbee1c6b6ef15dda0abfe9ac1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/84a90652653e74a9243226558592a565ae9a5aafbee1c6b6ef15dda0abfe9ac1?s=96&d=mm&r=g\",\"caption\":\"Venu Gopal\"},\"url\":\"https:\/\/siriinnovations.com\/blog\/author\/venugopal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Every Designer must know about Retina graphics - Siri Innovations","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:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/","og_locale":"en_US","og_type":"article","og_title":"Every Designer must know about Retina graphics - Siri Innovations","og_description":"Retina graphics for Web Designs Retina Display is a brand name used by Apple for liquid crystal displays which they have a high enough pixel density that the human eye is unable to notice pixelation at a typical viewing distance.Now a days Retina graphics used for phones, tablets and laptops. Resourses for Retina Graphics Retina.js […]","og_url":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/","og_site_name":"Siri Innovations","article_published_time":"2013-05-31T09:50:52+00:00","article_modified_time":"2016-01-08T04:39:52+00:00","author":"Venu Gopal","twitter_misc":{"Written by":"Venu Gopal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#article","isPartOf":{"@id":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/"},"author":{"name":"Venu Gopal","@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/bd7f4c313bf2bf40949e5c313c59d895"},"headline":"Every Designer must know about Retina graphics","datePublished":"2013-05-31T09:50:52+00:00","dateModified":"2016-01-08T04:39:52+00:00","mainEntityOfPage":{"@id":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/"},"wordCount":351,"commentCount":0,"articleSection":["Design","News","Resources","Technical","Tips"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/","url":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/","name":"Every Designer must know about Retina graphics - Siri Innovations","isPartOf":{"@id":"https:\/\/siriinnovations.com\/blog\/#website"},"datePublished":"2013-05-31T09:50:52+00:00","dateModified":"2016-01-08T04:39:52+00:00","author":{"@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/bd7f4c313bf2bf40949e5c313c59d895"},"breadcrumb":{"@id":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/siriinnovations.com\/blog\/every-designer-must-know-about-retina-graphics\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/siriinnovations.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Every Designer must know about Retina graphics"}]},{"@type":"WebSite","@id":"https:\/\/siriinnovations.com\/blog\/#website","url":"https:\/\/siriinnovations.com\/blog\/","name":"Technical blog from Siri Innovations","description":"Innovative like no other","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/siriinnovations.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/bd7f4c313bf2bf40949e5c313c59d895","name":"Venu Gopal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/siriinnovations.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/84a90652653e74a9243226558592a565ae9a5aafbee1c6b6ef15dda0abfe9ac1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/84a90652653e74a9243226558592a565ae9a5aafbee1c6b6ef15dda0abfe9ac1?s=96&d=mm&r=g","caption":"Venu Gopal"},"url":"https:\/\/siriinnovations.com\/blog\/author\/venugopal\/"}]}},"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":15,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":464,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/posts\/303\/revisions\/464"}],"wp:attachment":[{"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siriinnovations.com\/blog\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}