[{"data":1,"prerenderedAt":800},["ShallowReactive",2],{"navigation_docs":3,"-providers-imageengine":220,"-providers-imageengine-surround":795},[4,30,47,207],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Get Started","\u002Fget-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F1.installation",{"title":14,"path":15,"stem":16},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F2.configuration",{"title":18,"path":19,"stem":20},"Providers","\u002Fget-started\u002Fproviders","1.get-started\u002F3.providers",{"title":22,"path":23,"stem":24},"Contributing","\u002Fget-started\u002Fcontributing","1.get-started\u002F4.contributing",{"title":26,"path":27,"stem":28},"Migration","\u002Fget-started\u002Fmigration","1.get-started\u002F5.migration",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Usage","\u002Fusage","2.usage",[35,39,43],{"title":36,"path":37,"stem":38},"\u003CNuxtImg>","\u002Fusage\u002Fnuxt-img","2.usage\u002F1.nuxt-img",{"title":40,"path":41,"stem":42},"\u003CNuxtPicture>","\u002Fusage\u002Fnuxt-picture","2.usage\u002F2.nuxt-picture",{"title":44,"path":45,"stem":46},"useImage()","\u002Fusage\u002Fuse-image","2.usage\u002F3.use-image",{"title":18,"path":48,"stem":49,"children":50,"page":29},"\u002Fproviders","3.providers",[51,55,59,63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143,147,151,155,159,163,167,171,175,179,183,187,191,195,199,203],{"title":52,"path":53,"stem":54},"Aliyun","\u002Fproviders\u002Faliyun","3.providers\u002Faliyun",{"title":56,"path":57,"stem":58},"AWS Amplify","\u002Fproviders\u002Faws-amplify","3.providers\u002Faws-amplify",{"title":60,"path":61,"stem":62},"Builder.io","\u002Fproviders\u002Fbuilderio","3.providers\u002Fbuilderio",{"title":64,"path":65,"stem":66},"Bunny","\u002Fproviders\u002Fbunny","3.providers\u002Fbunny",{"title":68,"path":69,"stem":70},"Caisy","\u002Fproviders\u002Fcaisy","3.providers\u002Fcaisy",{"title":72,"path":73,"stem":74},"Cloudflare","\u002Fproviders\u002Fcloudflare","3.providers\u002Fcloudflare",{"title":76,"path":77,"stem":78},"Cloudflare Images","\u002Fproviders\u002Fcloudflareimages","3.providers\u002Fcloudflareimages",{"title":80,"path":81,"stem":82},"Cloudimage","\u002Fproviders\u002Fcloudimage","3.providers\u002Fcloudimage",{"title":84,"path":85,"stem":86},"Cloudinary","\u002Fproviders\u002Fcloudinary","3.providers\u002Fcloudinary",{"title":88,"path":89,"stem":90},"Contentful","\u002Fproviders\u002Fcontentful","3.providers\u002Fcontentful",{"title":92,"path":93,"stem":94},"Directus","\u002Fproviders\u002Fdirectus","3.providers\u002Fdirectus",{"title":96,"path":97,"stem":98},"Fastly","\u002Fproviders\u002Ffastly","3.providers\u002Ffastly",{"title":100,"path":101,"stem":102},"Filerobot","\u002Fproviders\u002Ffilerobot","3.providers\u002Ffilerobot",{"title":104,"path":105,"stem":106},"Flyimg","\u002Fproviders\u002Fflyimg","3.providers\u002Fflyimg",{"title":108,"path":109,"stem":110},"GitHub","\u002Fproviders\u002Fgithub","3.providers\u002Fgithub",{"title":112,"path":113,"stem":114},"Glide","\u002Fproviders\u002Fglide","3.providers\u002Fglide",{"title":116,"path":117,"stem":118},"Gumlet","\u002Fproviders\u002Fgumlet","3.providers\u002Fgumlet",{"title":120,"path":121,"stem":122},"Hygraph","\u002Fproviders\u002Fhygraph","3.providers\u002Fhygraph",{"title":124,"path":125,"stem":126},"ImageEngine","\u002Fproviders\u002Fimageengine","3.providers\u002Fimageengine",{"title":128,"path":129,"stem":130},"ImageKit","\u002Fproviders\u002Fimagekit","3.providers\u002Fimagekit",{"title":132,"path":133,"stem":134},"Imgix","\u002Fproviders\u002Fimgix","3.providers\u002Fimgix",{"title":136,"path":137,"stem":138},"IPX","\u002Fproviders\u002Fipx","3.providers\u002Fipx",{"title":140,"path":141,"stem":142},"Netlify","\u002Fproviders\u002Fnetlify","3.providers\u002Fnetlify",{"title":144,"path":145,"stem":146},"None","\u002Fproviders\u002Fnone","3.providers\u002Fnone",{"title":148,"path":149,"stem":150},"Picsum","\u002Fproviders\u002Fpicsum","3.providers\u002Fpicsum",{"title":152,"path":153,"stem":154},"Prepr","\u002Fproviders\u002Fprepr","3.providers\u002Fprepr",{"title":156,"path":157,"stem":158},"Prismic","\u002Fproviders\u002Fprismic","3.providers\u002Fprismic",{"title":160,"path":161,"stem":162},"Sanity","\u002Fproviders\u002Fsanity","3.providers\u002Fsanity",{"title":164,"path":165,"stem":166},"Shopify","\u002Fproviders\u002Fshopify","3.providers\u002Fshopify",{"title":168,"path":169,"stem":170},"Sirv","\u002Fproviders\u002Fsirv","3.providers\u002Fsirv",{"title":172,"path":173,"stem":174},"Storyblok","\u002Fproviders\u002Fstoryblok","3.providers\u002Fstoryblok",{"title":176,"path":177,"stem":178},"Strapi","\u002Fproviders\u002Fstrapi","3.providers\u002Fstrapi",{"title":180,"path":181,"stem":182},"Supabase","\u002Fproviders\u002Fsupabase","3.providers\u002Fsupabase",{"title":184,"path":185,"stem":186},"Twicpics","\u002Fproviders\u002Ftwicpics","3.providers\u002Ftwicpics",{"title":188,"path":189,"stem":190},"Umbraco","\u002Fproviders\u002Fumbraco","3.providers\u002Fumbraco",{"title":192,"path":193,"stem":194},"Unsplash","\u002Fproviders\u002Funsplash","3.providers\u002Funsplash",{"title":196,"path":197,"stem":198},"Uploadcare","\u002Fproviders\u002Fuploadcare","3.providers\u002Fuploadcare",{"title":200,"path":201,"stem":202},"Vercel","\u002Fproviders\u002Fvercel","3.providers\u002Fvercel",{"title":204,"path":205,"stem":206},"Weserv","\u002Fproviders\u002Fweserv","3.providers\u002Fweserv",{"title":208,"path":209,"stem":210,"children":211,"page":29},"Advanced","\u002Fadvanced","4.advanced",[212,216],{"title":213,"path":214,"stem":215},"Custom Provider","\u002Fadvanced\u002Fcustom-provider","4.advanced\u002F1.custom-provider",{"title":217,"path":218,"stem":219},"Static Images","\u002Fadvanced\u002Fstatic-images","4.advanced\u002F2.static-images",{"id":221,"title":124,"body":222,"description":783,"extension":784,"links":785,"meta":791,"navigation":792,"path":125,"seo":793,"stem":126,"__hash__":794},"docs\u002F3.providers\u002Fimageengine.md",{"type":223,"value":224,"toc":774},"minimark",[225,236,248,344,353,370,417,421,437,511,532,535,646,649,740,744,749,752,763,767,770],[226,227,228,229,235],"p",{},"Integration between ",[230,231,124],"a",{"href":232,"rel":233},"https:\u002F\u002Fimageengine.io",[234],"nofollow"," and the image module.",[226,237,238,239,243,244,247],{},"At a minimum, you must configure the ",[240,241,242],"code",{},"imageengine"," provider with the ",[240,245,246],{},"baseURL"," set to your ImageEngine Delivery Address:",[249,250,256],"pre",{"className":251,"code":252,"filename":253,"language":254,"meta":255,"style":255},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  image: {\n    imageengine: {\n      baseURL: 'https:\u002F\u002Fxxxxx.imgeng.in'\n    }\n  }\n})\n","nuxt.config.ts","ts","",[240,257,258,282,295,305,323,329,335],{"__ignoreMap":255},[259,260,263,267,270,274,278],"span",{"class":261,"line":262},"line",1,[259,264,266],{"class":265},"s7zQu","export",[259,268,269],{"class":265}," default",[259,271,273],{"class":272},"s2Zo4"," defineNuxtConfig",[259,275,277],{"class":276},"sTEyZ","(",[259,279,281],{"class":280},"sMK4o","{\n",[259,283,285,289,292],{"class":261,"line":284},2,[259,286,288],{"class":287},"swJcz","  image",[259,290,291],{"class":280},":",[259,293,294],{"class":280}," {\n",[259,296,298,301,303],{"class":261,"line":297},3,[259,299,300],{"class":287},"    imageengine",[259,302,291],{"class":280},[259,304,294],{"class":280},[259,306,308,311,313,316,320],{"class":261,"line":307},4,[259,309,310],{"class":287},"      baseURL",[259,312,291],{"class":280},[259,314,315],{"class":280}," '",[259,317,319],{"class":318},"sfazB","https:\u002F\u002Fxxxxx.imgeng.in",[259,321,322],{"class":280},"'\n",[259,324,326],{"class":261,"line":325},5,[259,327,328],{"class":280},"    }\n",[259,330,332],{"class":261,"line":331},6,[259,333,334],{"class":280},"  }\n",[259,336,338,341],{"class":261,"line":337},7,[259,339,340],{"class":280},"}",[259,342,343],{"class":276},")\n",[345,346,348,349,352],"h2",{"id":347},"imageengine-fit-values","ImageEngine ",[240,350,351],{},"fit"," Values",[226,354,355,356,363,364,369],{},"The ",[230,357,359,360,362],{"href":358},"\u002Fusage\u002Fnuxt-img#fit","standard values for ",[240,361,351],{}," property"," map onto ",[230,365,368],{"href":366,"rel":367},"https:\u002F\u002Fimageengine.io\u002Fdocs\u002Fdirectives",[234],"ImageEngine Directives"," as follows:",[371,372,373,383,391,399,408],"ul",{},[374,375,376,379,380],"li",{},[240,377,378],{},"cover",": ",[240,381,382],{},"m_cropbox",[374,384,385,379,388],{},[240,386,387],{},"contain",[240,389,390],{},"m_letterbox",[374,392,393,379,396],{},[240,394,395],{},"fill",[240,397,398],{},"m_stretch",[374,400,401,379,404,407],{},[240,402,403],{},"inside",[240,405,406],{},"m_box",", this is the default fit method for the ImageEngine provider.",[374,409,410,413,414,416],{},[240,411,412],{},"outside",": This fit method is not supported and functions the same as ",[240,415,403],{},".",[345,418,420],{"id":419},"imageengine-modifiers","ImageEngine Modifiers",[226,422,423,424,428,429,432,433,436],{},"In addition to the ",[230,425,427],{"href":426},"\u002Fusage\u002Fnuxt-img#modifiers","standard modifiers",", you can also use all ",[230,430,368],{"href":366,"rel":431},[234]," by adding them to the ",[240,434,435],{},"modifiers"," property with the following attribute names:",[371,438,439,448,455,463,471,479,487,495,503],{},[374,440,441,379,444,447],{},[240,442,443],{},"format",[240,445,446],{},"f"," directive",[374,449,450,379,452,447],{},[240,451,351],{},[240,453,454],{},"m",[374,456,457,379,460,447],{},[240,458,459],{},"passThrough",[240,461,462],{},"pass",[374,464,465,379,468,447],{},[240,466,467],{},"sharpen",[240,469,470],{},"s",[374,472,473,379,476,447],{},[240,474,475],{},"rotate",[240,477,478],{},"r",[374,480,481,379,484,447],{},[240,482,483],{},"screenPercent",[240,485,486],{},"pc",[374,488,489,379,492,447],{},[240,490,491],{},"crop",[240,493,494],{},"cr",[374,496,497,379,500,447],{},[240,498,499],{},"inline",[240,501,502],{},"in",[374,504,505,379,508,447],{},[240,506,507],{},"metadata",[240,509,510],{},"meta",[512,513,514],"blockquote",{},[226,515,516,517,520,521,524,525,527,528,531],{},"Note that the standard ",[240,518,519],{},"quality"," attribute is converted to the ImageEngine ",[240,522,523],{},"cmpr"," compression directive. ",[240,526,519],{}," is the opposite of compression, so 80% quality equals 20% compression. Since ImageEngine automatically adapts image quality the visitor's device, browser and network quality, it is recommended that you do not explicitly set the quality. If you want to completely disable all optimizations to an image, you should use ",[240,529,530],{},":modifiers=\"{ passThrough: 'true' }\"",", which will serve the unaltered image.",[226,533,534],{},"Example 1: Cropping an image to a width and height of 100x80, starting 10 pixels from the top and 20 pixels from the left:",[249,536,540],{"className":537,"code":538,"language":539,"meta":255,"style":255},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  provider=\"imageengine\"\n  src=\"\u002Fsome-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ cr: '100,80,10,20' }\"\n\u002F>\n","vue",[240,541,542,550,567,581,595,609,641],{"__ignoreMap":255},[259,543,544,547],{"class":261,"line":262},[259,545,546],{"class":280},"\u003C",[259,548,549],{"class":287},"NuxtImg\n",[259,551,552,556,559,562,564],{"class":261,"line":284},[259,553,555],{"class":554},"spNyl","  provider",[259,557,558],{"class":280},"=",[259,560,561],{"class":280},"\"",[259,563,242],{"class":318},[259,565,566],{"class":280},"\"\n",[259,568,569,572,574,576,579],{"class":261,"line":297},[259,570,571],{"class":554},"  src",[259,573,558],{"class":280},[259,575,561],{"class":280},[259,577,578],{"class":318},"\u002Fsome-image.jpg",[259,580,566],{"class":280},[259,582,583,586,588,590,593],{"class":261,"line":307},[259,584,585],{"class":554},"  width",[259,587,558],{"class":280},[259,589,561],{"class":280},[259,591,592],{"class":318},"100",[259,594,566],{"class":280},[259,596,597,600,602,604,607],{"class":261,"line":325},[259,598,599],{"class":554},"  height",[259,601,558],{"class":280},[259,603,561],{"class":280},[259,605,606],{"class":318},"80",[259,608,566],{"class":280},[259,610,611,614,616,618,620,623,626,628,630,633,636,639],{"class":261,"line":331},[259,612,613],{"class":280},"  :",[259,615,435],{"class":554},[259,617,558],{"class":280},[259,619,561],{"class":280},[259,621,622],{"class":280},"{",[259,624,625],{"class":287}," cr",[259,627,291],{"class":280},[259,629,315],{"class":280},[259,631,632],{"class":318},"100,80,10,20",[259,634,635],{"class":280},"'",[259,637,638],{"class":280}," }",[259,640,566],{"class":280},[259,642,643],{"class":261,"line":337},[259,644,645],{"class":276},"\u002F>\n",[226,647,648],{},"Example 2: Instruct ImageEngine to keep the image's EXIF metadata (which is normally removed to reduce the image byte size):",[249,650,652],{"className":537,"code":651,"language":539,"meta":255,"style":255},"\u003CNuxtImg\n  provider=\"imageengine\"\n  src=\"\u002Fsome-image.jpg\"\n  width=\"100\"\n  height=\"80\"\n  :modifiers=\"{ meta: 'true' }\"\n\u002F>\n",[240,653,654,660,672,684,696,708,736],{"__ignoreMap":255},[259,655,656,658],{"class":261,"line":262},[259,657,546],{"class":280},[259,659,549],{"class":287},[259,661,662,664,666,668,670],{"class":261,"line":284},[259,663,555],{"class":554},[259,665,558],{"class":280},[259,667,561],{"class":280},[259,669,242],{"class":318},[259,671,566],{"class":280},[259,673,674,676,678,680,682],{"class":261,"line":297},[259,675,571],{"class":554},[259,677,558],{"class":280},[259,679,561],{"class":280},[259,681,578],{"class":318},[259,683,566],{"class":280},[259,685,686,688,690,692,694],{"class":261,"line":307},[259,687,585],{"class":554},[259,689,558],{"class":280},[259,691,561],{"class":280},[259,693,592],{"class":318},[259,695,566],{"class":280},[259,697,698,700,702,704,706],{"class":261,"line":325},[259,699,599],{"class":554},[259,701,558],{"class":280},[259,703,561],{"class":280},[259,705,606],{"class":318},[259,707,566],{"class":280},[259,709,710,712,714,716,718,720,723,725,727,730,732,734],{"class":261,"line":331},[259,711,613],{"class":280},[259,713,435],{"class":554},[259,715,558],{"class":280},[259,717,561],{"class":280},[259,719,622],{"class":280},[259,721,722],{"class":287}," meta",[259,724,291],{"class":280},[259,726,315],{"class":280},[259,728,729],{"class":318},"true",[259,731,635],{"class":280},[259,733,638],{"class":280},[259,735,566],{"class":280},[259,737,738],{"class":261,"line":337},[259,739,645],{"class":276},[345,741,743],{"id":742},"imageengine-best-practices","ImageEngine Best Practices",[745,746,748],"h3",{"id":747},"automatic-format-and-quality-detection","Automatic format and quality detection",[226,750,751],{},"ImageEngine automatically detects the best format and quality for your image based on the characteristics of the specific device that requested it.",[226,753,754,755,758,759,762],{},"This feature is very effective and it is not recommended that you disable it, but if you must, you can manually specify the format (ex: ",[240,756,757],{},"format='webp'",") and quality (",[240,760,761],{},"quality='80'",").",[745,764,766],{"id":765},"imageengine-settings","ImageEngine Settings",[226,768,769],{},"ImageEngine allows you to set all of the modifiers\u002Fdirectives in the ImageEngine control panel under advanced settings. This is a good place to set default adjustments since you can modify them without having to make changes to your Nuxt codebase. If a directive is set in both Nuxt and the ImageEngine User-Adjustable Settings, the value in Nuxt takes priority.",[771,772,773],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":255,"searchDepth":284,"depth":284,"links":775},[776,778,779],{"id":347,"depth":284,"text":777},"ImageEngine fit Values",{"id":419,"depth":284,"text":420},{"id":742,"depth":284,"text":743,"children":780},[781,782],{"id":747,"depth":297,"text":748},{"id":765,"depth":297,"text":766},"Nuxt Image has first class integration with ImageEngine.","md",[786],{"label":787,"icon":788,"to":789,"size":790},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fimage\u002Fblob\u002Fmain\u002Fsrc\u002Fruntime\u002Fproviders\u002Fimageengine.ts","xs",{},true,{"title":124,"description":783},"HIC9qo58tKjjl8DdkvtF1rJWKGebhbBC6erYRaCcNYQ",[796,798],{"title":120,"path":121,"stem":122,"description":797,"children":-1},"Nuxt Image with Hygraph integration.",{"title":128,"path":129,"stem":130,"description":799,"children":-1},"Nuxt Image has first class integration with ImageKit.",1775283768358]