{"id":28318,"date":"2022-07-12T07:40:55","date_gmt":"2022-07-12T07:40:55","guid":{"rendered":"http:\/\/adding-optimized-images-to-docs-in-docusaurus"},"modified":"2025-02-24T15:07:31","modified_gmt":"2025-02-24T23:07:31","slug":"adding-optimized-images-to-docs-in-docusaurus","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/","title":{"rendered":"Adding Optimized Images to Docs in Docusaurus"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h2>Introduction<\/h2>\n<p>In product development, documentation is essential. It provides in-depth explanations on interacting with a product. However, creating a comprehensive documentation website from scratch and implementing features like localization, SEO, and media files can be time-consuming and difficult.<\/p>\n<p><a href=\"https:\/\/docusaurus.io\/\">Docusaurus<\/a> is a static site generator that provides various features for creating and maintaining documentation. It is an open-source project built and maintained by <a href=\"https:\/\/about.facebook.com\/\">Meta<\/a>. It has native support for React, markdown files (<code>.md<\/code>, <code>.mdx<\/code>), and document versioning. It also comes with pre-configuration for Algolia search and localization.<\/p>\n<p>In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.<\/p>\n<h2>CodeSandbox &amp; GitHub Repo<\/h2>\n<p>Get the complete demo for this article on <a href=\"https:\/\/codesandbox.io\/embed\/docusaurus-demo-fstgkg?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">CodeSandbox<\/a>.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/docusaurus-demo-fstgkg?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Adding optimized images to documentation in Docusaurus\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>The source code is also available on <a href=\"https:\/\/github.com\/dpkreativ\/docusaurus-demo\">Github<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>You do not need a lot of in-depth coding knowledge because Docusaurus is beginner-friendly. However, you should at least have:<\/p>\n<ul>\n<li>Knowledge of writing markdown content in a <code>.md<\/code> or <code>.mdx<\/code> file<\/li>\n<li>Basic understanding of creating and implementing React components<\/li>\n<li>A Cloudinary account for storing and delivering your optimized images (Create a free one <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>)<\/li>\n<li>Installation of <a href=\"https:\/\/nodejs.org\">Node.js<\/a> on your computer should come with <code>npx<\/code> for spinning up a new Docusaurus project and <code>npm<\/code> for running the project<\/li>\n<\/ul>\n<h2>Create a Docusaurus Project<\/h2>\n<p>In your terminal, navigate to your preferred directory and run the command below:<\/p>\n<pre><code>npx create-docusaurus@latest &lt;project-name&gt; classic\n<\/code><\/pre>\n<p>This command spins up a new Docusaurus project with your preferred <code>&lt;project-name&gt;<\/code> and a <code>classic<\/code> theme. For this article, the <code>&lt;project-name&gt;<\/code> is <code>docusaurus-demo<\/code>.<\/p>\n<p>Wait for its dependencies to install. Please note that there is no progress bar indicator, so this stage\u2019s process might look static, but it is installing:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_21AEEEC5B155F7391AE086564C7B0B04E5BB03E357FA0F6D99D6B8DF0AF05136_1655511579612_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"759\" height=\"256\"\/><\/p>\n<p>After successfully installing the dependencies, you will see these messages below in your terminal:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_21AEEEC5B155F7391AE086564C7B0B04E5BB03E357FA0F6D99D6B8DF0AF05136_1655511792786_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"782\" height=\"528\"\/><\/p>\n<p>Open the project folder in your preferred code editor to view its code, and run <code>npm start<\/code> in your project\u2019s terminal to view it on <code>localhost:3000<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_21AEEEC5B155F7391AE086564C7B0B04E5BB03E357FA0F6D99D6B8DF0AF05136_1655622301573_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1862\" height=\"1020\"\/><\/p>\n<p>On the header of your Docusaurus website, you will see the site name <code>My Site<\/code>, the documentation page <code>Tutorial<\/code>, and the blog page <code>Blog<\/code>. Click on <code>Tutorial<\/code> to view the documentation page.<\/p>\n<h2>Upload Images to Cloudinary<\/h2>\n<p>In your browser, open the <a href=\"https:\/\/cloudinary.com\/console\/media_library\/folders\/home\">Media Library<\/a> tab in your <a href=\"https:\/\/cloudinary.com\/console\">Cloudinary dashboard<\/a> and create a new folder:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_21AEEEC5B155F7391AE086564C7B0B04E5BB03E357FA0F6D99D6B8DF0AF05136_1655620825498_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1391\" height=\"693\"\/><\/p>\n<p>Navigate into your new folder and upload your preferred images into it:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_21AEEEC5B155F7391AE086564C7B0B04E5BB03E357FA0F6D99D6B8DF0AF05136_1655621716759_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"973\" height=\"748\"\/><\/p>\n<p>Take note of the public id of each image you upload:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_21AEEEC5B155F7391AE086564C7B0B04E5BB03E357FA0F6D99D6B8DF0AF05136_1655621824661_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"726\" height=\"642\"\/><\/p>\n<p>For example, the public id of the sample image above is <code>docusaurus-demo\/photo-1648737155328-0c0012cf2f20_axwjc8<\/code> because you got the image from the <code>docusaurus-demo<\/code> folder you created in your Media Library.<\/p>\n<h2>Create a Custom Image Component<\/h2>\n<p>In your terminal, run the command below to install some Cloudinary packages for image optimization and transformation:<\/p>\n<pre><code>npm i @cloudinary\/url-gen @cloudinary\/react\n<\/code><\/pre>\n<p>In your code editor, navigate to the <code>src\/components\/<\/code> folder, create an <code>OptimizedImage\/index.js<\/code> file and fill it with the code below:<\/p>\n<pre><code>import React from 'react';\nimport { AdvancedImage } from '@cloudinary\/react';\nimport { Cloudinary } from '@cloudinary\/url-gen';\nimport { scale } from '@cloudinary\/url-gen\/actions\/resize';\n\nexport default function OptimizedImage({ publicId }) {\n  const cld = new Cloudinary({\n    cloud: {\n      cloudName: '&lt;CLOUDINARY_CLOUD_NAME&gt;',\n    },\n  });\n\n  const myImage = cld.image(`${publicId}`);\n\n  myImage.quality('auto').format('auto').resize(scale().width(480));\n\n  return (\n    &lt;div&gt;\n      &lt;AdvancedImage cldImg={myImage} \/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p>In the code above, you did the following:<\/p>\n<ul>\n<li>Imported <code>AdvancedImage<\/code> component from <code>@cloudinary\/react<\/code> and <code>Cloudinary<\/code> from <code>@cloudinary\/url-gen<\/code>\n<\/li>\n<li>Created an <code>OptimizedImage<\/code> component that takes <code>publicId<\/code> as its prop<\/li>\n<li>Initialized a new <code>Cloudinary<\/code> variable with your cloud name as its parameter<\/li>\n<li>Created a <code>myImage<\/code> variable which gets an image from Cloudinary through its public id<\/li>\n<li>Optimized <code>myImage<\/code> with transformation settings from Cloudinary<\/li>\n<li>Added <code>myImage<\/code> to the <code>&lt;AdvancedImage \/&gt;<\/code> component<\/li>\n<\/ul>\n<h2>Import Custom Image Component<\/h2>\n<p>In your <code>docs\/<\/code> folder, update <code>intro.md<\/code> with the code below:<\/p>\n<pre><code>---\nsidebar_position: 1\n---\nimport OptimizedImage from '..\/src\/components\/OptimizedImage';\n\n# Tutorial Intro\nLet's discover **Docusaurus in less than 5 minutes**.\n\n## Optimized Image\n&lt;OptimizedImage publicId=&quot;docusaurus-demo\/photo-1648737155328-0c0012cf2f20_axwjc8&quot; \/&gt;\n<\/code><\/pre>\n<p>Here, you imported the <code>OptimizedImage<\/code> component and added your Cloudinary image\u2019s public id.\nOn your browser, this will be the result:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_21AEEEC5B155F7391AE086564C7B0B04E5BB03E357FA0F6D99D6B8DF0AF05136_1655622593568_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1706\" height=\"893\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to spin up a documentation website using Docusaurus quickly and add an optimized image to it using Cloudinary. If you want to explore how to use Docusaurus or Cloudinary, check out the helpful resources below.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/www.youtube.com\/watch?v=2R53Y7eP45k\">Build a Markdown Documentation Site (Step by Step) | YouTube (Caleb Curry)<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/docusaurus.io\/showcase?tags=favorite\">Docusaurus Site Showcase | Docusaurus<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/react_image_transformations\">React SDK Image Transformations | Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization\">Image Optimization | Cloudinary<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28319,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,388,246,371],"class_list":["post-28318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-optimize","tag-react","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Adding Optimized Images to Docs in Docusaurus<\/title>\n<meta name=\"description\" content=\"Docusaurus is a static site generator that provides various features for creating and maintaining documentation. In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Optimized Images to Docs in Docusaurus\" \/>\n<meta property=\"og:description\" content=\"Docusaurus is a static site generator that provides various features for creating and maintaining documentation. In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-12T07:40:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-24T23:07:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d-png?_i=AA\" \/>\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\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Adding Optimized Images to Docs in Docusaurus\",\"datePublished\":\"2022-07-12T07:40:55+00:00\",\"dateModified\":\"2025-02-24T23:07:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Optimize\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/\",\"name\":\"Adding Optimized Images to Docs in Docusaurus\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA\",\"datePublished\":\"2022-07-12T07:40:55+00:00\",\"dateModified\":\"2025-02-24T23:07:31+00:00\",\"description\":\"Docusaurus is a static site generator that provides various features for creating and maintaining documentation. In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Optimized Images to Docs in Docusaurus\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding Optimized Images to Docs in Docusaurus","description":"Docusaurus is a static site generator that provides various features for creating and maintaining documentation. In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.","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:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/","og_locale":"en_US","og_type":"article","og_title":"Adding Optimized Images to Docs in Docusaurus","og_description":"Docusaurus is a static site generator that provides various features for creating and maintaining documentation. In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-07-12T07:40:55+00:00","article_modified_time":"2025-02-24T23:07:31+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/"},"author":{"name":"","@id":""},"headline":"Adding Optimized Images to Docs in Docusaurus","datePublished":"2022-07-12T07:40:55+00:00","dateModified":"2025-02-24T23:07:31+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA","keywords":["Guest Post","Image","Optimize","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/","name":"Adding Optimized Images to Docs in Docusaurus","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA","datePublished":"2022-07-12T07:40:55+00:00","dateModified":"2025-02-24T23:07:31+00:00","description":"Docusaurus is a static site generator that provides various features for creating and maintaining documentation. In this article, you will learn how to spin up a Docusaurus project and add an optimized image to your documentation through Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-optimized-images-to-docs-in-docusaurus\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Optimized Images to Docs in Docusaurus"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924826\/Web_Assets\/blog\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d\/b093a470de11e89eecceb24859161234dfa53ab5-1200x630-1_2831985e6d.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28318"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28318\/revisions"}],"predecessor-version":[{"id":36995,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28318\/revisions\/36995"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28319"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}