{"id":16859,"date":"2019-04-17T18:19:12","date_gmt":"2019-04-17T10:19:12","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16859"},"modified":"2022-10-09T23:36:44","modified_gmt":"2022-10-09T15:36:44","slug":"compass-image-sprite","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/","title":{"rendered":"Creating CSS Image Sprite with Compass"},"content":{"rendered":"<p>CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and <a href=\"https:\/\/www.hongkiat.com\/blog\/ultimate-guide-to-web-optimization-tips-best-practices\/\">optimize web load performance<\/a>. There are many ways and handy tools to do this, or else you can also do it traditionally with Photoshop.<\/p>\n<p>But, through all my experience of dealing with CSS Image Sprite, there is no other way that much easier than using <a href=\"http:\/\/compass-style.org\/help\/tutorials\/spriting\/\" rel=\"nofollow\">Sprite Function<\/a> for Compass. So, let\u2019s take a look at how it works.<\/p>\n<p class=\"note\"><strong>Recommended Reading<\/strong>: <a href=\"https:\/\/www.hongkiat.com\/blog\/saas-compass\/\">Syntactically Awesome Stylesheets: Using Compass In Sass<\/a><\/p>\n<h2>Starting Compass<\/h2>\n<p>Before working with Compass codes, we need to create Compass project watch it. So, every time there is a change in the project, including the images and the <code>.scss<\/code>, Compass will compile it into the proper form.<\/p>\n<p>Let\u2019s open your Terminal or Command Prompt (if you are on Windows), and run the following commands.<\/p>\n<pre>\r\ncompass create \/path\/to\/project\r\ncd \/path\/to\/project\r\ncompass watch\r\n<\/pre>\n<h2>Combining Images<\/h2>\n<p>As we mentioned above, you can use Photoshop to manually join the images or you can also use some handy tools, such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.cssportal.com\/css-sprite-generator\/\">this tool<\/a>. Compass integrates this feature in the Function. Let\u2019s say we have the following icons under <strong>images\/browsers\/&lt;images&gt;.png<\/strong> folders.<\/p>\n<p>To join those icons in Compass, we can use <code>@import<\/code> rule and then direct it to the image folders followed by the image extension through the <code>.scss<\/code> stylesheet, like so<\/p>\n<pre>\r\n@import \"browsers\/*.png\";\r\n<\/pre>\n<p>After saving the file, Compass will combine those images and generate new image files, as follows.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite.jpg\" alt=\"image sprite\" width=\"500\" height=\"320\"><\/figure>\n<h3>Layout Orientation<\/h3>\n<p>Furthermore, we can also set the sprite orientation. As you can see in the screenshot above, the images are arranged vertically by default. In case vertical orientation does not fit the circumstances, we can direct them horizontally or diagonally with the following variable <code>$&lt;map&gt;-layout: horizontal;<\/code> or <code>$&lt;map&gt;-layout: horizontal;<\/code> replace the <code>&lt;map&gt;<\/code> with the folder name where you saved the images.<\/p>\n<p><strong>Horizontal<\/strong><\/p>\n<pre>\r\n$browsers-layout:horizontal;\r\n@import \"browsers\/*.png\";\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite-horizontal.jpg\" alt=\"image sprite horizontal\" width=\"500\" height=\"320\"><\/figure>\n<p><strong>Diagonal<\/strong><\/p>\n<pre>\r\n$browsers-layout:vertical;\r\n@import \"browsers\/*.png\";\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite-diagonal.jpg\" alt=\"image sprite diagonal\" width=\"500\" height=\"320\"><\/figure>\n<h2>Adding Image in the Stylesheet<\/h2>\n<p>Once we have done combining the image, we add the image in the stylesheet through the background image. Traditionally we will do it this way.<\/p>\n<pre>\r\n.chrome { \r\n\tbackground-position: 0 0; width: 128px; height: 128px; \r\n} \r\n.firefox { \r\n\tbackground-position: 0 -133px; width: 128px; height: 128px; \r\n} \r\n.ie { \r\n\tbackground-position: 0 -266px; width: 128px; height: 128px; \r\n} \r\n.opera { \r\n\tbackground-position: 0 -399px; width: 128px; height: 128px; \r\n} \r\n.safari { \r\n\tbackground-position: 0 -532px; width: 128px; height: 128px; \r\n} \r\n<\/pre>\n<p>In Compass, we have a couple of ways that are much simpler. First, we can generate something like those CSS rules with this syntax <code>@include  all-&lt;map&gt;-sprites;<\/code>. Replace the <code>&lt;map&gt;<\/code> with the folders where we store the images.<\/p>\n<pre>\r\n@include  all-browsers-sprites;\r\n<\/pre>\n<p>This line above when compiled to regular CSS generates the background image definition as well as each of the position, as shown below.<\/p>\n<pre>\r\n.browsers-sprite, .browsers-chrome, .browsers-firefox, .browsers-ie, .browsers-opera, .browsers-safari {\r\n  background: url('\/images\/browsers-sad8e949931.png') no-repeat;\r\n}\r\n.browsers-chrome {\r\n\tbackground-position: 0 0;\r\n}\r\n.browsers-firefox {\r\n\tbackground-position: 0 -128px;\r\n}\r\n.browsers-ie {\r\n\tbackground-position: 0 -256px;\r\n}\r\n.browsers-opera {\r\n\tbackground-position: 0 -384px;\r\n}\r\n.browsers-safari {\r\n\tbackground-position: 0 -512px;\r\n}\r\n<\/pre>\n<p>Or, we can also add background image individually to particular selectors with this syntax <code>@include &lt;map&gt;-sprite(image-naem);<\/code>; as in previous codes replace the <code>&lt;map&gt;<\/code> with the folder where we store these images. Here is an example.<\/p>\n<pre>\r\nli {\r\n\t@include browsers-sprite(safari);\r\n}\r\n<\/pre>\n<p>Then, Compass is clever enough to identify the background position, without us having to specify it explicitly. In regular CSS, that line above will turn into<\/p>\n<pre>\r\n.browsers-sprite, li {\r\n  background: url('\/images\/browsers-sad8e949931.png') no-repeat;\r\n}\r\nli {\r\n\tbackground-position: 0 -512px;\r\n}\r\n<\/pre>\n<h2>Specifying Container Dimension<\/h2>\n<p>The last thing we need to do is specifying the container <code>height<\/code> and <code>width<\/code> that contain the image. We commonly do it in traditional way by manually inspecting the image <code>width<\/code> and <code>height<\/code> (most likely through image info or image properties).<\/p>\n<p>With Compass, we can utilize this function <code>&lt;map&gt;-sprite-height(image-name)<\/code> or <code>&lt;map&gt;-sprite-width(image-name)<\/code> to retrieve the image width and height. In this example, we will retrieve one of the image <code>width<\/code> and <code>height<\/code> and store the value variables as well assign the background image with <code>@include<\/code> directive.<\/p>\n<pre>\r\n$height: browsers-sprite-height(safari);\r\n$width: browsers-sprite-width(safari);\r\nli {\r\n\tdisplay: inline-block;\r\n\theight: $height;\r\n\twidth: $width;\r\n\t@include browsers-sprite(safari);\r\n}\r\n<\/pre>\n<p>When we compile these codes above, it turns into the following in regular CSS.<\/p>\n<pre>\r\n.browsers-sprite, li {\r\n\tbackground: url('\/images\/browsers-sad8e949931.png') no-repeat;\r\n}\r\nli {\r\n\tdisplay: inline-block;\r\n\theight: 128px;\r\n\twidth: 128px;\r\n\tbackground-position: 0 -512px;\r\n}\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>There are actually a few other useful functions from Compass to use along with, but these are all the essential functions to create CSS Image Sprite with Compass. Still, if you are unfamiliar with this subject, we reccommend you to follow our previous post series about <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/sass\/\">Sass and Compass<\/a>. We hope you find this post to be useful.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many ways and handy tools to do this, or else you can also do it traditionally with Photoshop. But, through all my experience of dealing with CSS Image Sprite, there&hellip;<\/p>\n","protected":false},"author":113,"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":[507,2190],"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.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Image Sprite with Compass<\/title>\n<meta name=\"description\" content=\"CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many\" \/>\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\/compass-image-sprite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating CSS Image Sprite with Compass\" \/>\n<meta property=\"og:description\" content=\"CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/\" \/>\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=\"2019-04-17T10:19:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-09T15:36:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Creating CSS Image Sprite with Compass\",\"datePublished\":\"2019-04-17T10:19:12+00:00\",\"dateModified\":\"2022-10-09T15:36:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/\"},\"wordCount\":596,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/compass-image-sprite\\\/image-sprite.jpg\",\"keywords\":[\"CSS\",\"sass\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/\",\"name\":\"CSS Image Sprite with Compass\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/compass-image-sprite\\\/image-sprite.jpg\",\"datePublished\":\"2019-04-17T10:19:12+00:00\",\"dateModified\":\"2022-10-09T15:36:44+00:00\",\"description\":\"CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/compass-image-sprite\\\/image-sprite.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/compass-image-sprite\\\/image-sprite.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/compass-image-sprite\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating CSS Image Sprite with Compass\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Image Sprite with Compass","description":"CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many","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\/compass-image-sprite\/","og_locale":"en_US","og_type":"article","og_title":"Creating CSS Image Sprite with Compass","og_description":"CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many","og_url":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-04-17T10:19:12+00:00","article_modified_time":"2022-10-09T15:36:44+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Creating CSS Image Sprite with Compass","datePublished":"2019-04-17T10:19:12+00:00","dateModified":"2022-10-09T15:36:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/"},"wordCount":596,"commentCount":10,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite.jpg","keywords":["CSS","sass"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/","url":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/","name":"CSS Image Sprite with Compass","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite.jpg","datePublished":"2019-04-17T10:19:12+00:00","dateModified":"2022-10-09T15:36:44+00:00","description":"CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance. There are many","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/compass-image-sprite\/image-sprite.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/compass-image-sprite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating CSS Image Sprite with Compass"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-4nV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16859","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=16859"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16859\/revisions"}],"predecessor-version":[{"id":62670,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/16859\/revisions\/62670"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=16859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=16859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=16859"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=16859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}