{"id":13732,"date":"2024-04-10T00:40:27","date_gmt":"2024-04-10T07:40:27","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=13732"},"modified":"2024-09-09T19:42:17","modified_gmt":"2024-09-10T02:42:17","slug":"responsive-images-the-designers-definitive-guide","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/","title":{"rendered":"Responsive Images \u2013 The Definitive Guide"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image-1024x512.png\" alt=\"responsive image\" class=\"wp-image-52686\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Web design isn\u2019t always cheap. But of all web design costs to the designer, we should first consider the <\/span><i><span style=\"font-weight: 400;\">user\u2019s<\/span><\/i><span style=\"font-weight: 400;\"> costs.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Mobile users <\/span><a href=\"http:\/\/blogs.howstuffworks.com\/brainstuff\/what-does-a-gigabyte-of-internet-service-really-cost-a-look-at-the-worst-case-scenario.htm\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">often pay for every byte they download<\/span><\/a><span style=\"font-weight: 400;\"> (and upload) away from wifi. HTML and CSS files, while getting larger every year, aren\u2019t as large as hefty JPG, PNGs and animated GIFs. Conscientious designers know that best practice includes making websites and apps that download as quickly as possible. It\u2019s like trimming out extra adverbs from copy, or extra div elements from markup. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">If users don\u2019t need pixels, don\u2019t send them.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As we\u2019ve seen, thinking \u201cresponsive\u201d is more than slapping media queries into our code. Responsive images have their own set of challenges that designers must overcome. To make sites that work well and look great on a variety of screens, they need a smart strategy for images from the beginning. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Difficult? Perhaps. Worth the effort? Yes. A picture may be worth a thousand words, but if it weighs a million bytes, then users may give up before the picture downloads.<\/span><\/p>\n\n\n\n<p>Build prototypes fast with UXPin, a code-first prototyping solution that makes staying consistent easy across all teams, not just design. Let your developers access specs and share a code-based design system with them. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-choosing-the-right-format-for-ui\">Choosing the right format for UI<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">JPG, SVG, GIF and PNG (and PNG-24) \u2014 anyone new to web design may confuse the three. That\u2019s not surprising when even seasoned veterans opt for JPG when a SVG would do, or default for PNG-24 instead of PNG-8.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-jpg\"><b>JPG<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Or JPEG, short for Joint Photographic Experts Group, was developed in 1991 and published in 1992 as a means to standardize pictures transmitted over the internet. Bandwidth was at a premium, so users prefered files that showed more picture for fewer bytes. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The JPG format uses lossy compression, meaning that once applied, an image can never be fully decompressed back to the original quality. It trades smaller files for reduced quality on a scale of 0 \u2013&nbsp;100. Oddly, files with 100% JPG compression have the highest quality and the worst file size. 0% compression yields the smallest files with the worst quality.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"240\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image01-7.png\" alt=\"image01\" class=\"wp-image-13733\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Artifacts are parts of an image that JPG compression changes for the sake of file size. They resemble blocks of homogenous color, when visible, as if herding colors into areas about 20 pixels square. Hard edges in images are the first victims of artifacts. That, and because JPG compression can look natural on complex images, means that this format is ideal for photos.<br><\/span><br><span style=\"font-weight: 400;\"><strong>Bottom line<\/strong>: JPG compression works well for complicated images with lots of detail, like photos.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-png-8-bit\"><b>PNG (8-bit)<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Unlike JPG, Portable Network Graphics files use lossless compression that doesn\u2019t compound as the file is opened and resaved. Instead, PNG-8 files include a list of every unique color they use. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">And by unique, I mean <\/span><i><span style=\"font-weight: 400;\">unique<\/span><\/i><span style=\"font-weight: 400;\"> as in #FFFFFF is not #FFFFFE, although to the unaided human eye they\u2019re indistinguishable. Each pixel is assigned to a color in the file\u2019s list, reducing the need for identical pixels to waste precious bytes reproducing what\u2019s already been said.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"400\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image04-5.png\" alt=\"image04\" class=\"wp-image-13738\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image04-5.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image04-5-450x300.png 450w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">If the first hundred pixels use RGB(255,255,255), there\u2019s no need to say so \u2014&nbsp;just state that pixels 1\u2013500 belong to color #1. For this reason the PNG format is great at compressing images with perfectly flat colors. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><strong>Bottom line:<\/strong> The PNG-8 format can hold up to 256 unique colors in its list, called a <\/span><i><span style=\"font-weight: 400;\">color table.<\/span><\/i><span style=\"font-weight: 400;\"> It can also make pixels fully transparent. These facts make PNG-8 ideal for today\u2019s trendy \u201cflat color\u201d look.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-png-24-bit\"><b>PNG (24-bit)<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Files that use PNG\u2019s other variety, PNG-24, look great because they use no compression. Nor do they use a color table. Every detail is preserved when saving PNG-24 files \u2026 and that\u2019s the problem. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Opacity is another problem. While pixels in PNG-8\u2019s images can be transparent, it\u2019s all or nothing. Either you see them or you don\u2019t. <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"395\" height=\"281\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image00-9.png\" alt=\"image00\" class=\"wp-image-13734\"\/><\/figure>\n\n\n\n<p><strong>Bottom line:&nbsp;<\/strong>Pixels in PNG-24 files can have <i>partial<\/i> opacity, meaning they tint elements behind them. Again, at the expense of file size.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gif\"><b>GIF<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Graphical Interchange Format, or GIF, resembles PNG-8 in many ways. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">It\u2019s universally accepted by every browser. It\u2019s established, having been around since 1987 (somewhat younger, PNG debuted in 1996). GIF uses color tables. It\u2019s compression is slightly less efficient, on average, than PNG. And it can make its pixels completely transparent.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Where GIFs shine is their ability to hold more than one \u201cimage\u201d per file, and show them sequentially. That is, GIF supports animation. Animated GIF files usually find their way into content more than design, as their animations can\u2019t be started and stopped \u2014&nbsp;they\u2019re not truly interactive. That and their slightly-higher file sizes mean that designers often prefer PNG over GIF for flat-color images.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><strong>Bottom line:&nbsp;<\/strong>If you need simple animations, GIF is the way to go. Otherwise you\u2019re probably better off with PNG-8\u2019s slightly more efficient compression scheme for simple images (like flat-color illustrations) or JPEG for complicated images (like photos).<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-squeezing-every-byte\"><b>Squeezing Every Byte<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Compressing image files \u2014\u00a0the act of reducing file size by eliminating redundant data or altering the image for easier downloads \u2014 is crucial to making websites load quickly. Fast websites, in turn, <\/span><a href=\"https:\/\/econsultancy.com\/blog\/10936-site-speed-case-studies-tips-and-tools-for-improving-your-conversion-rate\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">earn more users<\/span><\/a><span style=\"font-weight: 400;\">. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Most image editors like Photoshop, Sketch and Pixelmator export compressed, web-friendly files without fuss. But they\u2019re not always ideal. Other tools can help compress images even further.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-compression-services\"><b>Compression Services<\/b><\/h3>\n\n\n\n<p><strong>1. <a href=\"http:\/\/compressjpeg.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Compress JPEG<\/a><\/strong><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As the name implies, this free, online service takes extra bytes out of any JPG file without sacrificing quality.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"827\" height=\"550\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03.jpg\" alt=\"image03\" class=\"wp-image-13737\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03.jpg 827w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03-451x300.jpg 451w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image03-768x511.jpg 768w\" sizes=\"auto, (max-width: 827px) 100vw, 827px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Compress JPG slimmed down the above image, saved in Photoshop at 70%, from 217KB to a svelte 160KB. Quality remains untouched. <\/span><\/p>\n\n\n\n<p><b>2.\u00a0<a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">TinyPNG<\/a><\/b><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"> Another free service squeezes 8-bit and 24-bit PNG files for faster load times.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1544\" height=\"382\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-9.png\" alt=\"image02\" class=\"wp-image-13736\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-9.png 1544w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-9-700x173.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-9-768x190.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image02-9-1024x253.png 1024w\" sizes=\"auto, (max-width: 1544px) 100vw, 1544px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">TinyPNG reduced the above image from 16KB to 12KB by eliminating nearly redundant colors in its color table \u2014 without affecting its quality. <\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-much-is-too-much-or-too-little\">How much is too much \u2026 or too little?<\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Although it varies per image, our goal is to get the best quality image in as few bytes as possible. At some point, we trim too much out. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">But how much? Is there a sweet spot for compression? <\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-for-jpgs\"><b>For JPGs<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">To find out, we saved the crowd photo above with increments of JPG compression. Results ranged from 45KB at 0% compression to 479KB at 100%. Contrary to what the term suggests, remember that the highest compressed JPGs have the highest quality (and largest file size). <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"680\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image07-5.png\" alt=\"image07\" class=\"wp-image-13741\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image07-5.png 705w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image07-5-311x300.png 311w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">This chart shows a dramatic decrease in the higher compression ranges. Just dropping the quality from 100% to 70% reduced the file size by almost half \u2014 a real bargain. The lower compression percentages, though, didn\u2019t see as much of a difference. Although bytes fell from 0 \u2013 20%, we saw quality drop too quickly to be worth the savings. <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"267\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image05-4.png\" alt=\"image05\" class=\"wp-image-13739\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">The image was 45KB at 0% compression (left) and 94KB at 30% compression (right). Although it halved the file size, the increase in artifacts, or blocky areas where JPG compression takes effect, wasn\u2019t worth the savings.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><strong>Best practice<\/strong>: Don&#8217;t compress JPG files higher than 70%, or lower than 20%. This is a guideline rather than a hard rule, but we\u2019ve found it the 20\u201370 range covers most cases.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-for-pngs\"><b>For PNGs<\/b><\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">The story gets more complicated when we look at PNG files. We ran the same experiment on this graphic:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"317\" height=\"408\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image08-2.png\" alt=\"image08\" class=\"wp-image-13742\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image08-2.png 317w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image08-2-233x300.png 233w\" sizes=\"auto, (max-width: 317px) 100vw, 317px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Notice that these colors aren\u2019t strictly flat. There\u2019s a fine gradient over the entire composition. To account for that, we need dithering: a pattern of dots that simulate subtle gradients. <\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"401\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image06-3.png\" alt=\"image06\" class=\"wp-image-13740\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image06-3.png 400w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image06-3-299x300.png 299w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image06-3-200x200.png 200w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Unlike JPG, the PNG format doesn\u2019t use percentages. The number of colors in its color table determine its quality and, to an extent, its file size. With 88% dithering, the results were, well \u2026<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"538\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image09-2.png\" alt=\"image09\" class=\"wp-image-13743\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image09-2.png 705w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image09-2-393x300.png 393w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">In general we saw a relationship between the number of colors and file size. But not much. Photoshop struggled to find the best patterns with limited color tables. In fact, 40 colors had about the same number of bytes as 25, meaning the same file size but with much higher quality.<\/span><\/p>\n\n\n\n<p><b>Best practice:<\/b><span style=\"font-weight: 400;\"> For best results when squeezing every byte out of a PNG, the best approach is to experiment with different color tables. Unfortunately the right amount is a subjective matter that varies per image. When it looks \u201cright\u201d&nbsp;is up to you.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-svg\"><b>SVG<\/b><\/h2>\n\n\n\n<p><a href=\"http:\/\/www.smashingmagazine.com\/2014\/03\/rethinking-responsive-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Scalable Vector Graphics<\/span><\/a><span style=\"font-weight: 400;\">, or SVG, use lines instead of pixels \u2014\u00a0vectors instead of raster images \u2014 to display line art. SVGs are actually a form of XML, easily created in programs like Inkscape and Adobe Illustrator.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">SVG files can generate gradients without dithering, and scale up to fit containers of any size from older smartphones to widescreen TVs. They don\u2019t lose resolution because, as vectors, browsers connect the dots on the fly. They can be animated with JavaScript. And instead of files that must be downloaded separately, which ties up time and server power, SVG can be embedded right in HTML documents.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"502\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image10-3.png\" alt=\"image10\" class=\"wp-image-13744\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image10-3.png 1200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image10-3-700x293.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image10-3-768x321.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/04\/image10-3-1024x428.png 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p><i><span style=\"font-weight: 400;\">Above: vector art (left) scales up well. On the other hand, raster art (right) looks blocky and pixelated.<\/span><\/i><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">But like PNGs and GIFs, SVGs suffer as images become more complex. They\u2019re terrible for photos and grow quickly in file size as they gain points and curves.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><strong>Best practice<\/strong>: If you\u2019re looking for <\/span><a href=\"http:\/\/designmodo.com\/flat-design-2-examples\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">the flat 2.0 look<\/span><\/a><span style=\"font-weight: 400;\">, with its sharp lines and gentle gradients, and aim for recent browsers (<\/span><a href=\"http:\/\/caniuse.com\/#search=svg\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">IE8 is out of luck<\/span><\/a><span style=\"font-weight: 400;\">), SVGs are the way to go.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-code-considerations\"><b>Code Considerations<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">Aside from image files themselves, we can do lots with code to make pixels respond well to different situations. <\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-essential-css-properties\">Essential CSS Properties<\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">One of the most common \u2014 and most reliable \u2014 solutions is to set a bit of CSS:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">img { max-width: 100%; }<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">This selector and property makes most images fit into their containers. For example, if a media query sets a wrapper to 300 pixels in width, then no image inside that wrapper will exceed 300 pixels. This technique has excellent support across modern browsers, which is why you\u2019ll find it in many responsive websites today.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-future-html-image-elements\">Future HTML Image Elements<\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Today we\u2019re limited to background images with CSS and the &lt;img&gt; element. But when (and if) implemented, a new technology will go a long way to making images as responsive as page layouts in responsive web design.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The experimental &lt;picture&gt; element contains one or more &lt;source&gt; child element that uses media queries to declare when they should load. Browsers replace the src attribute of an &lt;img&gt; element within &lt;picture&gt; with the relevant source, if any. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">For example:<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">&lt;picture alt=&#8221;Descriptive text fallback&#8221;&gt;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"> &nbsp;&lt;img src=&#8221;sample-default.png&#8221;&gt;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"> &nbsp;&lt;source srcset=&#8221;sample-large.png&#8221; media=&#8221;(min-width: 640px)&#8221;&gt;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"> &nbsp;&lt;source srcset=&#8221;sample-small.png&#8221; media=&#8221;(max-width: 639px)&#8221;&gt;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">&lt;\/picture&gt;<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The code above would replace sample-default.png with either a large or small variation, depending on the image\u2019s container\u2019s width.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">As a bonus, browsers that don\u2019t support &lt;picture&gt; will still read the default &lt;img&gt; element as normal. That\u2019s good news because, at the time of this writing, these elements are not universally accepted \u2014 in fact, <\/span><a href=\"http:\/\/caniuse.com\/#search=picture\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">few modern browsers support them today<\/span><\/a><span style=\"font-weight: 400;\">. But support for &lt;picture&gt; and &lt;source&gt; is growing, and smart designers will keep an eye out for their usage in the future.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-rendering\">Browser rendering<\/h3>\n\n\n\n<p><span style=\"font-weight: 400;\">Sometimes the best image is none at all. Modern browsers are capable of rendering their own graphics, including gradients, animations, bezier vectors, shadows and geometric shapes. With a little creativity, <\/span><a href=\"https:\/\/css-tricks.com\/stripes-css\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">we can even make stripes<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Creating images in browsers puts the burden of visuals on the user\u2019s end. It doesn\u2019t require downloading any image files, which saves bandwidth and time. But it does require the browser to have certain capabilities. <\/span><\/p>\n\n\n\n<p><b>Best practice<\/b><span style=\"font-weight: 400;\">: Use browser rendering for aesthetics, like background colors and fancy borders, but don\u2019t rely on it for content. Always test your designs for readability without fancy CSS3 tricks, or even without CSS at all, to see how gracefully it degrades on less-capable browsers.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-implications-for-ui-design\"><b>Implications for UI Design<\/b><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">From icons to backgrounds to content, there\u2019s no doubt that images are crucial for good user interfaces. But responsive images face many challenges including bandwidth concerns and sizing issues. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In a perfect world we\u2019d have the ability to either crop an image for smaller viewports, focusing on the most important parts, or the ability to upload different images for different breakpoints. It <\/span><i><span style=\"font-weight: 400;\">is<\/span><\/i><span style=\"font-weight: 400;\"> possible to do so. <\/span><a href=\"http:\/\/thenewcode.com\/722\/ArtDirected-Adaptive-Images-With-SVG-and-JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">Workarounds<\/span><\/a> <a href=\"http:\/\/www.smashingmagazine.com\/2013\/07\/simple-responsive-images-with-css-background-images\/\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"font-weight: 400;\">exist<\/span><\/a><span style=\"font-weight: 400;\">, and we look forward to &lt;picture&gt; and srcset. Until then the best-practice approach is to test your images at various sizes to make sure they\u2019re readable on various devices and browsers.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Designers concerned with responsive web design must consider images in their work. Using the right file format, optimizing compression (but not too much) and watching <\/span><span style=\"font-weight: 400;\">future technologies<\/span><span style=\"font-weight: 400;\"> go a long way to making websites load quickly and look great on screens of any size, resolution or orientation. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">It all comes down to one question: what serves the user best<\/span>. Create UIs with images, videos, and GIFs that come from your design library. Try UXPin, all-in-one design solution for code-first UI design. Build UIs 8.6x faster and copy production-ready code without translating vectors to code. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Web design isn\u2019t always cheap. But of all web design costs to the designer, we should first consider the user\u2019s costs. Mobile users often pay for every byte they download (and upload) away from wifi. HTML and CSS files, while getting larger every year, aren\u2019t as large as hefty JPG, PNGs and animated GIFs. Conscientious<\/p>\n","protected":false},"author":3,"featured_media":52686,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,15,4],"tags":[],"class_list":["post-13732","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-responsive-web-design","category-ui-design"],"yoast_title":"","yoast_metadesc":"A practical guide to responsive image best practices. By a responsive designer with 20+ years web experience.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Responsive Images \u2013 The Definitive Guide | UXPin<\/title>\n<meta name=\"description\" content=\"A practical guide to responsive image best practices. By a responsive designer with 20+ years web experience.\" \/>\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.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Images \u2013 The Definitive Guide\" \/>\n<meta property=\"og:description\" content=\"A practical guide to responsive image best practices. By a responsive designer with 20+ years web experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-10T07:40:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T02:42:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"36 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Responsive Images \u2013 The Definitive Guide\",\"datePublished\":\"2024-04-10T07:40:27+00:00\",\"dateModified\":\"2024-09-10T02:42:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/\"},\"wordCount\":2211,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/responsive-image.png\",\"articleSection\":[\"Blog\",\"Responsive Web Design\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/\",\"name\":\"Responsive Images \u2013 The Definitive Guide | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/responsive-image.png\",\"datePublished\":\"2024-04-10T07:40:27+00:00\",\"dateModified\":\"2024-09-10T02:42:17+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"A practical guide to responsive image best practices. By a responsive designer with 20+ years web experience.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/responsive-image.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/responsive-image.png\",\"width\":1200,\"height\":600,\"caption\":\"responsive image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/responsive-images-the-designers-definitive-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Images \u2013 The Definitive Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Responsive Images \u2013 The Definitive Guide | UXPin","description":"A practical guide to responsive image best practices. By a responsive designer with 20+ years web experience.","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.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Images \u2013 The Definitive Guide","og_description":"A practical guide to responsive image best practices. By a responsive designer with 20+ years web experience.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/","og_site_name":"Studio by UXPin","article_published_time":"2024-04-10T07:40:27+00:00","article_modified_time":"2024-09-10T02:42:17+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"36 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Responsive Images \u2013 The Definitive Guide","datePublished":"2024-04-10T07:40:27+00:00","dateModified":"2024-09-10T02:42:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/"},"wordCount":2211,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image.png","articleSection":["Blog","Responsive Web Design","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/","name":"Responsive Images \u2013 The Definitive Guide | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image.png","datePublished":"2024-04-10T07:40:27+00:00","dateModified":"2024-09-10T02:42:17+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"A practical guide to responsive image best practices. By a responsive designer with 20+ years web experience.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/04\/responsive-image.png","width":1200,"height":600,"caption":"responsive image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Responsive Images \u2013 The Definitive Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=13732"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13732\/revisions"}],"predecessor-version":[{"id":54473,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/13732\/revisions\/54473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/52686"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=13732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=13732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=13732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}