{"id":3000,"date":"2025-01-07T20:15:57","date_gmt":"2025-01-08T02:15:57","guid":{"rendered":"https:\/\/readme.com\/resources\/?p=3000"},"modified":"2025-01-07T20:15:58","modified_gmt":"2025-01-08T02:15:58","slug":"precision-with-every-pixel","status":"publish","type":"post","link":"https:\/\/readme.com\/resources\/precision-with-every-pixel","title":{"rendered":"Precision With Every Pixel"},"content":{"rendered":"\n<p><em>This is a guest blog post by the \u00fcber-talented&nbsp;<a href=\"http:\/\/www.adevereux.com\/?ref=blog.readme.com\">Amy Devereux<\/a>. She\u2019s been helping ReadMe make all things pretty, and is the designer behind&nbsp;<a href=\"http:\/\/www.365cons.com\/?ref=blog.readme.com\">365cons.com<\/a>.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>As you may have noticed, we use a lot of icons here at ReadMe! They\u2019re helpful to succinctly visually inform and also just to make things more fun to look at.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png\" alt=\"home icons\"\/><\/figure>\n\n\n\n<p>While right now we don\u2019t create every single one of our icons, sometimes we have a specific idea or style in mind (like those above) and existing ones just don\u2019t fit the bill. A lot of icon creation comes down to aesthetics, but there\u2019s so much more to it than that. Here\u2019s a mini behind-the-scenes look into a technical part of the process: pixel-perfection.<\/p>\n\n\n\n<p><strong>Get your grid on<\/strong><\/p>\n\n\n\n<p>The key aspect of iconography that we\u2019re referring to is grid alignment. This is particularly important for the web, because without it, icons look fuzzy or even unidentifiable in use. To put it simply, the stroke edges must precisely match up with the gridlines.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-55-PM.png\" alt=\"big house and blastoff\"\/><\/figure>\n\n\n\n<p>Even when SVGs are used, raster is the web\u2019s native tongue. Because of this, these icons are created to scale, with each grid module in the vector file translating to one pixel. We used a square 20\u00d720 pixel grid. These specs were chosen to maintain consistency with the other icons in use across our brand. There are varying viewpoints on file setup and stroke placement to achieve maximum precision (and we\u2019ll get into that more later), but really you\u2019ll usually be able to tell if something went wrong. How?<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s break it down<\/h3>\n\n\n\n<p>Essentially, any module with color in it will convert to a filled pixel\u2014at an opacity that is determined by the percentage of color in the given square. Take the strokes below as an example: the one on the left is grid-aligned, the one on the right is not.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-44-52-PM.png\" alt=\"Regular squares\"\/><\/figure>\n\n\n\n<p>Here\u2019s what happens when we look again at those same strokes, now in pixel preview:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-45-20-PM.png\" alt=\"Gradiation\"\/><\/figure>\n\n\n\n<p>Gross, right? The smaller the pixel grid, the more noticeable it is. Of course, some gradation is normal\u2014take circles, for instance. While there\u2019s no way to perfectly line up the entire perimeter of a circle with the grid, the outer edges still must align to get the best result possible.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">The even finer points<\/h3>\n\n\n\n<p>Now that we know why it\u2019s important, let\u2019s take a look some tips that make it more efficient and successful. We\u2019ll show how we use Illustrator to create an icon font. If you\u2019re not planning on making your own any time soon, feel free to skip past this minutia.<\/p>\n\n\n\n<p><strong>File setup<\/strong><\/p>\n\n\n\n<p>The main things to determine are artboard size and grid increments. As we briefly mentioned earlier, the internet doesn\u2019t seem to agree on one right method. The great thing is that there are a lot of options, the not-so-great thing is that it can be confusing and even contradictory from one article to the next. Some approaches suggest using various artboard sizes with subdivisions to determine the modules, and others recommend calculating the pixel size with Pixels Per Em (PPM).<\/p>\n\n\n\n<p>Our favorite approach is the 1:1 module-to-pixel ratio. Why? Since it doesn\u2019t require any calculations, it\u2019s universal across icon projects and easy to implement. Especially with small sizes, we\u2019ve found this to be far and above the most reliable. This is achieved by creating your artboard to scale with gridline every 1px and subdivisions of 1. Easy peasy!<\/p>\n\n\n\n<p>Create a new document.&nbsp;<em>(Psst! Pick an artboard size that\u2019s square and, if you\u2019re adding to an icon font as we did, the same dimensions so that you retain consistency. Some common sizes for icons are 16\u00d716, 20\u00d720, 32\u00d732, 40\u00d740, 60\u00d760.)<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-46-41-PM.png\" alt=\"Readme icons\"\/><\/figure>\n\n\n\n<p>Then after hitting \u2018OK\u2019 go to into Preferences &gt; Guides and Grid:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-47-06-PM.png\" alt=\"Cyan\"\/><\/figure>\n\n\n\n<p><strong>Best practices<\/strong><\/p>\n\n\n\n<p>There are a lot of little things that aid in a better output. Here\u2019s a little breakdown of some tips to please the web gods:<br>Units<\/p>\n\n\n\n<p>Set your general rulers and strokes to pixels right off the bat. Since you\u2019re optimizing for pixels, it only makes sense to work in them, right?<\/p>\n\n\n\n<p><em>Preferences &gt; Units (Or Command + ,)<\/em><\/p>\n\n\n\n<p><strong>Keyboard Increments<\/strong><\/p>\n\n\n\n<p>This controls exactly how much an object moves when you use the arrow keys. Setting it to 1px is great for control because it repositions your object at the same increment as the grid modules. Keep in mind that if an object is a half a pixel off, it will nudge it to where it aligns to the next half pixel, not necessarily the grid. Nudging has never been more deliberate.<\/p>\n\n\n\n<p><em>Preferences &gt; General (Or Command + K)<\/em><\/p>\n\n\n\n<p><strong>Snap to Grid<\/strong><\/p>\n\n\n\n<p>Snapping to the grid ensures that when you move your object it doesn\u2019t become misaligned. Because of our settings, in some instances this could be seen as duplicate the keyboard increment settings, but it really does more than that. For example, it\u2019s good to have it turned on for when you\u2019re dragging instead of nudging. It also will usually help to realign an object that may be offset. As a rule, we tend to leave it on, turning it off only if we need the program to take a chill pill from its rigidity for a second.<\/p>\n\n\n\n<p><em>View &gt; Snap to Grid (Or Shift + Command + \u2018)<\/em><\/p>\n\n\n\n<p><strong>Snap to Point<\/strong><\/p>\n\n\n\n<p>As you probably guessed, snapping to point is very similar to snapping to the grid. Turning this on tells Illustrator to magnetize to anchor points and guides. This is extremely helpful for precision, such as when joining two points. We pretty much leave this on all the time too.<\/p>\n\n\n\n<p><em>View &gt; Snap to Point (Or Option + Command + \u2018)<\/em><\/p>\n\n\n\n<p><strong>Even Stroke Weights<\/strong><\/p>\n\n\n\n<p>You\u2019ll have a much easier time with your icons if you choose stroke weights that are even numbers. In order to fully fill the pixels, an odd number means the middle of your stroke is in the middle of a pixel, while an even number means the middle can align to a grid line. If you utilize the keyboard increments and point\/grid snapping with even strokes, the process becomes almost automatic\u2014it\u2019ll snap to perfect alignment. Here\u2019s how the strokes auto-align with a 5px and 6px width, respectively:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-48-44-PM.png\" alt=\"two lines\"\/><\/figure>\n\n\n\n<p>It\u2019s easy to see how the left would cause those blurry icons. No bueno. If you\u2019re not up for manually positioning, stick to the even figures.<\/p>\n\n\n\n<p><strong>Whole Values<\/strong><\/p>\n\n\n\n<p>In icon design, whole values are really important. Like we showed above, you want the edges to match up with the gridlines exactly. If your stroke is 4.567, it\u2019s not filling the pixels evenly, which means\u2014you guessed it\u2014fuzzy icons. This is true for all elements in your file, even artboards! When it comes to iconography, decimals are from the devil.<\/p>\n\n\n\n<p><strong>Align to Pixel Grid<\/strong><\/p>\n\n\n\n<p>We have a love-hate relationship with this feature. Turning it on ensures that the dimensions of your object and their x\/y coordinates are whole numbers (yay!). That being said, it also sometimes has a mind of its own. If you turn it on after creating an object, it will try to make it conform, often extremely distorting your work. It also can be seemingly contradictory\u2014telling you that individual objects have whole values, but grouped they don\u2019t. We\u2019ve found it to be helpful on a case-by-case basis. Befriend the Transform palette so that you can manually input figures as needed, but don\u2019t overly stress about the \u2018align to pixel grid\u2019 button if you\u2019ve checked that your work is precise.<\/p>\n\n\n\n<p><em>In the Transform palette, toggle on\/off Align to Pixel Grid<\/em><\/p>\n\n\n\n<p><strong>Scale Strokes &amp; Effects<\/strong><\/p>\n\n\n\n<p>This is something you typically want to leave OFF. It controls whether the stroke\/effect remains optically or technically the same. It\u2019s a useful feature for some illustrating, but when it comes creating icons, we don\u2019t typically want the stroke weight to change. For example, let\u2019s say you draw a 10px circle with a 2px stroke. If you decide that you\u2019d rather your circle was 8px in diameter and you shrink the shape with this feature checked, the stroke will be 1.6px. Not only will this ruin weight consistency within your icons, it also breaks the \u2018whole value\u2019 rule.<\/p>\n\n\n\n<p><em>In the Transform palette, toggle off Scale Strokes &amp; Effects<\/em><\/p>\n\n\n\n<p><strong>Pixel Preview<\/strong><\/p>\n\n\n\n<p>This tool can be useful as another way to check that your icons are pixel-perfect. Turn it on, and you\u2019ll see a rasterized view of your vector file. Full disclosure: we\u2019ve found this to be a little finicky sometimes. It seems to help to only at a fixed zoom. Changing the magnification after it\u2019s on can make strokes that are correct even look wonky.<\/p>\n\n\n\n<p><strong>View &gt; Pixel Preview (Or Shift + Command + Y)<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">The final steps<\/h3>\n\n\n\n<p>The last thing to do is save out the icons and upload them to an icon font generator. Here are some things to keep in mind:<\/p>\n\n\n\n<p><strong>Make a Single Shape<\/strong><\/p>\n\n\n\n<p>When you\u2019re ready to export, remember to outline and merge any strokes so that it will be read as a fill. This not only makes your finished product more clean, it\u2019s also necessary to make an icon font.&nbsp;<em>(Psst! But of course save the stroked version of the file in case you ever want to make changes.)<\/em><\/p>\n\n\n\n<p><em>Object &gt; Path &gt; Outline Stroke<\/em><\/p>\n\n\n\n<p><em>In the Pathfinder palette, use the first Shape Mode: Unite<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-51-05-PM.png\" alt=\"The one sticking out of the side\"\/><\/figure>\n\n\n\n<p><strong>SVGs and Potential Problems<\/strong><\/p>\n\n\n\n<p>Save out each artboard as it\u2019s own SVG. If you run into an error where it looks like your icons edges are pointy on export, double check your file (optically and in your Transform palette) to make sure that you have proper alignment and whole numbers. If you\u2019re sure you\u2019ve set up everything correctly and that it\u2019s just being irrationally picky, adjust the decimal places in the SVG settings\u20143 places will usually fix it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-53-48-PM.png\" alt=\"a long PSD picture\"\/><\/figure>\n\n\n\n<p><strong>Font-ifying<\/strong><\/p>\n\n\n\n<p>To make them into a font, just upload the SVGs to an icon font app \u2014we use Icomoon. Their steps to are really easy to follow and implement. Just make sure that, once you\u2019ve created a set, the app\u2019s grid settings parallel whatever size you used in Illustrator.<\/p>\n\n\n\n<p><em>Next to the set, Hamburger &gt; Get Info &gt; Reset Grid Size<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-58-48-PM.png\" alt=\"Red Get Info\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">And that\u2019s it!<\/h3>\n\n\n\n<p>Now that you know the technical side of iconography, experiment with the look and feel until you find a style that works for you. Just remember that icons by nature are intended to be simple and communicative, so it isn\u2019t a place to get tooooo detailed.<\/p>\n\n\n\n<p>Conforming to a grid could be a little more challenging than freestyle, but it\u2019s definitely worth it for pixels that shine. Happy iconing!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a guest blog post by the \u00fcber-talented&nbsp;Amy Devereux. She\u2019s been helping ReadMe make all things pretty, and is the designer behind&nbsp;365cons.com. As you may have noticed, we use a lot of icons here at ReadMe! They\u2019re helpful to succinctly visually inform and also just to make things more fun to look at. While [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[22],"tags":[],"ppma_author":[2],"class_list":["post-3000","post","type-post","status-publish","format-standard","hentry","category-api-tips"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Pixel-Perfect Documentation: Why Design Details Matter<\/title>\n<meta name=\"description\" content=\"Discover how precision in design transforms API documentation into a seamless, user-friendly experience that developers love.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/readme.com\/resources\/precision-with-every-pixel\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pixel-Perfect Documentation: Why Design Details Matter\" \/>\n<meta property=\"og:description\" content=\"Discover how precision in design transforms API documentation into a seamless, user-friendly experience that developers love.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/readme.com\/resources\/precision-with-every-pixel\" \/>\n<meta property=\"og:site_name\" content=\"ReadMe: Resource Library\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-08T02:15:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-08T02:15:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png\" \/>\n<meta name=\"author\" content=\"readmedev\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"readmedev\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/readme.com\/resources\/precision-with-every-pixel\",\"url\":\"https:\/\/readme.com\/resources\/precision-with-every-pixel\",\"name\":\"Pixel-Perfect Documentation: Why Design Details Matter\",\"isPartOf\":{\"@id\":\"https:\/\/readme.com\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/readme.com\/resources\/precision-with-every-pixel#primaryimage\"},\"image\":{\"@id\":\"https:\/\/readme.com\/resources\/precision-with-every-pixel#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png\",\"datePublished\":\"2025-01-08T02:15:57+00:00\",\"dateModified\":\"2025-01-08T02:15:58+00:00\",\"author\":{\"@id\":\"https:\/\/readme.com\/resources\/#\/schema\/person\/cf2f75bdb1d0398bebccfae9675a6418\"},\"description\":\"Discover how precision in design transforms API documentation into a seamless, user-friendly experience that developers love.\",\"breadcrumb\":{\"@id\":\"https:\/\/readme.com\/resources\/precision-with-every-pixel#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/readme.com\/resources\/precision-with-every-pixel\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/readme.com\/resources\/precision-with-every-pixel#primaryimage\",\"url\":\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png\",\"contentUrl\":\"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/readme.com\/resources\/precision-with-every-pixel#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/readme.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Precision With Every Pixel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/readme.com\/resources\/#website\",\"url\":\"https:\/\/readme.com\/resources\/\",\"name\":\"ReadMe: Resource Library\",\"description\":\"Making API documentation better for everyone\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/readme.com\/resources\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/readme.com\/resources\/#\/schema\/person\/cf2f75bdb1d0398bebccfae9675a6418\",\"name\":\"readmedev\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/readme.com\/resources\/#\/schema\/person\/image\/8b12c5a3a20906722873c146dee0bd9b\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d5d17a7fdf698ca54de2619cb66e3b1608c9056ad901d2f23e55a4ec6d57a239?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d5d17a7fdf698ca54de2619cb66e3b1608c9056ad901d2f23e55a4ec6d57a239?s=96&d=mm&r=g\",\"caption\":\"readmedev\"},\"sameAs\":[\"https:\/\/readme.com\/resources\"],\"url\":\"https:\/\/readme.com\/resources\/author\/readmedev\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pixel-Perfect Documentation: Why Design Details Matter","description":"Discover how precision in design transforms API documentation into a seamless, user-friendly experience that developers love.","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:\/\/readme.com\/resources\/precision-with-every-pixel","og_locale":"en_US","og_type":"article","og_title":"Pixel-Perfect Documentation: Why Design Details Matter","og_description":"Discover how precision in design transforms API documentation into a seamless, user-friendly experience that developers love.","og_url":"https:\/\/readme.com\/resources\/precision-with-every-pixel","og_site_name":"ReadMe: Resource Library","article_published_time":"2025-01-08T02:15:57+00:00","article_modified_time":"2025-01-08T02:15:58+00:00","og_image":[{"url":"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png"}],"author":"readmedev","twitter_card":"summary_large_image","twitter_misc":{"Written by":"readmedev","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/readme.com\/resources\/precision-with-every-pixel","url":"https:\/\/readme.com\/resources\/precision-with-every-pixel","name":"Pixel-Perfect Documentation: Why Design Details Matter","isPartOf":{"@id":"https:\/\/readme.com\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/readme.com\/resources\/precision-with-every-pixel#primaryimage"},"image":{"@id":"https:\/\/readme.com\/resources\/precision-with-every-pixel#primaryimage"},"thumbnailUrl":"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png","datePublished":"2025-01-08T02:15:57+00:00","dateModified":"2025-01-08T02:15:58+00:00","author":{"@id":"https:\/\/readme.com\/resources\/#\/schema\/person\/cf2f75bdb1d0398bebccfae9675a6418"},"description":"Discover how precision in design transforms API documentation into a seamless, user-friendly experience that developers love.","breadcrumb":{"@id":"https:\/\/readme.com\/resources\/precision-with-every-pixel#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/readme.com\/resources\/precision-with-every-pixel"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/readme.com\/resources\/precision-with-every-pixel#primaryimage","url":"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png","contentUrl":"https:\/\/blog.readme.com\/content\/images\/2016\/06\/Screen-Shot-2016-06-16-at-4-43-35-PM-2.png"},{"@type":"BreadcrumbList","@id":"https:\/\/readme.com\/resources\/precision-with-every-pixel#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/readme.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Precision With Every Pixel"}]},{"@type":"WebSite","@id":"https:\/\/readme.com\/resources\/#website","url":"https:\/\/readme.com\/resources\/","name":"ReadMe: Resource Library","description":"Making API documentation better for everyone","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/readme.com\/resources\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/readme.com\/resources\/#\/schema\/person\/cf2f75bdb1d0398bebccfae9675a6418","name":"readmedev","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/readme.com\/resources\/#\/schema\/person\/image\/8b12c5a3a20906722873c146dee0bd9b","url":"https:\/\/secure.gravatar.com\/avatar\/d5d17a7fdf698ca54de2619cb66e3b1608c9056ad901d2f23e55a4ec6d57a239?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d5d17a7fdf698ca54de2619cb66e3b1608c9056ad901d2f23e55a4ec6d57a239?s=96&d=mm&r=g","caption":"readmedev"},"sameAs":["https:\/\/readme.com\/resources"],"url":"https:\/\/readme.com\/resources\/author\/readmedev"}]}},"authors":[{"term_id":2,"user_id":1,"is_guest":0,"slug":"readmedev","display_name":"readmedev","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/f827600cb59eb7b39ae598802b917c6e5fba7a7e93daa9bd5ef3a7ef04af8d9f?s=96&d=mm&r=g","first_name":"Ryan","last_name":"parker","position":"","slogan":"","description":""}],"_links":{"self":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/posts\/3000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/comments?post=3000"}],"version-history":[{"count":0,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/posts\/3000\/revisions"}],"wp:attachment":[{"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/media?parent=3000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/categories?post=3000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/tags?post=3000"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/readme.com\/resources\/wp-json\/wp\/v2\/ppma_author?post=3000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}