{"id":7462,"date":"2019-04-20T07:49:42","date_gmt":"2019-04-20T07:49:42","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=7462"},"modified":"2019-07-15T12:16:57","modified_gmt":"2019-07-15T12:16:57","slug":"how-to-add-retina-images-in-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-add-retina-images-in-amp\/","title":{"rendered":"How to Add Retina Images in AMP"},"content":{"rendered":"\n<p>Retina Images loads a larger image if the pixel density of the device is greater than 1. Tell the browser specifically which image to show at which point and time. Retina display requires two times as many pixels to render the same image. So the 200px by 200px space is actually 400px by 400px on a Retina display.&nbsp; <\/p>\n\n\n\n<p><strong>Follow the simple steps:<\/strong><\/p>\n\n\n\n<p><strong>1.<\/strong> First go to the <strong>WordPress admin area<\/strong> -&gt; <strong>AMP option panel<\/strong> -&gt; <strong>Settings<\/strong> -&gt; <strong>Advance settings<\/strong>.  <\/p>\n\n\n\n<p>Scroll down a little to see these option.<\/p>\n\n\n\n<p><strong>2. Retina Images: <\/strong>Enable if your current images looking blurred on Apple Devices.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" width=\"696\" height=\"209\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/6-1.png\" alt=\"\" class=\"wp-image-7501\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/6-1.png 696w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/6-1-300x90.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/6-1-50x15.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/6-1-60x18.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2019\/04\/6-1-100x30.png 100w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><\/figure>\n\n\n\n<p> <strong>3. Retina Images Resolution: <\/strong>Select the Resolution.<\/p>\n\n\n\n<p><strong>4.<\/strong> Click on save changes button and it will be displayed on your AMP pages.<br><\/p>\n\n\n\n<p style=\"background-color: #ffdddd; border-left: 2px solid #f44336;padding:10px;\" > <strong > Note:<\/strong>  If you don\u2019t use retina images, your normal images it will sometimes appear blurry on high-resolution displays. <\/p>\n\n\n\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Retina Images loads a larger image if the pixel density of the device is greater than 1. Tell the browser specifically which image to show at which point and time. Retina display requires two times as many pixels to render the same image. So the 200px by 200px space is&#8230;<\/p>\n","protected":false},"author":18,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[34],"ht-kb-tag":[],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/7462"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=7462"}],"version-history":[{"count":21,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/7462\/revisions"}],"predecessor-version":[{"id":12597,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/7462\/revisions\/12597"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=7462"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=7462"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=7462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}