{"id":19832,"date":"2014-04-18T13:01:05","date_gmt":"2014-04-18T05:01:05","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19832"},"modified":"2025-04-04T01:44:32","modified_gmt":"2025-04-03T17:44:32","slug":"image-dominant-color-background-adaptivebackgroud-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/","title":{"rendered":"Optimize Your Website&#8217;s Visual Experience with AdaptiveBackgrounds.js"},"content":{"rendered":"<p>Having trouble picking the ideal background for your website? Look no further \u2013 <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/briangonzalez.github.io\/jquery.adaptive-backgrounds.js\/\">AdaptiveBackgrounds.js<\/a> is a <a href=\"https:\/\/www.hongkiat.com\/blog\/best-color-tools-for-web-designers\/\">color tool for designers<\/a> that takes the guesswork out of the equation. It automatically identifies the most dominant color within your content to elevate the user experience.<\/p>\n<p>This free jQuery plugin that seamlessly integrates the most striking color from your content into the background. Developed on the robust framework of <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/briangonzalez\/rgbaster.js\">RGBaster<\/a>, it comes from the same creative mind.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/website-color-scheme\/\" class=\"ref-block__link\" title=\"Read More: Practical Approach to Choosing Website Color Scheme\" rel=\"bookmark\"><span class=\"screen-reader-text\">Practical Approach to Choosing Website Color Scheme<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/website-color-scheme.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16716 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/website-color-scheme.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Practical Approach to Choosing Website Color Scheme<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tImagine a world without colors; that world would be such a boring place, right? This applies to websites...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>Designed to <strong>scan an image\u2019s color palette and pinpoint its dominant hue<\/strong>, this plugin gets to work the moment your page loads. It identifies the dominant color and applies it to the parent element of the image. To see it in action, check out the following gif:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/adaptivebackgrounds-demo.gif\" alt=\"AdaptiveBackgrounds.js demo\" width=\"440\" height=\"458\"><\/figure>\n<h2>How to Get Started<\/h2>\n<p><strong>AdaptiveBackgrounds.js<\/strong> relies on the jQuery library. Although it\u2019s an extension of RGBaster, there\u2019s no need to include that separately. You can download the plugin file from its GitHub <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/briangonzalez\/jquery.adaptive-backgrounds.js\">repository<\/a>.<\/p>\n<p>Next, include the necessary files in your project as shown below:<\/p>\n<pre>\r\n &lt;script type=\"text\/javascript\" src='js\/jquery.js'&gt;&lt;\/script&gt;\r\n &lt;script type=\"text\/javascript\" src='js\/jquery.adaptive-backgrounds.js'&gt;&lt;\/script&gt;\r\n<\/pre>\n<h2>Implementing the Dominant Color<\/h2>\n<p>Let\u2019s put this tool to the test. We\u2019ll extract the dominant color from this <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.flickr.com\/photos\/60999792@N06\/12724451335\/in\/explore-2014-02-23\">Double Arch<\/a> photograph by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.flickr.com\/photos\/60999792@N06\/\">Kartik Ramanathan<\/a> and apply it to its parent element.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/double-arch.jpg\" alt=\"Double Arch photograph\" width=\"500\" height=\"334\"><\/figure>\n<p>To apply the dominant color to an element, the image should be nested within it. Add the <code>data-adaptive-background<\/code> attribute to the <code>img<\/code> tag as shown:<\/p>\n<pre>\r\n &lt;div class='wrapper'&gt;\r\n &lt;img id=\"img\" src=\"images\/double-arch.jpg\" data-adaptive-background='1'&gt;\r\n &lt;\/div&gt;\r\n<\/pre>\n<p>If you place the <code>img<\/code> directly within the <code>body<\/code> tag, the entire body will adopt the dominant color.<\/p>\n<p>Finally, activate the plugin with the following JavaScript code:<\/p>\n<pre>\r\n &lt;script type=\"text\/javascript\"&gt;\r\n $(document).ready(function(){\r\n $.adaptiveBackground.run();\r\n });\r\n &lt;\/script&gt;\r\n<\/pre>\n<p>And there you have it-the dominant color is now applied to the image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/double-arch-after.jpg\" alt=\"Double Arch photograph after applying dominant color\" width=\"500\" height=\"333\"><\/figure>\n<h2>Concluding Thoughts<\/h2>\n<p>While AdaptiveBackgrounds.js provides a static color, you might want to add more vibrancy to your background for a more captivating result. For further inspiration and settings, visit the <strong>AdaptiveBackgrounds.js<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/briangonzalez\/jquery.adaptive-backgrounds.js\">documentation<\/a> page.<\/p>","protected":false},"excerpt":{"rendered":"<p>Having trouble picking the ideal background for your website? Look no further \u2013 AdaptiveBackgrounds.js is a color tool for designers that takes the guesswork out of the equation. It automatically identifies the most dominant color within your content to elevate the user experience. This free jQuery plugin that seamlessly integrates the most striking color from&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2856,4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimize Your Website&#039;s Visual Experience with AdaptiveBackgrounds.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"Having trouble picking the ideal background for your website? Look no further - AdaptiveBackgrounds.js is a color tool for designers that takes the\" \/>\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.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize Your Website&#039;s Visual Experience with AdaptiveBackgrounds.js\" \/>\n<meta property=\"og:description\" content=\"Having trouble picking the ideal background for your website? Look no further - AdaptiveBackgrounds.js is a color tool for designers that takes the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-18T05:01:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:44:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/adaptivebackgrounds-demo.gif\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Optimize Your Website&#8217;s Visual Experience with AdaptiveBackgrounds.js\",\"datePublished\":\"2014-04-18T05:01:05+00:00\",\"dateModified\":\"2025-04-03T17:44:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/\"},\"wordCount\":313,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-dominant-color-background-adaptivebackgroud-js\\\/adaptivebackgrounds-demo.gif\",\"keywords\":[\"Dev Tools\",\"Javascripts\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/\",\"name\":\"Optimize Your Website's Visual Experience with AdaptiveBackgrounds.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-dominant-color-background-adaptivebackgroud-js\\\/adaptivebackgrounds-demo.gif\",\"datePublished\":\"2014-04-18T05:01:05+00:00\",\"dateModified\":\"2025-04-03T17:44:32+00:00\",\"description\":\"Having trouble picking the ideal background for your website? Look no further - AdaptiveBackgrounds.js is a color tool for designers that takes the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-dominant-color-background-adaptivebackgroud-js\\\/adaptivebackgrounds-demo.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/image-dominant-color-background-adaptivebackgroud-js\\\/adaptivebackgrounds-demo.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/image-dominant-color-background-adaptivebackgroud-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimize Your Website&#8217;s Visual Experience with AdaptiveBackgrounds.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimize Your Website's Visual Experience with AdaptiveBackgrounds.js - Hongkiat","description":"Having trouble picking the ideal background for your website? Look no further - AdaptiveBackgrounds.js is a color tool for designers that takes the","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.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/","og_locale":"en_US","og_type":"article","og_title":"Optimize Your Website's Visual Experience with AdaptiveBackgrounds.js","og_description":"Having trouble picking the ideal background for your website? Look no further - AdaptiveBackgrounds.js is a color tool for designers that takes the","og_url":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-04-18T05:01:05+00:00","article_modified_time":"2025-04-03T17:44:32+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/adaptivebackgrounds-demo.gif","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Optimize Your Website&#8217;s Visual Experience with AdaptiveBackgrounds.js","datePublished":"2014-04-18T05:01:05+00:00","dateModified":"2025-04-03T17:44:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/"},"wordCount":313,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/adaptivebackgrounds-demo.gif","keywords":["Dev Tools","Javascripts"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/","url":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/","name":"Optimize Your Website's Visual Experience with AdaptiveBackgrounds.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/adaptivebackgrounds-demo.gif","datePublished":"2014-04-18T05:01:05+00:00","dateModified":"2025-04-03T17:44:32+00:00","description":"Having trouble picking the ideal background for your website? Look no further - AdaptiveBackgrounds.js is a color tool for designers that takes the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/adaptivebackgrounds-demo.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/image-dominant-color-background-adaptivebackgroud-js\/adaptivebackgrounds-demo.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/image-dominant-color-background-adaptivebackgroud-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Optimize Your Website&#8217;s Visual Experience with AdaptiveBackgrounds.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-59S","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19832"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19832\/revisions"}],"predecessor-version":[{"id":73681,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19832\/revisions\/73681"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19832"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}