https://docusaurus.io/assets/js/72da1eff.c45d1f72.js

1"use strict";(globalThis.rspackChunkwebsite||=[]).push([[16440],{79559(e,n,i){i.r(n),i.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>m,frontMatter:()=>o,metadata:()=>r,toc:()=>h});var r=JSON.parse('{"id":"api/plugins/plugin-ideal-image","title":"\u{1F4E6} plugin-ideal-image","description":"Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder).","source":"@site/versioned_docs/version-3.5.2/api/plugins/plugin-ideal-image.mdx","sourceDirName":"api/plugins","slug":"/api/plugins/@docusaurus/plugin-ideal-image","permalink":"/docs/3.5.2/api/plugins/@docusaurus/plugin-ideal-image","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/edit/main/website/docs/api/plugins/plugin-ideal-image.mdx","tags":[],"version":"3.5.2","lastUpdatedBy":"S\xe9bastien Lorber","lastUpdatedAt":1772830092000,"sidebarPosition":8,"frontMatter":{"sidebar_position":8,"slug":"/api/plugins/@docusaurus/plugin-ideal-image"},"sidebar":"api","previous":{"title":"\u{1F4E6} plugin-google-tag-manager","permalink":"/docs/3.5.2/api/plugins/@docusaurus/plugin-google-tag-manager"},"next":{"title":"\u{1F4E6} plugin-pwa","permalink":"/docs/3.5.2/api/plugins/@docusaurus/plugin-pwa"}}'),a=i(61058),t=i(24801),l=i(65855),s=i(49714),d=i(65665);let o={sidebar_position:8,slug:"/api/plugins/@docusaurus/plugin-ideal-image"},c="\u{1F4E6} plugin-ideal-image",u={},h=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Configuration",id:"configuration",level:2},{value:"Example configuration",id:"ex-config",level:3}];function p(e){let n={a:"a",admonition:"admonition",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"-plugin-ideal-image",children:"\u{1F4E6} plugin-ideal-image"})}),"\n","\n",(0,a.jsx)(n.p,{children:"Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder)."}),"\n",(0,a.jsx)(n.admonition,{type:"info",children:(0,a.jsxs)(n.p,{children:["By default, the plugin is ",(0,a.jsx)(n.strong,{children:"inactive in development"})," so you could always view full-scale images. If you want to debug the ideal image behavior, you could set the ",(0,a.jsx)(n.a,{href:"#disableInDev",children:(0,a.jsx)(n.code,{children:"disableInDev"})})," option to ",(0,a.jsx)(n.code,{children:"false"}),"."]})}),"\n",(0,a.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(l.A,{groupId:"npm2yarn",children:[(0,a.jsx)(s.A,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install --save @docusaurus/plugin-ideal-image\n"})})}),(0,a.jsx)(s.A,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add @docusaurus/plugin-ideal-image\n"})})}),(0,a.jsx)(s.A,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add @docusaurus/plugin-ideal-image\n"})})}),(0,a.jsx)(s.A,{value:"bun",label:"Bun",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"bun add @docusaurus/plugin-ideal-image\n"})})})]}),"\n",(0,a.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsx)(n.p,{children:"This plugin supports the PNG and JPG formats only."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-jsx",children:"import Image from '@theme/IdealImage';\nimport thumbnail from './path/to/img.png';\n\n// your React code\n<Image img={thumbnail} />\n\n// or\n<Image img={require('./path/to/img.png')} />\n"})}),"\n",(0,a.jsxs)(n.admonition,{type:"warning",children:[(0,a.jsxs)(n.p,{children:["This plugin registers a ",(0,a.jsx)(n.a,{href:"https://webpack.js.org/loaders/",children:"Webpack loader"})," that changes the type of imported/require images:"]}),(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["Before: ",(0,a.jsx)(n.code,{children:"string"})]}),"\n",(0,a.jsxs)(n.li,{children:["After: ",(0,a.jsx)(n.code,{children:'{preSrc: string, src: import("@theme/IdealImage").SrcImage}'})]}),"\n"]})]}),"\n",(0,a.jsx)(n.h2,{id:"configuration",children:"Configuration"}),"\n",(0,a.jsx)(n.p,{children:"Accepted fields:"}),"\n",(0,a.jsx)(d.A,{children:(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"Option"}),(0,a.jsx)(n.th,{children:"Type"}),(0,a.jsx)(n.th,{children:"Default"}),(0,a.jsx)(n.th,{children:"Description"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"name"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"ideal-img/[name].[hash:hex:7].[width].[ext]"})}),(0,a.jsx)(n.td,{children:"Filename template for output files."})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"sizes"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"number[]"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.em,{children:"original size"})}),(0,a.jsx)(n.td,{children:"Specify all widths you want to use. If a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)."})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"size"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"number"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.em,{children:"original size"})}),(0,a.jsx)(n.td,{children:"Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"min"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"number"})}),(0,a.jsx)(n.td,{}),(0,a.jsxs)(n.td,{children:["As an alternative to manually specifying ",(0,a.jsx)(n.code,{children:"sizes"}),", you can specify ",(0,a.jsx)(n.code,{children:"min"}),", ",(0,a.jsx)(n.code,{children:"max"})," and ",(0,a.jsx)(n.code,{children:"steps"}),", and the sizes will be generated for you."]})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"max"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"number"})}),(0,a.jsx)(n.td,{}),(0,a.jsxs)(n.td,{children:["See ",(0,a.jsx)(n.code,{children:"min"})," above"]})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"steps"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"number"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"4"})}),(0,a.jsxs)(n.td,{children:["Configure the number of images generated between ",(0,a.jsx)(n.code,{children:"min"})," and ",(0,a.jsx)(n.code,{children:"max"})," (inclusive)"]})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"quality"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"number"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"85"})}),(0,a.jsx)(n.td,{children:"JPEG compression quality"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"disableInDev"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"true"})}),(0,a.jsxs)(n.td,{children:["You can test ideal image behavior in dev mode by setting this to ",(0,a.jsx)(n.code,{children:"false"}),". ",(0,a.jsx)(n.strong,{children:"Tip"}),": use ",(0,a.jsx)(n.a,{href:"https://www.browserstack.com/guide/how-to-perform-network-throttling-in-chrome",children:"network throttling"})," in your browser to simulate slow networks."]})]})]})]})}),"\n",(0,a.jsx)(n.h3,{id:"ex-config",children:"Example configuration"}),"\n",(0,a.jsx)(n.p,{children:"Here's an example configuration:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'title="docusaurus.config.js"',children:"export default {\n  plugins: [\n    [\n      '@docusaurus/plugin-ideal-image',\n      // highlight-start\n      {\n        quality: 70,\n        max: 1030, // max resized image's size.\n        min: 640, // min resized image's size. if original is lower, use that size.\n        steps: 2, // the max number of images generated between min and max (inclusive)\n        disableInDev: false,\n      },\n      // highlight-end\n    ],\n  ],\n};\n"})})]})}function m(e={}){let{wrapper:n}={...(0,t.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(p,{...e})}):p(e)}}

1,49714(e,n,i){i.d(n,{A:()=>s});var r=i(61058);i(13706);var a=i(23372),t=i(25237);function l({children:e,className:n,hidden:i}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.A)("tabItem_pnkT",n),hidden:i,children:e})}function s({children:e,className:n,value:i}){let{selectedValue:a,lazy:d}=(0,t.uc)(),o=i===a;return!o&&d?null:(0,r.jsx)(l,{className:n,hidden:!o,children:e})}},65855(e,n,i){i.d(n,{A:()=>h});var r=i(61058);i(13706);var a=i(23372),t=i(2445),l=i(25237),s=i(70662),d=i(73749);function o({className:e}){let{selectedValue:n,selectValue:i,tabValues:t,block:d}=(0,l.uc)(),c=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.a_)(),h=e=>{let r=e.currentTarget,a=t[c.indexOf(r)].value;a!==n&&(u(r),i(a))},p=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{let i=c.indexOf(e.currentTarget)+1;n=c[i]??c[0];break}case"ArrowLeft":{let i=c.indexOf(e.currentTarget)-1;n=c[i]??c[c.length-1]}}n?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.A)("tabs",{"tabs--block":d},e),children:t.map(({value:e,label:i,attributes:t})=>(0,r.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{c.push(e)},onKeyDown:p,onClick:h,...t,className:(0,a.A)("tabs__item","tabItem_AQgk",t?.className,{"tabs__item--active":n===e}),children:i??e},e))})}function c({children:e}){return(0,r.jsx)("div",{className:"margin-top--md",children:e})}function u({className:e,children:n}){return(0,r.jsxs)("div",{className:(0,a.A)(t.G.tabs.container,"tabs-container","tabList_Qoir"),children:[(0,r.jsx)(o,{className:e}),(0,r.jsx)(c,{children:n})]})}function h(e){let n=(0,d.A)(),i=(0,l.OC)(e);return(0,r.jsx)(l.O_,{value:i,children:(0,r.jsx)(u,{className:e.className,children:(0,l.vT)(e.children)})},String(n))}},25237(e,n,i){i.d(n,{OC:()=>u,O_:()=>m,uc:()=>p,vT:()=>o});var r=i(61058),a=i(13706),t=i(90577),l=i(27611),s=i(78328),d=i(87116);function o(e){return a.Children.toArray(e).filter(e=>"\n"!==e)}function c({value:e,tabValues:n}){return n.some(n=>n.value===e)}function u(e){let n,{defaultValue:i,queryString:r=!1,groupId:o}=e,u=function(e){let{values:n,children:i}=e;return(0,a.useMemo)(()=>{let e=n??a.Children.toArray(i).flatMap(e=>{if(!e)return[];if((0,a.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];let n="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${n}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.
2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:n,attributes:i,default:r}})=>({value:e,label:n,attributes:i,default:r})),r=(0,s.XI)(e,(e,n)=>e.value===n.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,i])}(e),[h,p]=(0,a.useState)(()=>(function({defaultValue:e,tabValues:n}){if(0===n.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!c({value:e,tabValues:n}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let i=n.find(e=>e.default)??n[0];if(!i)throw Error("Unexpected error: 0 tabValues");return i.value})({defaultValue:i,tabValues:u})),[m,g]=function({queryString:e=!1,groupId:n}){let i=(0,t.W6)(),r=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,l.aZ)(r),(0,a.useCallback)(e=>{if(!r)return;let n=new URLSearchParams(i.location.search);n.set(r,e),i.replace({...i.location,search:n.toString()})},[r,i])]}({queryString:r,groupId:o}),[x,j]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[i,r]=(0,d.Dv)(n);return[i,(0,a.useCallback)(e=>{n&&r.set(e)},[n,r])]}({groupId:o}),f=c({value:n=m??x,tabValues:u})?n:null;return(0,a.useLayoutEffect)(()=>{f&&p(f)},[f]),{selectedValue:h,selectValue:(0,a.useCallback)(e=>{if(!c({value:e,tabValues:u}))throw Error(`Can't select invalid tab value=${e}`);p(e),g(e),j(e)},[g,j,u]),tabValues:u,lazy:e.lazy??!1,block:e.block??!1}}let h=(0,a.createContext)(null);function p(){let e=a.useContext(h);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function m(e){return(0,r.jsx)(h,{value:e.value,children:e.children})}},65665(e,n,i){i.d(n,{A:()=>d});var r=i(61058),a=i(13706),t=i(50547),l=i(90577);function s({name:e,children:n,ref:i}

2){let d=function(e){let n=e;for(;(0,a.isValidElement)(n);)[n]=a.Children.toArray(n.props.children);if("string"!=typeof n)throw Error(`Could not extract APITable row name from JSX tree:
3${JSON.stringify(e,null,2)}`);return n}(n),o=e?`${e}-${d}`:d,c=`#${o}`,u=(0,l.W6)();return(0,t.A)().collectAnchor(o),(0,r.jsx)("tr",{id:o,tabIndex:0,ref:u.location.hash===c?i:void 0,onClick:e=>{let n="TD"===e.target.tagName.toUpperCase(),i=!!window.getSelection()?.toString();n&&!i&&u.push(c)},onKeyDown:e=>{"Enter"===e.key&&u.push(c)},children:n.props.children})}function d({children:e,name:n}){if("table"!==e.type)throw Error("Bad usage of APITable component.\nIt is probably that your Markdown table is malformed.\nMake sure to double-check you have the appropriate number of columns for each table row.");let[i,t]=a.Children.toArray(e.props.children),l=(0,a.useRef)(null);(0,a.useEffect)(()=>{l.current?.focus()},[l]);let o=a.Children.map(t.props.children,e=>(0,r.jsx)(s,{name:n,ref:l,children:e}));return(0,r.jsxs)("table",{className:"apiTable_e8hp",children:[i,(0,r.jsx)("tbody",{children:o})]})}},24801(e,n,i){var r=i(13706);let a={},t=r.createContext(a);function l(e){let n=r.useContext(t);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(t.Provider,{value:n},e.children)}i.d(n,{R:()=>l,x:()=>s})}}]);