{"id":4024,"date":"2017-02-09T06:38:03","date_gmt":"2017-02-09T11:38:03","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=4024"},"modified":"2024-02-20T17:42:11","modified_gmt":"2024-02-20T14:42:11","slug":"data-uris-web-design-project","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/","title":{"rendered":"Data URIs And How to Use Them in Your Web Design Project"},"content":{"rendered":"\n<p>You are probably reading this information on data URIs in HTML because you have some concerns about improving the performance of your website in any way that you can. Why not, it is one of the factors the likes of Google use to determine page rank.<\/p>\n\n\n\n<p>The good news is that using data URIs is one way to improve the speed of your website if used properly. This guide will show you how and when to use this HTML feature.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Data URIs?<\/h2>\n\n\n\n<p>You generally want to use them to enhance your website&#8217;s performance by reducing the number of HTTP requests made to your server. For a web page to display it has to load an array of resources including images, external CSS files, external <a href=\"\/\/local.brightwhiz\/tag\/javascript\/\">JavaScript<\/a> files, fonts, and of course the <a href=\"\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a> source.<\/p>\n\n\n\n<p>Depending on the design of your website these resources may start to take their toll and slow down a website&#8217;s load time significantly. One major reason why this happens is that of the several requests made to the server to pick up these resources.<\/p>\n\n\n\n<p>Reducing the number of requests, therefore, shaves off a couple of milliseconds if not seconds from the load time. Using data from URIs can play a big part in this process.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Where to Use Data URIs?<\/h2>\n\n\n\n<p>There are generally three places you can use them. That is directly in the HTML, as a background image in your <a href=\"\/\/local.brightwhiz\/tag\/css\/\">CSS<\/a>, and finally in your JavaScript code.<\/p>\n\n\n\n<p>Before you are able to use these URIs you need to know what the official format looks like. The format of data URIs consists of the scheme, the optional media type, the optional base64 extension or character-set, and the data as seen below:<\/p>\n\n\n\n<p><strong>data:[&lt;mime type&gt;][;base64][;charset=&lt;charset&gt;],&lt;encoded data&gt;<\/strong><\/p>\n\n\n\n<p>To illustrate the above here is an example of the code. It is an image of this arrow:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/arrow-090-small.png\"><img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" src=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/arrow-090-small.png\" alt=\"\" class=\"wp-image-4027\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Where not to use Data URIs<\/h2>\n\n\n\n<p>These URIs are ideal for use when the files are not too large such as is the case with images. There is a trade-off in that when your image is small enough to warrant removing it from the queue of HTTP requests.<\/p>\n\n\n\n<p>For maintainability, it is not ideal for one to convert all images in a website to base64 format. It just complicates matters when you want to edit your HTML code or make a change to the image. The process does not stay rosy anymore.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Base64 Encode Images<\/h2>\n\n\n\n<p>You can either <a href=\"http:\/\/jpillora.com\/base64-encoder\/\" target=\"_blank\" rel=\"noopener\">use online tools such as this one<\/a> or you can also encode theme dynamically using PHP like so:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-php\">&lt;?php\n  echo base64_encode(file_get_contents(&quot;images\/arrow.png&quot;));\n?&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>You are probably reading this information on data URIs in HTML because you have some concerns about improving the performance of your website in any way that you can. Why&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4025,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23],"tags":[170,220,303,320,433,449,543,635,637,638],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to use Data URIs to Speed up Your Website Load<\/title>\n<meta name=\"description\" content=\"Data URIs are schemes that do not link to outside resources instead they encode the resource data and embed it into the HTMLs source file\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Data URIs to Speed up Your Website Load\" \/>\n<meta property=\"og:description\" content=\"Data URIs are schemes that do not link to outside resources instead they encode the resource data and embed it into the HTMLs source file\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-09T11:38:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-20T14:42:11+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"Data URIs And How to Use Them in Your Web Design Project\",\"datePublished\":\"2017-02-09T11:38:03+00:00\",\"dateModified\":\"2024-02-20T14:42:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/\"},\"wordCount\":449,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg\",\"keywords\":[\"CSS\",\"Embedded\",\"HTML\",\"Internet\",\"Optimization\",\"Performance\",\"Software Design\",\"Web\",\"Web Design\",\"Web Development\"],\"articleSection\":[\"Articles\",\"Guides\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/\",\"url\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/\",\"name\":\"How to use Data URIs to Speed up Your Website Load\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg\",\"datePublished\":\"2017-02-09T11:38:03+00:00\",\"dateModified\":\"2024-02-20T14:42:11+00:00\",\"description\":\"Data URIs are schemes that do not link to outside resources instead they encode the resource data and embed it into the HTMLs source file\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Data URIs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Data URIs And How to Use Them in Your Web Design Project\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Data URIs to Speed up Your Website Load","description":"Data URIs are schemes that do not link to outside resources instead they encode the resource data and embed it into the HTMLs source file","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":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/","og_locale":"en_US","og_type":"article","og_title":"How to use Data URIs to Speed up Your Website Load","og_description":"Data URIs are schemes that do not link to outside resources instead they encode the resource data and embed it into the HTMLs source file","og_url":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-02-09T11:38:03+00:00","article_modified_time":"2024-02-20T14:42:11+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"Data URIs And How to Use Them in Your Web Design Project","datePublished":"2017-02-09T11:38:03+00:00","dateModified":"2024-02-20T14:42:11+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/"},"wordCount":449,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg","keywords":["CSS","Embedded","HTML","Internet","Optimization","Performance","Software Design","Web","Web Design","Web Development"],"articleSection":["Articles","Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/data-uris-web-design-project\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/","url":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/","name":"How to use Data URIs to Speed up Your Website Load","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg","datePublished":"2017-02-09T11:38:03+00:00","dateModified":"2024-02-20T14:42:11+00:00","description":"Data URIs are schemes that do not link to outside resources instead they encode the resource data and embed it into the HTMLs source file","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/data-uris-web-design-project\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/data-uris.jpg","width":1200,"height":630,"caption":"Data URIs"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/data-uris-web-design-project\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"Data URIs And How to Use Them in Your Web Design Project"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/twitter.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4024"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=4024"}],"version-history":[{"count":1,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4024\/revisions"}],"predecessor-version":[{"id":13674,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4024\/revisions\/13674"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/4025"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=4024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=4024"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=4024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}