{"id":2590,"date":"2015-12-16T05:00:00","date_gmt":"2015-12-16T05:00:00","guid":{"rendered":"http:\/\/www.risingtidesociety.com\/?p=2590"},"modified":"2022-08-04T14:26:59","modified_gmt":"2022-08-04T21:26:59","slug":"how-to-optimize-blog-images-for-retina-display","status":"publish","type":"post","link":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display","title":{"rendered":"How to Easily Optimize Images for Retina Display"},"content":{"rendered":"

\"Optimize<\/p>\n

A few weeks ago I received a frantic call from Natalie Franke<\/a> saying that she had just set up her new iMac and our images looked horrible<\/em> on her retina display. Not exactly the words a photographer wants to hear.<\/p>\n

Up until that time, we had been uploading images set to the width of our blogs to make sure that our sites loaded more quickly. But now, with better visual technology, it is important to optimize images for retina display.<\/p>\n

Monitors have 2x as many pixels \u2013 which means that images on a retina display are sized to be twice as large.<\/p>\n

Not everyone will notice the difference, but if you\u2019re someone who makes a living selling beautiful images, it\u2019s important to make sure your photos look great on as many devices as possible.<\/p>\n

At this point, if you\u2019re anything like me you\u2019re probably thinking \u201cwonderful, another thing I need to pay attention to when I create blog posts.\u201d As if there weren\u2019t already enough things to keep in mind, but I promise that making the switch to retina display isn\u2019t as bad as it sounds.<\/p>\n

There are two ways to make sure your images look great on retina monitors.<\/p>\n

LET CSS OPTIMIZE IMAGES<\/h2>\n

A lot of sites use CSS to automatically make sure that images stay within the space they\u2019re supposed to on a site. So for example, my site is set up to prevent images in blogposts from displaying any wider than 595px. Which means that if I upload an image that is twice that size (1190px) and let the CSS scale my image down, it will look great on both retina and non-retina displays.<\/p>\n

Loading images that are twice the size they need to be in a post feels funny and it makes the editor part of your site a little difficult to read, but when you hit publish, if you have great CSS, the image should look the correct size in the post.<\/p>\n

Some WordPress themes don\u2019t automatically size images to fit within their container \u2013 meaning that you just tried to upload an image and when you hit publish it looks something like this:<\/p>\n

If your site looks something like what you\u2019re seeing in the image above, you could try finding your theme\u2019s style sheet (or the Advanced<\/em> section of ProPhoto) and adding this bit of code to the very bottom:<\/p>\n


\n.image{
\nheight: 50%;
\nwidth: 50%;
\n}
\nimg{
\nheight: 50%;
\nwidth: 50%;
\n}
\n<\/code><\/p>\n

You may be tempted to upload full resolution images because in theory, it sounds like a lot less work than sizing your images for 2x the width that they need to be, but larger images ultimately slow your site down and can hurt your SEO.<\/p>\n

OPTION 2: ADD A PLUGIN TO OPTIMIZE IMAGES<\/h2>\n

So the second way to make sure your images look great on retina devices is to add a plugin. If your site is already set up to size images to fit correctly on the blog page, then this is something you can ignore (because running lots of plugins slows sites down too).<\/p>\n

However, if your CSS doesn\u2019t size the post images correctly and that little bit of code above sounded scarier than skydiving without a parachute, I would try installing the plugin WP Retina 2x<\/a>.<\/p>\n

To get started: Go to \u201cadd new\u201d in the plugins menu, then search for \u201cWP Retina 2x\u201d and install the plugin.<\/p>\n

Once the plugin is installed and activated, go to the \u201csettings\u201d menu tab and then down to \u201cretina.”<\/p>\n

Afterwards you\u2019ll need to go to the \u201cMedia\u201d tab and then click \u201cretina.” If you click the \u201cbulk generate\u201d button in the top right corner, the plugin will go back and automatically generate larger image sizes for all previous images.<\/p>\n

I don\u2019t trust plugins to make sure all of my images look perfect every.single.time \u2013 which is why I prefer the CSS method. But this plugin is really great for older images and any sites with CSS that doesn\u2019t set image sizes.<\/p>\n

THE WEB IS STILL CATCHING UP<\/h2>\n

The two solutions above are a really great start to solving the issue of retina displays, but it\u2019s important to keep in mind that the internet is still catching up to retina displays. Only a small percentage of people use them at this point.<\/p>\n

These solutions won\u2019t fix every image on your site \u2013 especially if you\u2019re using a slideshow or gallery plugin \u2013 but they should help make sure the images in your blog posts look great!<\/p>\n","protected":false},"excerpt":{"rendered":"

It is important to optimize images for retina display as more people use computers with better displays. Monitors now have 2x as many pixels \u2013 which means that images on a retina display are sized to be twice as large. <\/p>\n","protected":false},"author":764,"featured_media":77404,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[27],"tags":[134,154],"class_list":["post-2590","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-branding","tag-blogging","tag-how-to"],"acf":[],"featured_image_urls_v2":{"full":["https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg",597,598,false],"thumbnail":["https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8-150x150.jpeg",150,150,true],"medium":["https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8-300x300.jpeg",300,300,true],"medium_large":["https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg",597,598,false],"large":["https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg",597,598,false],"1536x1536":["https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg",597,598,false],"2048x2048":["https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg",597,598,false]},"post_excerpt_stackable_v2":"

It is important to optimize images for retina display as more people use computers with better displays. Monitors now have 2x as many pixels \u2013 which means that images on a retina display are sized to be twice as large. <\/p>\n","category_list_v2":"Marketing & branding<\/a>","author_info_v2":{"name":"Krista Jones","url":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/author\/kristaajones"},"comments_num_v2":"1 comment","yoast_head":"\nHow to Easily Optimize Images for Retina | HoneyBook<\/title>\n<meta name=\"description\" content=\"2 simple solutions with visual tutorials to help you understand how to easily optimize images for retina and make your content pop.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Easily Optimize Images for Retina | HoneyBook\" \/>\n<meta property=\"og:description\" content=\"2 simple solutions with visual tutorials to help you understand how to easily optimize images for retina and make your content pop.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display\" \/>\n<meta property=\"og:site_name\" content=\"HoneyBook\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/honeybook.co\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-16T05:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-08-04T21:26:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"597\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Krista Jones\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@honeybook\" \/>\n<meta name=\"twitter:site\" content=\"@honeybook\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Krista Jones\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display\",\"url\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display\",\"name\":\"How to Easily Optimize Images for Retina | HoneyBook\",\"isPartOf\":{\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg\",\"datePublished\":\"2015-12-16T05:00:00+00:00\",\"dateModified\":\"2022-08-04T21:26:59+00:00\",\"author\":{\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#\/schema\/person\/ddde3b7738698bda2be0b97f5eb4554a\"},\"description\":\"2 simple solutions with visual tutorials to help you understand how to easily optimize images for retina and make your content pop.\",\"breadcrumb\":{\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#primaryimage\",\"url\":\"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg\",\"contentUrl\":\"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg\",\"width\":597,\"height\":598,\"caption\":\"person optimizing images on their computer\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hbb.reliablepenguin.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Marketing & branding\",\"item\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/category\/marketing-branding\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Easily Optimize Images for Retina Display\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#website\",\"url\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/\",\"name\":\"HoneyBook\",\"description\":\"Resources to empower independent business owners\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#\/schema\/person\/ddde3b7738698bda2be0b97f5eb4554a\",\"name\":\"Krista Jones\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/618344909bce17768d9f36e35e43fdee0e8fc58612dd18fd1523150075375891?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/618344909bce17768d9f36e35e43fdee0e8fc58612dd18fd1523150075375891?s=96&d=mm&r=g\",\"caption\":\"Krista Jones\"},\"description\":\"Krista Jones is a fine art film photographer and Graphic Designer for Creative Entrepreneurs. She specializes in crafting unique brands that extend far beyond distinct typography and varying color palettes. Krista\u2019s unique understanding of visual marketing, web design, and search engine optimization has enabled her to create dynamic identities that prosper both online and in the marketplace.\",\"sameAs\":[\"https:\/\/kristaajones.com\"],\"url\":\"https:\/\/hbb.dev.reliablepenguin.com\/blog\/author\/kristaajones\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Easily Optimize Images for Retina | HoneyBook","description":"2 simple solutions with visual tutorials to help you understand how to easily optimize images for retina and make your content pop.","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:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display","og_locale":"en_US","og_type":"article","og_title":"How to Easily Optimize Images for Retina | HoneyBook","og_description":"2 simple solutions with visual tutorials to help you understand how to easily optimize images for retina and make your content pop.","og_url":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display","og_site_name":"HoneyBook","article_publisher":"https:\/\/www.facebook.com\/honeybook.co","article_published_time":"2015-12-16T05:00:00+00:00","article_modified_time":"2022-08-04T21:26:59+00:00","og_image":[{"width":597,"height":598,"url":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg","type":"image\/jpeg"}],"author":"Krista Jones","twitter_card":"summary_large_image","twitter_creator":"@honeybook","twitter_site":"@honeybook","twitter_misc":{"Written by":"Krista Jones","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display","url":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display","name":"How to Easily Optimize Images for Retina | HoneyBook","isPartOf":{"@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#primaryimage"},"image":{"@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#primaryimage"},"thumbnailUrl":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg","datePublished":"2015-12-16T05:00:00+00:00","dateModified":"2022-08-04T21:26:59+00:00","author":{"@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#\/schema\/person\/ddde3b7738698bda2be0b97f5eb4554a"},"description":"2 simple solutions with visual tutorials to help you understand how to easily optimize images for retina and make your content pop.","breadcrumb":{"@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#primaryimage","url":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg","contentUrl":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-content\/uploads\/2015\/12\/1-1_2715986e8.jpeg","width":597,"height":598,"caption":"person optimizing images on their computer"},{"@type":"BreadcrumbList","@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/how-to-optimize-blog-images-for-retina-display#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hbb.reliablepenguin.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Marketing & branding","item":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/category\/marketing-branding"},{"@type":"ListItem","position":3,"name":"How to Easily Optimize Images for Retina Display"}]},{"@type":"WebSite","@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#website","url":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/","name":"HoneyBook","description":"Resources to empower independent business owners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#\/schema\/person\/ddde3b7738698bda2be0b97f5eb4554a","name":"Krista Jones","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hbbadmin.dev.reliablepenguin.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/618344909bce17768d9f36e35e43fdee0e8fc58612dd18fd1523150075375891?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618344909bce17768d9f36e35e43fdee0e8fc58612dd18fd1523150075375891?s=96&d=mm&r=g","caption":"Krista Jones"},"description":"Krista Jones is a fine art film photographer and Graphic Designer for Creative Entrepreneurs. She specializes in crafting unique brands that extend far beyond distinct typography and varying color palettes. Krista\u2019s unique understanding of visual marketing, web design, and search engine optimization has enabled her to create dynamic identities that prosper both online and in the marketplace.","sameAs":["https:\/\/kristaajones.com"],"url":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/author\/kristaajones"}]}},"_links":{"self":[{"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/posts\/2590","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/users\/764"}],"replies":[{"embeddable":true,"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/comments?post=2590"}],"version-history":[{"count":0,"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/posts\/2590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/media\/77404"}],"wp:attachment":[{"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/media?parent=2590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/categories?post=2590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hbb.dev.reliablepenguin.com\/blog\/wp-json\/wp\/v2\/tags?post=2590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}