{"id":21610,"date":"2019-07-26T18:11:54","date_gmt":"2019-07-26T10:11:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21610"},"modified":"2025-04-21T19:17:20","modified_gmt":"2025-04-21T11:17:20","slug":"html5-picture","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/","title":{"rendered":"How to Use HTML5 &lt;picture&gt; to Get Responsive Image"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/rwd\/\">Responsive Design<\/a> is here to stay, but there are many issues that need to be addressed when it comes to <a href=\"https:\/\/www.hongkiat.com\/blog\/rwd-tools\/\">making images responsive<\/a>. Although <a href=\"https:\/\/www.hongkiat.com\/blog\/free-responsive-image-gallery\/\">responsive images<\/a> automatically resize themselves based on the viewport size (which is technically easy), one problem users face is that the <strong>image\u2019s focal point becomes barely visible when the image becomes too small<\/strong>.<\/p>\n<p>The ideal consensus among web developers is that the <strong>actual dimensions should be responsive too<\/strong>. The browser should be able to load smaller or larger images according to the viewport size. This way, we can deliver the best image proportion rather than just a shrunken version of the image.<\/p>\n<p>This is where the HTML5 <code>picture<\/code> element comes in. The <code>picture<\/code> element allows us to provide multiple image sources and control their delivery through Media Queries. Let\u2019s see how it\u2019s done.<\/p>\n<p class=\"note\"><strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/serving-responsive-images\/\">5 Methods To Serve True Responsive Images<\/a><\/p>\n<h2>Getting Started<\/h2>\n<p>I have prepared an image in three different dimensions. The image has been cropped to preserve focus on the person in the frame. We will display the smallest size on small screens and the larger image on large screens.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"image cropped\" height=\"170\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/image-cropped.jpg\" width=\"500\"><\/figure>\n<h2>Using the Picture Element<\/h2>\n<p>Picturefill can work in two ways: we can embed <code>srcset<\/code> in the <code>img<\/code> tag or use the <code>picture<\/code> element. Here, we will opt for the <code>picture<\/code> element as it is more manageable, easier to understand, and more readable.<\/p>\n<p>Similar to the <code>video<\/code> and <code>audio<\/code> elements, <code>picture<\/code> wraps multiple <code>source<\/code> elements pointing to the image sources, as follows.<\/p>\n<pre>\r\n&lt;picture&gt;\r\n    &lt;source srcset=\"img\/person-xsmall.jpg\" media=\"(max-width: 480px)\"&gt;\r\n    &lt;source srcset=\"img\/person-small.jpg\" media=\"(max-width: 640px)\"&gt;\r\n    &lt;source srcset=\"img\/person-med.jpg\"&gt;\r\n    &lt;img srcset=\"img\/person-med.jpg\" alt=\"\"&gt;\r\n&lt;\/picture&gt;\r\n<\/pre>\n<p>The <code>source<\/code> element, as shown in the code snippet above, is set with the <code>media<\/code> attribute. In this attribute, we specify the viewport breakpoint at which the image should be presented.<\/p>\n<p>Check out <a href=\"https:\/\/hongkiat.github.io\/html5-picture\/\" rel=\"nofollow noopener\" target=\"_blank\">the demo page<\/a> and resize the viewport to see how the image adapts to different screen sizes.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"picture in action\" height=\"320\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/picture-in-action.jpg\" width=\"500\"><\/figure>\n<h2>Browser Support<\/h2>\n<p>All modern browsers now support the HTML5 <code>picture<\/code> element, including Microsoft Edge and mobile browsers. However, if you need to support older browsers like Internet Explorer where this element is not supported, you can <a href=\"https:\/\/www.hongkiat.com\/blog\/html5-shiv-polyfills\/\">use a polyfill<\/a> called <a href=\"https:\/\/github.com\/scottjehl\/picturefill\" rel=\"nofollow noopener\" target=\"_blank\">Picturefill<\/a>.<\/p>\n<p>Picturefill is a JavaScript library developed by Filament Group that enables the use of the <code>picture<\/code> element. To get started, download the script from <a href=\"https:\/\/github.com\/scottjehl\/picturefill\" rel=\"nofollow noopener\" target=\"_blank\">the Github repository<\/a> and include either <code>picturefill.js<\/code> or <code>picturefill.min.js<\/code> in your <code>head<\/code> tag.<\/p>\n<pre>\r\n&lt;script src=\"js\/picturefill.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<h2>Final Thoughts<\/h2>\n<p>The <code>picture<\/code> element is a great addition to HTML5. It provides more control over the image size that browsers should present at specific viewport sizes. The element works in all modern browsers, and WordPress has included support for it since version 4.4. If you need to support older browsers like Internet Explorer that don\u2019t support the <code>picture<\/code> element, you can use <strong>Picturefill<\/strong> as a polyfill.<\/p>\n<p>Check out the demo and download the source code below.<\/p>\n<div class=\"button\">\n<a href=\"https:\/\/hongkiat.github.io\/html5-picture\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n<a href=\"https:\/\/github.com\/hongkiat\/html5-picture\/\" rel=\"nofollow noopener\" target=\"_blank\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive images automatically resize themselves based on the viewport size (which is technically easy), one problem users face is that the image\u2019s focal point becomes barely visible when the image becomes&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":[506,2066],"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>How to Use HTML5 &lt;picture&gt; to Get Responsive Image - Hongkiat<\/title>\n<meta name=\"description\" content=\"Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive\" \/>\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\/html5-picture\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use HTML5 &lt;picture&gt; to Get Responsive Image\" \/>\n<meta property=\"og:description\" content=\"Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html5-picture\/\" \/>\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-07-26T10:11:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T11:17:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/image-cropped.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Use HTML5 &lt;picture&gt; to Get Responsive Image\",\"datePublished\":\"2019-07-26T10:11:54+00:00\",\"dateModified\":\"2025-04-21T11:17:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/\"},\"wordCount\":447,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-picture\\\/image-cropped.jpg\",\"keywords\":[\"HTML\",\"Responsive Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/\",\"name\":\"How to Use HTML5 &lt;picture&gt; to Get Responsive Image - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-picture\\\/image-cropped.jpg\",\"datePublished\":\"2019-07-26T10:11:54+00:00\",\"dateModified\":\"2025-04-21T11:17:20+00:00\",\"description\":\"Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-picture\\\/image-cropped.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html5-picture\\\/image-cropped.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html5-picture\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use HTML5 &lt;picture&gt; to Get Responsive Image\"}]},{\"@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":"How to Use HTML5 &lt;picture&gt; to Get Responsive Image - Hongkiat","description":"Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive","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\/html5-picture\/","og_locale":"en_US","og_type":"article","og_title":"How to Use HTML5 &lt;picture&gt; to Get Responsive Image","og_description":"Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive","og_url":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-26T10:11:54+00:00","article_modified_time":"2025-04-21T11:17:20+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/image-cropped.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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Use HTML5 &lt;picture&gt; to Get Responsive Image","datePublished":"2019-07-26T10:11:54+00:00","dateModified":"2025-04-21T11:17:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/"},"wordCount":447,"commentCount":8,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/image-cropped.jpg","keywords":["HTML","Responsive Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html5-picture\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/","url":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/","name":"How to Use HTML5 &lt;picture&gt; to Get Responsive Image - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/image-cropped.jpg","datePublished":"2019-07-26T10:11:54+00:00","dateModified":"2025-04-21T11:17:20+00:00","description":"Responsive Design is here to stay, but there are many issues that need to be addressed when it comes to making images responsive. Although responsive","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html5-picture\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/image-cropped.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html5-picture\/image-cropped.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html5-picture\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use HTML5 &lt;picture&gt; to Get Responsive Image"}]},{"@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-5Cy","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21610","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=21610"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21610\/revisions"}],"predecessor-version":[{"id":73956,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21610\/revisions\/73956"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21610"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}