{"id":5970,"date":"2010-03-25T06:01:45","date_gmt":"2010-03-25T13:01:45","guid":{"rendered":"http:\/\/css-tricks.com\/?p=5970"},"modified":"2024-10-30T11:35:09","modified_gmt":"2024-10-30T17:35:09","slug":"data-uris","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/data-uris\/","title":{"rendered":"Data\u00a0URIs"},"content":{"rendered":"\n<p>Did you know that you don&#8217;t have to link to an external image file when using an <code>&lt;img&gt;<\/code> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with <strong>data URIs<\/strong>. <\/p>\n\n\n\n<p>(It&#8217;s equally correct to say &#8220;Data URL&#8221;, which I think I prefer.)<\/p>\n\n\n\n<p>With CSS, it looks like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li {\n  background:\n    url(data:image\/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o\/XBs\/fNwfjZ0frl3\/zy7\/\/\/\/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)\n    no-repeat\n    left center;\n  padding: 5px 0 5px 25px;\n}<\/code><\/pre>\n\n\n\n<p>With HTML, it looks like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;img src=\"data:image\/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o\/XBs\/fNwfjZ0frl3\/zy7\/\/\/\/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7\" alt=\"star\" width=\"16\" height=\"16\"><\/code><\/pre>\n\n\n\n<p>The format, to be specific:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">data:[&lt;mime type>][;charset=&lt;charset>][;base64],&lt;encoded data><\/code><\/pre>\n\n\n\n<p>Basically, a super long string of gibberish characters. It&#8217;s not gibberish to the browser though of course. This data is interpreted as the type of file you are saying it is.<\/p>\n\n\n\n<p>You can see a <a href=\"https:\/\/css-tricks.com\/examples\/DataURIs\/\">really dumb demo page here<\/a>. I&#8217;ll be covering the important parts next.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 id=\"why-would-you-do-this\" class=\"wp-block-heading\">Why would you do this?<\/h3>\n\n\n\n<p>The biggest reason: it saves HTTP Requests. Other than pure document size, this is the #1 factor concerning how fast a page loads. Less = better.<\/p>\n\n\n\n<h3 id=\"how-do-you-get-the-code\" class=\"wp-block-heading\">How do you get the code?<\/h3>\n\n\n\n<p>Use this <a href=\"https:\/\/websemantics.uk\/tools\/image-to-data-uri-converter\/\" rel=\"noopener\">online conversion tool<\/a>. It&#8217;s the nicest one I have found. Here&#8217;s another <a href=\"http:\/\/jpillora.com\/base64-encoder\/\" rel=\"noopener\">drag and drop one<\/a>.<\/p>\n\n\n\n<p>Also note that base64 isn&#8217;t the only possible format for a data URI and sometimes it <a href=\"https:\/\/css-tricks.com\/probably-dont-base64-svg\/\">isn&#8217;t even a good idea<\/a>. ASCII is another, where the code is essentially URL encoded, or UTF-8.<\/p>\n\n\n\n<h3 id=\"browser-compatibility\" class=\"wp-block-heading\">Browser Compatibility<\/h3>\n\n\n\n<p>Data URI&#8217;s don&#8217;t work in IE 5-7, but are supported in IE 8. You could:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use an <a href=\"https:\/\/css-tricks.com\/how-to-create-an-ie-only-stylesheet\/\">IE-only stylesheet<\/a> to put images in, or,<\/li>\n\n\n\n<li>Use it only for progressive enhancement type stuff where having no image is perfectly acceptable, or,<\/li>\n\n\n\n<li>Not care<\/li>\n\n\n\n<li><a href=\"http:\/\/www.phpied.com\/mhtml-when-you-need-data-uris-in-ie7-and-under\/\" rel=\"noopener\">Read this article<\/a> about an alternate technique that does work.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"important-notes\" class=\"wp-block-heading\">Important Notes<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Size of embedded code is somewhat larger than size of resource by itself. <a href=\"https:\/\/css-tricks.com\/snippets\/htaccess\/active-gzip-compression\/\">GZip compression<\/a> will help.<\/li>\n\n\n\n<li>IE8 has the lowest maximum data URI size of 32768 Bytes. (HEY?!?! There is that <a href=\"https:\/\/css-tricks.com\/32766\/\">crazy number<\/a> again.)<\/li>\n\n\n\n<li>It&#8217;s hard to maintain site with embedded data URIs for everything. It&#8217;s easier to just update an image and replace it.<\/li>\n\n\n\n<li>If you are using PHP (or <a href=\"https:\/\/css-tricks.com\/css-variables-with-php\/\">PHP as CSS<\/a>), you could create data URIs on the fly like this: <code>&lt;?php echo base64_encode(file_get_contents(\"..\/images\/folder16.gif\")) ?><\/code><\/li>\n\n\n\n<li>You should only use this in documents that are heavily cached, like your CSS should be. Having a CSS file that is 300k instead of 50k is fine if it saves 6 HTTP requests, but only if that CSS file is cached just as well as those images would be. Setting <a href=\"https:\/\/css-tricks.com\/snippets\/htaccess\/set-expires\/\">long expires<\/a> on CSS files should help.<\/li>\n\n\n\n<li>Data URIs are not limited to images, they could literally be anything.<\/li>\n\n\n\n<li><code>&lt;canvas><\/code> may obsolete the coolness of all this, when it gets more supported and people build cool tools for it.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"on-performance\" class=\"wp-block-heading\">On Performance<\/h3>\n\n\n\n<p><a href=\"http:\/\/www.mobify.com\/blog\/data-uris-are-slow-on-mobile\/\" rel=\"noopener\">Some relevant research<\/a> by Peter McLachlan:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8230;when measuring the performance of hundreds of thousands of mobile page views, that loading images using a data URI is on average 6x slower than using a binary source link such as an img tag with an src attribute!<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Did you know that you don&#8217;t have to link to an external image file when using an &lt;img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with <strong>data URIs<\/strong>. The end result can be a site with all the less HTTP Requests, but at what cost?<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[18972],"class_list":["post-5970","post","type-post","status-publish","format-standard","hentry","category-articles","tag-data-urls"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":373111,"url":"https:\/\/css-tricks.com\/how-i-made-an-icon-system-out-of-css-custom-properties\/","url_meta":{"origin":5970,"position":0},"title":"How I Made an Icon System Out of CSS Custom Properties","author":"Louis Hoebregts","date":"September 22, 2022","format":false,"excerpt":"SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and you can even animate the icons with CSS or JavaScript.\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":186738,"url":"https:\/\/css-tricks.com\/probably-dont-base64-svg\/","url_meta":{"origin":5970,"position":1},"title":"Probably Don&#8217;t Base64 SVG","author":"Chris Coyier","date":"October 21, 2014","format":false,"excerpt":"Perhaps you've heard of data URIs. It's a really nice way of including a resource that would have otherwise been a separate HTTP request. The format that you use in a data URI can vary. Essentially you just tell it what content type it is (e.g. image\/png), semicolon, then the\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":193982,"url":"https:\/\/css-tricks.com\/tour-performant-responsive-css-site\/","url_meta":{"origin":5970,"position":2},"title":"Tour of a Performant and Responsive CSS Only Site","author":"34 Cross","date":"January 23, 2015","format":false,"excerpt":"The following is a guest post by Rajoshi Ghosh and Tanmai Gopal of 34 Cross. They emailed me to show me their new website and how performant it was despite having cool features, being visually rich, and responsive. I was like, hey, you should write about it! This is that.\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340692,"url":"https:\/\/css-tricks.com\/svg-loader-a-different-way-to-work-with-external-svg\/","url_meta":{"origin":5970,"position":3},"title":"svg-loader: A Different Way to Work With External SVG","author":"Shubham Jain","date":"May 19, 2021","format":false,"excerpt":"SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format\u2019s customization powers. For instance,\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":307852,"url":"https:\/\/css-tricks.com\/using-css-masks-to-create-jagged-edges\/","url_meta":{"origin":5970,"position":4},"title":"Using CSS Masks to Create Jagged Edges","author":"Stuart Langridge","date":"May 12, 2020","format":false,"excerpt":"I was working on a project that had this neat jagged edge along the bottom of a banner image. Looking sharp... in more ways than one. It\u2019s something that made me think for a second and I learned something in the process! I thought I\u2019d write up how I approached\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/jagged-edges.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/jagged-edges.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/jagged-edges.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/jagged-edges.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/jagged-edges.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":357412,"url":"https:\/\/css-tricks.com\/which-svg-technique-performs-best-for-way-too-many-icons\/","url_meta":{"origin":5970,"position":5},"title":"Which SVG technique performs best for way too many icons?","author":"Chris Coyier","date":"November 23, 2021","format":false,"excerpt":"Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge case, but hey, 250 rows of data with four icons in each gets you there. Tyler covers the nuances carefully in\u2026","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-22-at-9.12.58-AM.png?fit=1200%2C741&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-22-at-9.12.58-AM.png?fit=1200%2C741&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-22-at-9.12.58-AM.png?fit=1200%2C741&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-22-at-9.12.58-AM.png?fit=1200%2C741&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-22-at-9.12.58-AM.png?fit=1200%2C741&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=5970"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5970\/revisions"}],"predecessor-version":[{"id":382204,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/5970\/revisions\/382204"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=5970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=5970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=5970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}