{"id":3202,"date":"2025-09-14T03:06:35","date_gmt":"2025-09-14T03:06:35","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/"},"modified":"2025-09-14T03:06:35","modified_gmt":"2025-09-14T03:06:35","slug":"lazy-loading-images-intersection-observer","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/","title":{"rendered":"Implement Lazy Loading Images with Intersection Observer"},"content":{"rendered":"
\n

Introduction<\/h2>\n

In today’s web development landscape, performance is key. One effective way to enhance your website’s loading speed is through lazy loading<\/strong> images. This technique delays the loading of images that are not immediately visible on the viewport, thereby improving initial load time and resource usage. In this guide, we will explore how to implement lazy loading for images using the Intersection Observer API<\/strong>.<\/p>\n

What is Lazy Loading?<\/h2>\n

Lazy loading is a design pattern that postpones the loading of non-essential resources at the point the user needs them. This means images, videos, and other media are only loaded when they are about to enter the viewport. This can significantly decrease the page load time and improve performance metrics.<\/p>\n

Why Use Intersection Observer?<\/h2>\n

The Intersection Observer API<\/strong> is a powerful tool that allows developers to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. It provides a more efficient way to implement lazy loading than traditional methods such as scroll event listeners.<\/p>\n

Step-by-Step Guide to Implement Lazy Loading<\/h2>\n

Step 1: Set Up Your HTML<\/h3>\n

Begin by modifying your HTML to include a placeholder for each image. Instead of loading images directly, use a data attribute to store the image source.<\/p>\n

<img class=\"lazy\" data-src=\"path\/to\/image.jpg\" alt=\"Description\" \/><\/code><\/pre>\n
Step 2: Create the Intersection Observer<\/h3>\n
Next, you will create an instance of the Intersection Observer and define a callback function that will execute when the target elements intersect with the viewport.<\/p>\n
const images = document.querySelectorAll('.lazy');\n\nconst options = {\n  root: null, \/\/ Use the viewport as the container\n  rootMargin: '0px',\n  threshold: 0.1 \/\/ Trigger when 10% of the image is visible\n};\n\nconst lazyLoad = (entries, observer) => {\n  entries.forEach(entry => {\n    if (entry.isIntersecting) {\n      const img = entry.target;\n      img.src = img.dataset.src;\n      img.classList.remove('lazy');\n      observer.unobserve(img);\n    }\n  });\n};\n\nconst observer = new IntersectionObserver(lazyLoad, options);\nimages.forEach(image => {\n  observer.observe(image);\n});<\/code><\/pre>\n
Step 3: Add CSS for Lazy Loading<\/h3>\n
To ensure a smooth experience, you might want to add some CSS to style your images while they are loading.<\/p>\n
.lazy {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\nimg {\n  display: block;\n  margin: 0 auto;\n}\n\nimg:not(.lazy) {\n  opacity: 1;\n}<\/code><\/pre>\n
Step 4: Test Your Implementation<\/h3>\n
After implementing the code, test it across different devices and browsers to ensure that images load correctly as they enter the viewport. Tools like the Responsive Simulator<\/a> can help you visualize how your site performs on various screens.<\/p>\n
FAQs<\/h2>\n
What browsers support the Intersection Observer API?<\/h3>\n
The Intersection Observer API is supported in most modern browsers, including Chrome, Firefox, Safari, and Edge. For older browsers, consider using a polyfill.<\/p>\n
Can lazy loading affect SEO?<\/h3>\n
When implemented correctly, lazy loading can improve user experience and overall performance, which are positive signals for SEO. Ensure that your images have appropriate alt<\/code> tags and are easily discoverable by search engines.<\/p>\n
Is lazy loading only for images?<\/h3>\n
No, lazy loading can be applied to various types of resources, including videos and iframes, making it a versatile technique to optimize loading performance.<\/p>\n
Conclusion<\/h2>\n
Implementing lazy loading images using the Intersection Observer API is a straightforward yet powerful way to enhance your website’s performance. By reducing initial load times and improving user experience, you can create a more engaging and efficient web application. For further optimizations, consider using tools like the CSS Minifier<\/a> and JS Minifier<\/a> to reduce the size of your CSS and JavaScript files.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
Learn how to implement lazy loading for images using Intersection Observer API to improve your website’s performance.<\/p>\n","protected":false},"author":1,"featured_media":2882,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"\nImplement Lazy Loading Images with Intersection Observer - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn how to implement lazy loading for images using Intersection Observer API to improve your website's performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Implement Lazy Loading Images with Intersection Observer - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn how to implement lazy loading for images using Intersection Observer API to improve your website's performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-14T03:06:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\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:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Implement Lazy Loading Images with Intersection Observer\",\"datePublished\":\"2025-09-14T03:06:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/\"},\"wordCount\":480,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/\",\"name\":\"Implement Lazy Loading Images with Intersection Observer - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"datePublished\":\"2025-09-14T03:06:35+00:00\",\"description\":\"Learn how to implement lazy loading for images using Intersection Observer API to improve your website's performance.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Webp Convertor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/lazy-loading-images-intersection-observer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Implement Lazy Loading Images with Intersection Observer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Implement Lazy Loading Images with Intersection Observer - WebToolsLab","description":"Learn how to implement lazy loading for images using Intersection Observer API to improve your website's performance.","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:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/","og_locale":"en_US","og_type":"article","og_title":"Implement Lazy Loading Images with Intersection Observer - WebToolsLab","og_description":"Learn how to implement lazy loading for images using Intersection Observer API to improve your website's performance.","og_url":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/","og_site_name":"WebToolsLab","article_published_time":"2025-09-14T03:06:35+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Implement Lazy Loading Images with Intersection Observer","datePublished":"2025-09-14T03:06:35+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/"},"wordCount":480,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/","url":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/","name":"Implement Lazy Loading Images with Intersection Observer - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","datePublished":"2025-09-14T03:06:35+00:00","description":"Learn how to implement lazy loading for images using Intersection Observer API to improve your website's performance.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","width":1820,"height":1024,"caption":"Webp Convertor"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/lazy-loading-images-intersection-observer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Implement Lazy Loading Images with Intersection Observer"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to implement lazy loading for images using Intersection Observer API to improve your website's performance.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3202"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3202\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2882"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}