[{"data":1,"prerenderedAt":2537},["Reactive",2],{"navigation":3,"docs-/usage/use-image":112,"docs-/usage/use-image-surround":1709},[4,17,30,102],{"title":5,"_path":6,"children":7},"Get Started","/get-started",[8,11,14],{"title":9,"_path":10},"Installation","/get-started/installation",{"title":12,"_path":13},"Configuration","/get-started/configuration",{"title":15,"_path":16},"Providers","/get-started/providers",{"title":18,"_path":19,"children":20},"Usage","/usage",[21,24,27],{"title":22,"_path":23},"\u003CNuxtImg>","/usage/nuxt-img",{"title":25,"_path":26},"\u003CNuxtPicture>","/usage/nuxt-picture",{"title":28,"_path":29},"useImage()","/usage/use-image",{"title":15,"_path":31,"children":32},"/providers",[33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99],{"title":34,"_path":35},"Cloudflare","/providers/cloudflare",{"title":37,"_path":38},"Cloudimage","/providers/cloudimage",{"title":40,"_path":41},"Cloudinary","/providers/cloudinary",{"title":43,"_path":44},"Contentful","/providers/contentful",{"title":46,"_path":47},"Directus","/providers/directus",{"title":49,"_path":50},"Edgio","/providers/edgio",{"title":52,"_path":53},"Fastly","/providers/fastly",{"title":55,"_path":56},"Glide","/providers/glide",{"title":58,"_path":59},"Gumlet","/providers/gumlet",{"title":61,"_path":62},"ImageEngine","/providers/imageengine",{"title":64,"_path":65},"ImageKit","/providers/imagekit",{"title":67,"_path":68},"Imgix","/providers/imgix",{"title":70,"_path":71},"IPX","/providers/ipx",{"title":73,"_path":74},"Netlify","/providers/netlify",{"title":76,"_path":77},"Prepr","/providers/prepr",{"title":79,"_path":80},"Prismic","/providers/prismic",{"title":82,"_path":83},"Sanity","/providers/sanity",{"title":85,"_path":86},"Storyblok","/providers/storyblok",{"title":88,"_path":89},"Strapi","/providers/strapi",{"title":91,"_path":92},"Twicpics","/providers/twicpics",{"title":94,"_path":95},"Unsplash","/providers/unsplash",{"title":97,"_path":98},"Uploadcare","/providers/uploadcare",{"title":100,"_path":101},"Vercel","/providers/vercel",{"title":103,"_path":104,"children":105},"Advanced","/advanced",[106,109],{"title":107,"_path":108},"Custom Provider","/advanced/custom-provider",{"title":110,"_path":111},"Static Images","/advanced/static-images",{"_path":29,"_dir":113,"_draft":114,"_partial":114,"_locale":115,"_empty":114,"title":28,"description":116,"body":117,"_type":1704,"_id":1705,"_source":1706,"_file":1707,"_extension":1708},"usage",false,"","A Vue composable that returns a helper function to generate optimized image URLs.",{"type":118,"children":119,"toc":1699},"root",[120,161,166,262,280,564,574,674,689,697,826,840,1694],{"type":121,"tag":122,"props":123,"children":124},"element","p",{},[125,128,133,135,139,141,145,147,152,154,159],{"type":126,"value":127},"text","Sometimes you might need to use a generated image URL directly with applied transformations instead of the ",{"type":121,"tag":129,"props":130,"children":131},"code-inline",{},[132],{"type":126,"value":22},{"type":126,"value":134}," and ",{"type":121,"tag":129,"props":136,"children":137},{},[138],{"type":126,"value":25},{"type":126,"value":140}," components. This is where ",{"type":121,"tag":129,"props":142,"children":143},{},[144],{"type":126,"value":28},{"type":126,"value":146}," comes in (and the helper function it returns, which you will often see referenced directly as ",{"type":121,"tag":129,"props":148,"children":149},{},[150],{"type":126,"value":151},"$img",{"type":126,"value":153}," or ",{"type":121,"tag":129,"props":155,"children":156},{},[157],{"type":126,"value":158},"img",{"type":126,"value":160},").",{"type":121,"tag":162,"props":163,"children":164},"h2",{"id":113},[165],{"type":126,"value":18},{"type":121,"tag":167,"props":168,"children":173},"code",{"className":169,"code":171,"language":172,"meta":115},[170],"language-js","const img = useImage()\n\nimg(src, modifiers, options)\n","js",[174],{"type":121,"tag":175,"props":176,"children":177},"pre",{},[178],{"type":121,"tag":167,"props":179,"children":180},{"__ignoreMap":115},[181,221,230],{"type":121,"tag":182,"props":183,"children":186},"span",{"class":184,"line":185},"line",1,[187,193,199,205,210,216],{"type":121,"tag":182,"props":188,"children":190},{"class":189},"ct-046724",[191],{"type":126,"value":192},"const",{"type":121,"tag":182,"props":194,"children":196},{"class":195},"ct-770753",[197],{"type":126,"value":198}," img ",{"type":121,"tag":182,"props":200,"children":202},{"class":201},"ct-209289",[203],{"type":126,"value":204},"=",{"type":121,"tag":182,"props":206,"children":207},{"class":195},[208],{"type":126,"value":209}," ",{"type":121,"tag":182,"props":211,"children":213},{"class":212},"ct-750008",[214],{"type":126,"value":215},"useImage",{"type":121,"tag":182,"props":217,"children":218},{"class":195},[219],{"type":126,"value":220},"()\n",{"type":121,"tag":182,"props":222,"children":224},{"class":184,"line":223},2,[225],{"type":121,"tag":182,"props":226,"children":227},{},[228],{"type":126,"value":229},"\n",{"type":121,"tag":182,"props":231,"children":233},{"class":184,"line":232},3,[234,238,243,248,253,257],{"type":121,"tag":182,"props":235,"children":236},{"class":212},[237],{"type":126,"value":158},{"type":121,"tag":182,"props":239,"children":240},{"class":195},[241],{"type":126,"value":242},"(src",{"type":121,"tag":182,"props":244,"children":245},{"class":201},[246],{"type":126,"value":247},",",{"type":121,"tag":182,"props":249,"children":250},{"class":195},[251],{"type":126,"value":252}," modifiers",{"type":121,"tag":182,"props":254,"children":255},{"class":201},[256],{"type":126,"value":247},{"type":121,"tag":182,"props":258,"children":259},{"class":195},[260],{"type":126,"value":261}," options)",{"type":121,"tag":122,"props":263,"children":264},{},[265,271,273,278],{"type":121,"tag":266,"props":267,"children":268},"strong",{},[269],{"type":126,"value":270},"Example:",{"type":126,"value":272}," Generate image URL for ",{"type":121,"tag":129,"props":274,"children":275},{},[276],{"type":126,"value":277},"backgroundImage",{"type":126,"value":279}," style.",{"type":121,"tag":167,"props":281,"children":284},{"className":282,"code":283,"language":172,"meta":115},[170],"const img = useImage()\nconst backgroundStyles = computed(() => {\n  const imgUrl = img('https://github.com/nuxt.png', { width: 100 })\n  return { backgroundImage: `url('${imgUrl}')` }\n})\n",[285],{"type":121,"tag":175,"props":286,"children":287},{},[288],{"type":121,"tag":167,"props":289,"children":290},{"__ignoreMap":115},[291,318,371,475,551],{"type":121,"tag":182,"props":292,"children":293},{"class":184,"line":185},[294,298,302,306,310,314],{"type":121,"tag":182,"props":295,"children":296},{"class":189},[297],{"type":126,"value":192},{"type":121,"tag":182,"props":299,"children":300},{"class":195},[301],{"type":126,"value":198},{"type":121,"tag":182,"props":303,"children":304},{"class":201},[305],{"type":126,"value":204},{"type":121,"tag":182,"props":307,"children":308},{"class":195},[309],{"type":126,"value":209},{"type":121,"tag":182,"props":311,"children":312},{"class":212},[313],{"type":126,"value":215},{"type":121,"tag":182,"props":315,"children":316},{"class":195},[317],{"type":126,"value":220},{"type":121,"tag":182,"props":319,"children":320},{"class":184,"line":223},[321,325,330,334,338,343,348,353,357,362,366],{"type":121,"tag":182,"props":322,"children":323},{"class":189},[324],{"type":126,"value":192},{"type":121,"tag":182,"props":326,"children":327},{"class":195},[328],{"type":126,"value":329}," backgroundStyles ",{"type":121,"tag":182,"props":331,"children":332},{"class":201},[333],{"type":126,"value":204},{"type":121,"tag":182,"props":335,"children":336},{"class":195},[337],{"type":126,"value":209},{"type":121,"tag":182,"props":339,"children":340},{"class":212},[341],{"type":126,"value":342},"computed",{"type":121,"tag":182,"props":344,"children":345},{"class":195},[346],{"type":126,"value":347},"(",{"type":121,"tag":182,"props":349,"children":350},{"class":201},[351],{"type":126,"value":352},"()",{"type":121,"tag":182,"props":354,"children":355},{"class":195},[356],{"type":126,"value":209},{"type":121,"tag":182,"props":358,"children":359},{"class":189},[360],{"type":126,"value":361},"=>",{"type":121,"tag":182,"props":363,"children":364},{"class":195},[365],{"type":126,"value":209},{"type":121,"tag":182,"props":367,"children":368},{"class":201},[369],{"type":126,"value":370},"{\n",{"type":121,"tag":182,"props":372,"children":373},{"class":184,"line":232},[374,380,384,388,393,397,401,405,409,413,418,424,428,432,436,441,446,451,455,461,465,470],{"type":121,"tag":182,"props":375,"children":377},{"class":376},"ct-007771",[378],{"type":126,"value":379},"  ",{"type":121,"tag":182,"props":381,"children":382},{"class":189},[383],{"type":126,"value":192},{"type":121,"tag":182,"props":385,"children":386},{"class":376},[387],{"type":126,"value":209},{"type":121,"tag":182,"props":389,"children":390},{"class":195},[391],{"type":126,"value":392},"imgUrl",{"type":121,"tag":182,"props":394,"children":395},{"class":376},[396],{"type":126,"value":209},{"type":121,"tag":182,"props":398,"children":399},{"class":201},[400],{"type":126,"value":204},{"type":121,"tag":182,"props":402,"children":403},{"class":376},[404],{"type":126,"value":209},{"type":121,"tag":182,"props":406,"children":407},{"class":212},[408],{"type":126,"value":158},{"type":121,"tag":182,"props":410,"children":411},{"class":376},[412],{"type":126,"value":347},{"type":121,"tag":182,"props":414,"children":415},{"class":201},[416],{"type":126,"value":417},"'",{"type":121,"tag":182,"props":419,"children":421},{"class":420},"ct-709943",[422],{"type":126,"value":423},"https://github.com/nuxt.png",{"type":121,"tag":182,"props":425,"children":426},{"class":201},[427],{"type":126,"value":417},{"type":121,"tag":182,"props":429,"children":430},{"class":201},[431],{"type":126,"value":247},{"type":121,"tag":182,"props":433,"children":434},{"class":376},[435],{"type":126,"value":209},{"type":121,"tag":182,"props":437,"children":438},{"class":201},[439],{"type":126,"value":440},"{",{"type":121,"tag":182,"props":442,"children":443},{"class":376},[444],{"type":126,"value":445}," width",{"type":121,"tag":182,"props":447,"children":448},{"class":201},[449],{"type":126,"value":450},":",{"type":121,"tag":182,"props":452,"children":453},{"class":376},[454],{"type":126,"value":209},{"type":121,"tag":182,"props":456,"children":458},{"class":457},"ct-257267",[459],{"type":126,"value":460},"100",{"type":121,"tag":182,"props":462,"children":463},{"class":376},[464],{"type":126,"value":209},{"type":121,"tag":182,"props":466,"children":467},{"class":201},[468],{"type":126,"value":469},"}",{"type":121,"tag":182,"props":471,"children":472},{"class":376},[473],{"type":126,"value":474},")\n",{"type":121,"tag":182,"props":476,"children":478},{"class":184,"line":477},4,[479,483,489,493,497,502,506,510,515,520,525,529,533,538,542,546],{"type":121,"tag":182,"props":480,"children":481},{"class":376},[482],{"type":126,"value":379},{"type":121,"tag":182,"props":484,"children":486},{"class":485},"ct-064524",[487],{"type":126,"value":488},"return",{"type":121,"tag":182,"props":490,"children":491},{"class":376},[492],{"type":126,"value":209},{"type":121,"tag":182,"props":494,"children":495},{"class":201},[496],{"type":126,"value":440},{"type":121,"tag":182,"props":498,"children":499},{"class":376},[500],{"type":126,"value":501}," backgroundImage",{"type":121,"tag":182,"props":503,"children":504},{"class":201},[505],{"type":126,"value":450},{"type":121,"tag":182,"props":507,"children":508},{"class":376},[509],{"type":126,"value":209},{"type":121,"tag":182,"props":511,"children":512},{"class":201},[513],{"type":126,"value":514},"`",{"type":121,"tag":182,"props":516,"children":517},{"class":420},[518],{"type":126,"value":519},"url('",{"type":121,"tag":182,"props":521,"children":522},{"class":201},[523],{"type":126,"value":524},"${",{"type":121,"tag":182,"props":526,"children":527},{"class":195},[528],{"type":126,"value":392},{"type":121,"tag":182,"props":530,"children":531},{"class":201},[532],{"type":126,"value":469},{"type":121,"tag":182,"props":534,"children":535},{"class":420},[536],{"type":126,"value":537},"')",{"type":121,"tag":182,"props":539,"children":540},{"class":201},[541],{"type":126,"value":514},{"type":121,"tag":182,"props":543,"children":544},{"class":376},[545],{"type":126,"value":209},{"type":121,"tag":182,"props":547,"children":548},{"class":201},[549],{"type":126,"value":550},"}\n",{"type":121,"tag":182,"props":552,"children":554},{"class":184,"line":553},5,[555,559],{"type":121,"tag":182,"props":556,"children":557},{"class":201},[558],{"type":126,"value":469},{"type":121,"tag":182,"props":560,"children":561},{"class":195},[562],{"type":126,"value":563},")",{"type":121,"tag":565,"props":566,"children":568},"h3",{"id":567},"imggetsizes",[569],{"type":121,"tag":129,"props":570,"children":571},{},[572],{"type":126,"value":573},"img.getSizes",{"type":121,"tag":167,"props":575,"children":578},{"className":576,"code":577,"language":172,"meta":115},[170],"const img = useImage()\n\nimg.getSizes(src, { sizes, modifiers })\n",[579],{"type":121,"tag":175,"props":580,"children":581},{},[582],{"type":121,"tag":167,"props":583,"children":584},{"__ignoreMap":115},[585,612,619],{"type":121,"tag":182,"props":586,"children":587},{"class":184,"line":185},[588,592,596,600,604,608],{"type":121,"tag":182,"props":589,"children":590},{"class":189},[591],{"type":126,"value":192},{"type":121,"tag":182,"props":593,"children":594},{"class":195},[595],{"type":126,"value":198},{"type":121,"tag":182,"props":597,"children":598},{"class":201},[599],{"type":126,"value":204},{"type":121,"tag":182,"props":601,"children":602},{"class":195},[603],{"type":126,"value":209},{"type":121,"tag":182,"props":605,"children":606},{"class":212},[607],{"type":126,"value":215},{"type":121,"tag":182,"props":609,"children":610},{"class":195},[611],{"type":126,"value":220},{"type":121,"tag":182,"props":613,"children":614},{"class":184,"line":223},[615],{"type":121,"tag":182,"props":616,"children":617},{},[618],{"type":126,"value":229},{"type":121,"tag":182,"props":620,"children":621},{"class":184,"line":232},[622,626,631,636,640,644,648,652,657,661,666,670],{"type":121,"tag":182,"props":623,"children":624},{"class":195},[625],{"type":126,"value":158},{"type":121,"tag":182,"props":627,"children":628},{"class":201},[629],{"type":126,"value":630},".",{"type":121,"tag":182,"props":632,"children":633},{"class":212},[634],{"type":126,"value":635},"getSizes",{"type":121,"tag":182,"props":637,"children":638},{"class":195},[639],{"type":126,"value":242},{"type":121,"tag":182,"props":641,"children":642},{"class":201},[643],{"type":126,"value":247},{"type":121,"tag":182,"props":645,"children":646},{"class":195},[647],{"type":126,"value":209},{"type":121,"tag":182,"props":649,"children":650},{"class":201},[651],{"type":126,"value":440},{"type":121,"tag":182,"props":653,"children":654},{"class":195},[655],{"type":126,"value":656}," sizes",{"type":121,"tag":182,"props":658,"children":659},{"class":201},[660],{"type":126,"value":247},{"type":121,"tag":182,"props":662,"children":663},{"class":195},[664],{"type":126,"value":665}," modifiers ",{"type":121,"tag":182,"props":667,"children":668},{"class":201},[669],{"type":126,"value":469},{"type":121,"tag":182,"props":671,"children":672},{"class":195},[673],{"type":126,"value":563},{"type":121,"tag":675,"props":676,"children":677},"callout",{},[678],{"type":121,"tag":122,"props":679,"children":680},{},[681,683,687],{"type":126,"value":682},"Unstable: ",{"type":121,"tag":129,"props":684,"children":685},{},[686],{"type":126,"value":635},{"type":126,"value":688}," API might change or be removed.",{"type":121,"tag":122,"props":690,"children":691},{},[692],{"type":121,"tag":266,"props":693,"children":694},{},[695],{"type":126,"value":696},"Parameters:",{"type":121,"tag":698,"props":699,"children":700},"ul",{},[701,712,722,780],{"type":121,"tag":702,"props":703,"children":704},"li",{},[705,710],{"type":121,"tag":129,"props":706,"children":707},{},[708],{"type":126,"value":709},"src",{"type":126,"value":711},": (string) Source to original image id",{"type":121,"tag":702,"props":713,"children":714},{},[715,720],{"type":121,"tag":129,"props":716,"children":717},{},[718],{"type":126,"value":719},"sizes",{"type":126,"value":721},": (string) List of responsive image sizes ({breakpoint}:{size}{unit})",{"type":121,"tag":702,"props":723,"children":724},{},[725,730,732],{"type":121,"tag":129,"props":726,"children":727},{},[728],{"type":126,"value":729},"modifiers",{"type":126,"value":731},": (object) Modifiers passed to provider for resizing and optimizing",{"type":121,"tag":698,"props":733,"children":734},{},[735,745,755,765,775],{"type":121,"tag":702,"props":736,"children":737},{},[738,743],{"type":121,"tag":129,"props":739,"children":740},{},[741],{"type":126,"value":742},"width",{"type":126,"value":744},": resize to the specified width (in pixels)",{"type":121,"tag":702,"props":746,"children":747},{},[748,753],{"type":121,"tag":129,"props":749,"children":750},{},[751],{"type":126,"value":752},"height",{"type":126,"value":754},": resize to specified height (in pixels)",{"type":121,"tag":702,"props":756,"children":757},{},[758,763],{"type":121,"tag":129,"props":759,"children":760},{},[761],{"type":126,"value":762},"quality",{"type":126,"value":764},": Change image quality (0 to 100)",{"type":121,"tag":702,"props":766,"children":767},{},[768,773],{"type":121,"tag":129,"props":769,"children":770},{},[771],{"type":126,"value":772},"format",{"type":126,"value":774},": Change the image format",{"type":121,"tag":702,"props":776,"children":777},{},[778],{"type":126,"value":779},"(any other custom provider modifier)",{"type":121,"tag":702,"props":781,"children":782},{},[783,788,790],{"type":121,"tag":129,"props":784,"children":785},{},[786],{"type":126,"value":787},"options",{"type":126,"value":789},": (object)",{"type":121,"tag":698,"props":791,"children":792},{},[793,811],{"type":121,"tag":702,"props":794,"children":795},{},[796,801,803,810],{"type":121,"tag":129,"props":797,"children":798},{},[799],{"type":126,"value":800},"provider",{"type":126,"value":802},": (string) Provider name other than default (see ",{"type":121,"tag":804,"props":805,"children":807},"a",{"href":806},"/get-started/configuration#providers",[808],{"type":126,"value":809},"providers",{"type":126,"value":563},{"type":121,"tag":702,"props":812,"children":813},{},[814,819,821],{"type":121,"tag":129,"props":815,"children":816},{},[817],{"type":126,"value":818},"preset",{"type":126,"value":820},": Use a ",{"type":121,"tag":804,"props":822,"children":824},{"href":823},"/get-started/configuration#presets",[825],{"type":126,"value":818},{"type":121,"tag":122,"props":827,"children":828},{},[829,833,835],{"type":121,"tag":266,"props":830,"children":831},{},[832],{"type":126,"value":270},{"type":126,"value":834}," Responsive srcset with Vuetify ",{"type":121,"tag":129,"props":836,"children":837},{},[838],{"type":126,"value":839},"v-img",{"type":121,"tag":167,"props":841,"children":846},{"className":842,"code":844,"language":845,"meta":115},[843],"language-html","\u003Cscript setup lang=\"ts\">\nconst props = defineProps({\n  height: { type: [Number, String], default: 500 },\n  src: {\n    type: String,\n    default: '/img/header-bg.jpg'\n  }\n})\nconst img = useImage()\nconst _srcset = computed(() => {\n  return img.getSizes(props.src, {\n    sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',\n    modifiers: {\n      format: 'webp',\n      quality: 70,\n      height: props.height\n    }\n  })\n})\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cv-img\n    :lazy-src=\"img(src, { width: 10, quality: 70 })\"\n    :src=\"img(src, { height, quality: 70 })\"\n    :srcset=\"_srcset.srcset\"\n    :height=\"height\"\n    :sizes=\"_srcset.sizes\"\n  >\u003C/v-img>\n\u003C/template>\n","html",[847],{"type":121,"tag":175,"props":848,"children":849},{},[850],{"type":121,"tag":167,"props":851,"children":852},{"__ignoreMap":115},[853,907,940,1025,1048,1074,1108,1120,1132,1160,1209,1266,1300,1321,1355,1381,1411,1423,1439,1451,1468,1476,1493,1510,1541,1571,1601,1630,1660,1677],{"type":121,"tag":182,"props":854,"children":855},{"class":184,"line":185},[856,861,866,870,875,879,884,888,893,898,902],{"type":121,"tag":182,"props":857,"children":858},{"class":201},[859],{"type":126,"value":860},"\u003C",{"type":121,"tag":182,"props":862,"children":863},{"class":376},[864],{"type":126,"value":865},"script",{"type":121,"tag":182,"props":867,"children":868},{"class":201},[869],{"type":126,"value":209},{"type":121,"tag":182,"props":871,"children":872},{"class":189},[873],{"type":126,"value":874},"setup",{"type":121,"tag":182,"props":876,"children":877},{"class":201},[878],{"type":126,"value":209},{"type":121,"tag":182,"props":880,"children":881},{"class":189},[882],{"type":126,"value":883},"lang",{"type":121,"tag":182,"props":885,"children":886},{"class":201},[887],{"type":126,"value":204},{"type":121,"tag":182,"props":889,"children":890},{"class":201},[891],{"type":126,"value":892},"\"",{"type":121,"tag":182,"props":894,"children":895},{"class":420},[896],{"type":126,"value":897},"ts",{"type":121,"tag":182,"props":899,"children":900},{"class":201},[901],{"type":126,"value":892},{"type":121,"tag":182,"props":903,"children":904},{"class":201},[905],{"type":126,"value":906},">\n",{"type":121,"tag":182,"props":908,"children":909},{"class":184,"line":223},[910,914,919,923,927,932,936],{"type":121,"tag":182,"props":911,"children":912},{"class":189},[913],{"type":126,"value":192},{"type":121,"tag":182,"props":915,"children":916},{"class":195},[917],{"type":126,"value":918}," props ",{"type":121,"tag":182,"props":920,"children":921},{"class":201},[922],{"type":126,"value":204},{"type":121,"tag":182,"props":924,"children":925},{"class":195},[926],{"type":126,"value":209},{"type":121,"tag":182,"props":928,"children":929},{"class":212},[930],{"type":126,"value":931},"defineProps",{"type":121,"tag":182,"props":933,"children":934},{"class":195},[935],{"type":126,"value":347},{"type":121,"tag":182,"props":937,"children":938},{"class":201},[939],{"type":126,"value":370},{"type":121,"tag":182,"props":941,"children":942},{"class":184,"line":232},[943,947,951,955,959,963,967,972,976,981,985,990,994,998,1003,1007,1011,1016,1020],{"type":121,"tag":182,"props":944,"children":945},{"class":195},[946],{"type":126,"value":379},{"type":121,"tag":182,"props":948,"children":949},{"class":376},[950],{"type":126,"value":752},{"type":121,"tag":182,"props":952,"children":953},{"class":201},[954],{"type":126,"value":450},{"type":121,"tag":182,"props":956,"children":957},{"class":195},[958],{"type":126,"value":209},{"type":121,"tag":182,"props":960,"children":961},{"class":201},[962],{"type":126,"value":440},{"type":121,"tag":182,"props":964,"children":965},{"class":195},[966],{"type":126,"value":209},{"type":121,"tag":182,"props":968,"children":969},{"class":376},[970],{"type":126,"value":971},"type",{"type":121,"tag":182,"props":973,"children":974},{"class":201},[975],{"type":126,"value":450},{"type":121,"tag":182,"props":977,"children":978},{"class":195},[979],{"type":126,"value":980}," [Number",{"type":121,"tag":182,"props":982,"children":983},{"class":201},[984],{"type":126,"value":247},{"type":121,"tag":182,"props":986,"children":987},{"class":195},[988],{"type":126,"value":989}," String]",{"type":121,"tag":182,"props":991,"children":992},{"class":201},[993],{"type":126,"value":247},{"type":121,"tag":182,"props":995,"children":996},{"class":195},[997],{"type":126,"value":209},{"type":121,"tag":182,"props":999,"children":1000},{"class":376},[1001],{"type":126,"value":1002},"default",{"type":121,"tag":182,"props":1004,"children":1005},{"class":201},[1006],{"type":126,"value":450},{"type":121,"tag":182,"props":1008,"children":1009},{"class":195},[1010],{"type":126,"value":209},{"type":121,"tag":182,"props":1012,"children":1013},{"class":457},[1014],{"type":126,"value":1015},"500",{"type":121,"tag":182,"props":1017,"children":1018},{"class":195},[1019],{"type":126,"value":209},{"type":121,"tag":182,"props":1021,"children":1022},{"class":201},[1023],{"type":126,"value":1024},"},\n",{"type":121,"tag":182,"props":1026,"children":1027},{"class":184,"line":477},[1028,1032,1036,1040,1044],{"type":121,"tag":182,"props":1029,"children":1030},{"class":195},[1031],{"type":126,"value":379},{"type":121,"tag":182,"props":1033,"children":1034},{"class":376},[1035],{"type":126,"value":709},{"type":121,"tag":182,"props":1037,"children":1038},{"class":201},[1039],{"type":126,"value":450},{"type":121,"tag":182,"props":1041,"children":1042},{"class":195},[1043],{"type":126,"value":209},{"type":121,"tag":182,"props":1045,"children":1046},{"class":201},[1047],{"type":126,"value":370},{"type":121,"tag":182,"props":1049,"children":1050},{"class":184,"line":553},[1051,1056,1060,1064,1069],{"type":121,"tag":182,"props":1052,"children":1053},{"class":195},[1054],{"type":126,"value":1055},"    ",{"type":121,"tag":182,"props":1057,"children":1058},{"class":376},[1059],{"type":126,"value":971},{"type":121,"tag":182,"props":1061,"children":1062},{"class":201},[1063],{"type":126,"value":450},{"type":121,"tag":182,"props":1065,"children":1066},{"class":195},[1067],{"type":126,"value":1068}," String",{"type":121,"tag":182,"props":1070,"children":1071},{"class":201},[1072],{"type":126,"value":1073},",\n",{"type":121,"tag":182,"props":1075,"children":1077},{"class":184,"line":1076},6,[1078,1082,1086,1090,1094,1098,1103],{"type":121,"tag":182,"props":1079,"children":1080},{"class":195},[1081],{"type":126,"value":1055},{"type":121,"tag":182,"props":1083,"children":1084},{"class":376},[1085],{"type":126,"value":1002},{"type":121,"tag":182,"props":1087,"children":1088},{"class":201},[1089],{"type":126,"value":450},{"type":121,"tag":182,"props":1091,"children":1092},{"class":195},[1093],{"type":126,"value":209},{"type":121,"tag":182,"props":1095,"children":1096},{"class":201},[1097],{"type":126,"value":417},{"type":121,"tag":182,"props":1099,"children":1100},{"class":420},[1101],{"type":126,"value":1102},"/img/header-bg.jpg",{"type":121,"tag":182,"props":1104,"children":1105},{"class":201},[1106],{"type":126,"value":1107},"'\n",{"type":121,"tag":182,"props":1109,"children":1111},{"class":184,"line":1110},7,[1112,1116],{"type":121,"tag":182,"props":1113,"children":1114},{"class":195},[1115],{"type":126,"value":379},{"type":121,"tag":182,"props":1117,"children":1118},{"class":201},[1119],{"type":126,"value":550},{"type":121,"tag":182,"props":1121,"children":1123},{"class":184,"line":1122},8,[1124,1128],{"type":121,"tag":182,"props":1125,"children":1126},{"class":201},[1127],{"type":126,"value":469},{"type":121,"tag":182,"props":1129,"children":1130},{"class":195},[1131],{"type":126,"value":474},{"type":121,"tag":182,"props":1133,"children":1135},{"class":184,"line":1134},9,[1136,1140,1144,1148,1152,1156],{"type":121,"tag":182,"props":1137,"children":1138},{"class":189},[1139],{"type":126,"value":192},{"type":121,"tag":182,"props":1141,"children":1142},{"class":195},[1143],{"type":126,"value":198},{"type":121,"tag":182,"props":1145,"children":1146},{"class":201},[1147],{"type":126,"value":204},{"type":121,"tag":182,"props":1149,"children":1150},{"class":195},[1151],{"type":126,"value":209},{"type":121,"tag":182,"props":1153,"children":1154},{"class":212},[1155],{"type":126,"value":215},{"type":121,"tag":182,"props":1157,"children":1158},{"class":195},[1159],{"type":126,"value":220},{"type":121,"tag":182,"props":1161,"children":1163},{"class":184,"line":1162},10,[1164,1168,1173,1177,1181,1185,1189,1193,1197,1201,1205],{"type":121,"tag":182,"props":1165,"children":1166},{"class":189},[1167],{"type":126,"value":192},{"type":121,"tag":182,"props":1169,"children":1170},{"class":195},[1171],{"type":126,"value":1172}," _srcset ",{"type":121,"tag":182,"props":1174,"children":1175},{"class":201},[1176],{"type":126,"value":204},{"type":121,"tag":182,"props":1178,"children":1179},{"class":195},[1180],{"type":126,"value":209},{"type":121,"tag":182,"props":1182,"children":1183},{"class":212},[1184],{"type":126,"value":342},{"type":121,"tag":182,"props":1186,"children":1187},{"class":195},[1188],{"type":126,"value":347},{"type":121,"tag":182,"props":1190,"children":1191},{"class":201},[1192],{"type":126,"value":352},{"type":121,"tag":182,"props":1194,"children":1195},{"class":195},[1196],{"type":126,"value":209},{"type":121,"tag":182,"props":1198,"children":1199},{"class":189},[1200],{"type":126,"value":361},{"type":121,"tag":182,"props":1202,"children":1203},{"class":195},[1204],{"type":126,"value":209},{"type":121,"tag":182,"props":1206,"children":1207},{"class":201},[1208],{"type":126,"value":370},{"type":121,"tag":182,"props":1210,"children":1212},{"class":184,"line":1211},11,[1213,1217,1221,1225,1229,1233,1237,1241,1246,1250,1254,1258,1262],{"type":121,"tag":182,"props":1214,"children":1215},{"class":376},[1216],{"type":126,"value":379},{"type":121,"tag":182,"props":1218,"children":1219},{"class":485},[1220],{"type":126,"value":488},{"type":121,"tag":182,"props":1222,"children":1223},{"class":376},[1224],{"type":126,"value":209},{"type":121,"tag":182,"props":1226,"children":1227},{"class":195},[1228],{"type":126,"value":158},{"type":121,"tag":182,"props":1230,"children":1231},{"class":201},[1232],{"type":126,"value":630},{"type":121,"tag":182,"props":1234,"children":1235},{"class":212},[1236],{"type":126,"value":635},{"type":121,"tag":182,"props":1238,"children":1239},{"class":376},[1240],{"type":126,"value":347},{"type":121,"tag":182,"props":1242,"children":1243},{"class":195},[1244],{"type":126,"value":1245},"props",{"type":121,"tag":182,"props":1247,"children":1248},{"class":201},[1249],{"type":126,"value":630},{"type":121,"tag":182,"props":1251,"children":1252},{"class":195},[1253],{"type":126,"value":709},{"type":121,"tag":182,"props":1255,"children":1256},{"class":201},[1257],{"type":126,"value":247},{"type":121,"tag":182,"props":1259,"children":1260},{"class":376},[1261],{"type":126,"value":209},{"type":121,"tag":182,"props":1263,"children":1264},{"class":201},[1265],{"type":126,"value":370},{"type":121,"tag":182,"props":1267,"children":1269},{"class":184,"line":1268},12,[1270,1275,1279,1283,1287,1292,1296],{"type":121,"tag":182,"props":1271,"children":1272},{"class":376},[1273],{"type":126,"value":1274},"    sizes",{"type":121,"tag":182,"props":1276,"children":1277},{"class":201},[1278],{"type":126,"value":450},{"type":121,"tag":182,"props":1280,"children":1281},{"class":376},[1282],{"type":126,"value":209},{"type":121,"tag":182,"props":1284,"children":1285},{"class":201},[1286],{"type":126,"value":417},{"type":121,"tag":182,"props":1288,"children":1289},{"class":420},[1290],{"type":126,"value":1291},"xs:100vw sm:100vw md:100vw lg:100vw xl:100vw",{"type":121,"tag":182,"props":1293,"children":1294},{"class":201},[1295],{"type":126,"value":417},{"type":121,"tag":182,"props":1297,"children":1298},{"class":201},[1299],{"type":126,"value":1073},{"type":121,"tag":182,"props":1301,"children":1303},{"class":184,"line":1302},13,[1304,1309,1313,1317],{"type":121,"tag":182,"props":1305,"children":1306},{"class":376},[1307],{"type":126,"value":1308},"    modifiers",{"type":121,"tag":182,"props":1310,"children":1311},{"class":201},[1312],{"type":126,"value":450},{"type":121,"tag":182,"props":1314,"children":1315},{"class":376},[1316],{"type":126,"value":209},{"type":121,"tag":182,"props":1318,"children":1319},{"class":201},[1320],{"type":126,"value":370},{"type":121,"tag":182,"props":1322,"children":1324},{"class":184,"line":1323},14,[1325,1330,1334,1338,1342,1347,1351],{"type":121,"tag":182,"props":1326,"children":1327},{"class":376},[1328],{"type":126,"value":1329},"      format",{"type":121,"tag":182,"props":1331,"children":1332},{"class":201},[1333],{"type":126,"value":450},{"type":121,"tag":182,"props":1335,"children":1336},{"class":376},[1337],{"type":126,"value":209},{"type":121,"tag":182,"props":1339,"children":1340},{"class":201},[1341],{"type":126,"value":417},{"type":121,"tag":182,"props":1343,"children":1344},{"class":420},[1345],{"type":126,"value":1346},"webp",{"type":121,"tag":182,"props":1348,"children":1349},{"class":201},[1350],{"type":126,"value":417},{"type":121,"tag":182,"props":1352,"children":1353},{"class":201},[1354],{"type":126,"value":1073},{"type":121,"tag":182,"props":1356,"children":1358},{"class":184,"line":1357},15,[1359,1364,1368,1372,1377],{"type":121,"tag":182,"props":1360,"children":1361},{"class":376},[1362],{"type":126,"value":1363},"      quality",{"type":121,"tag":182,"props":1365,"children":1366},{"class":201},[1367],{"type":126,"value":450},{"type":121,"tag":182,"props":1369,"children":1370},{"class":376},[1371],{"type":126,"value":209},{"type":121,"tag":182,"props":1373,"children":1374},{"class":457},[1375],{"type":126,"value":1376},"70",{"type":121,"tag":182,"props":1378,"children":1379},{"class":201},[1380],{"type":126,"value":1073},{"type":121,"tag":182,"props":1382,"children":1384},{"class":184,"line":1383},16,[1385,1390,1394,1398,1402,1406],{"type":121,"tag":182,"props":1386,"children":1387},{"class":376},[1388],{"type":126,"value":1389},"      height",{"type":121,"tag":182,"props":1391,"children":1392},{"class":201},[1393],{"type":126,"value":450},{"type":121,"tag":182,"props":1395,"children":1396},{"class":376},[1397],{"type":126,"value":209},{"type":121,"tag":182,"props":1399,"children":1400},{"class":195},[1401],{"type":126,"value":1245},{"type":121,"tag":182,"props":1403,"children":1404},{"class":201},[1405],{"type":126,"value":630},{"type":121,"tag":182,"props":1407,"children":1408},{"class":195},[1409],{"type":126,"value":1410},"height\n",{"type":121,"tag":182,"props":1412,"children":1414},{"class":184,"line":1413},17,[1415,1419],{"type":121,"tag":182,"props":1416,"children":1417},{"class":376},[1418],{"type":126,"value":1055},{"type":121,"tag":182,"props":1420,"children":1421},{"class":201},[1422],{"type":126,"value":550},{"type":121,"tag":182,"props":1424,"children":1426},{"class":184,"line":1425},18,[1427,1431,1435],{"type":121,"tag":182,"props":1428,"children":1429},{"class":376},[1430],{"type":126,"value":379},{"type":121,"tag":182,"props":1432,"children":1433},{"class":201},[1434],{"type":126,"value":469},{"type":121,"tag":182,"props":1436,"children":1437},{"class":376},[1438],{"type":126,"value":474},{"type":121,"tag":182,"props":1440,"children":1442},{"class":184,"line":1441},19,[1443,1447],{"type":121,"tag":182,"props":1444,"children":1445},{"class":201},[1446],{"type":126,"value":469},{"type":121,"tag":182,"props":1448,"children":1449},{"class":195},[1450],{"type":126,"value":474},{"type":121,"tag":182,"props":1452,"children":1454},{"class":184,"line":1453},20,[1455,1460,1464],{"type":121,"tag":182,"props":1456,"children":1457},{"class":201},[1458],{"type":126,"value":1459},"\u003C/",{"type":121,"tag":182,"props":1461,"children":1462},{"class":376},[1463],{"type":126,"value":865},{"type":121,"tag":182,"props":1465,"children":1466},{"class":201},[1467],{"type":126,"value":906},{"type":121,"tag":182,"props":1469,"children":1471},{"class":184,"line":1470},21,[1472],{"type":121,"tag":182,"props":1473,"children":1474},{},[1475],{"type":126,"value":229},{"type":121,"tag":182,"props":1477,"children":1479},{"class":184,"line":1478},22,[1480,1484,1489],{"type":121,"tag":182,"props":1481,"children":1482},{"class":201},[1483],{"type":126,"value":860},{"type":121,"tag":182,"props":1485,"children":1486},{"class":376},[1487],{"type":126,"value":1488},"template",{"type":121,"tag":182,"props":1490,"children":1491},{"class":201},[1492],{"type":126,"value":906},{"type":121,"tag":182,"props":1494,"children":1496},{"class":184,"line":1495},23,[1497,1501,1505],{"type":121,"tag":182,"props":1498,"children":1499},{"class":195},[1500],{"type":126,"value":379},{"type":121,"tag":182,"props":1502,"children":1503},{"class":201},[1504],{"type":126,"value":860},{"type":121,"tag":182,"props":1506,"children":1507},{"class":376},[1508],{"type":126,"value":1509},"v-img\n",{"type":121,"tag":182,"props":1511,"children":1513},{"class":184,"line":1512},24,[1514,1518,1523,1527,1531,1536],{"type":121,"tag":182,"props":1515,"children":1516},{"class":201},[1517],{"type":126,"value":1055},{"type":121,"tag":182,"props":1519,"children":1520},{"class":189},[1521],{"type":126,"value":1522},":lazy-src",{"type":121,"tag":182,"props":1524,"children":1525},{"class":201},[1526],{"type":126,"value":204},{"type":121,"tag":182,"props":1528,"children":1529},{"class":201},[1530],{"type":126,"value":892},{"type":121,"tag":182,"props":1532,"children":1533},{"class":420},[1534],{"type":126,"value":1535},"img(src, { width: 10, quality: 70 })",{"type":121,"tag":182,"props":1537,"children":1538},{"class":201},[1539],{"type":126,"value":1540},"\"\n",{"type":121,"tag":182,"props":1542,"children":1544},{"class":184,"line":1543},25,[1545,1549,1554,1558,1562,1567],{"type":121,"tag":182,"props":1546,"children":1547},{"class":201},[1548],{"type":126,"value":1055},{"type":121,"tag":182,"props":1550,"children":1551},{"class":189},[1552],{"type":126,"value":1553},":src",{"type":121,"tag":182,"props":1555,"children":1556},{"class":201},[1557],{"type":126,"value":204},{"type":121,"tag":182,"props":1559,"children":1560},{"class":201},[1561],{"type":126,"value":892},{"type":121,"tag":182,"props":1563,"children":1564},{"class":420},[1565],{"type":126,"value":1566},"img(src, { height, quality: 70 })",{"type":121,"tag":182,"props":1568,"children":1569},{"class":201},[1570],{"type":126,"value":1540},{"type":121,"tag":182,"props":1572,"children":1574},{"class":184,"line":1573},26,[1575,1579,1584,1588,1592,1597],{"type":121,"tag":182,"props":1576,"children":1577},{"class":201},[1578],{"type":126,"value":1055},{"type":121,"tag":182,"props":1580,"children":1581},{"class":189},[1582],{"type":126,"value":1583},":srcset",{"type":121,"tag":182,"props":1585,"children":1586},{"class":201},[1587],{"type":126,"value":204},{"type":121,"tag":182,"props":1589,"children":1590},{"class":201},[1591],{"type":126,"value":892},{"type":121,"tag":182,"props":1593,"children":1594},{"class":420},[1595],{"type":126,"value":1596},"_srcset.srcset",{"type":121,"tag":182,"props":1598,"children":1599},{"class":201},[1600],{"type":126,"value":1540},{"type":121,"tag":182,"props":1602,"children":1604},{"class":184,"line":1603},27,[1605,1609,1614,1618,1622,1626],{"type":121,"tag":182,"props":1606,"children":1607},{"class":201},[1608],{"type":126,"value":1055},{"type":121,"tag":182,"props":1610,"children":1611},{"class":189},[1612],{"type":126,"value":1613},":height",{"type":121,"tag":182,"props":1615,"children":1616},{"class":201},[1617],{"type":126,"value":204},{"type":121,"tag":182,"props":1619,"children":1620},{"class":201},[1621],{"type":126,"value":892},{"type":121,"tag":182,"props":1623,"children":1624},{"class":420},[1625],{"type":126,"value":752},{"type":121,"tag":182,"props":1627,"children":1628},{"class":201},[1629],{"type":126,"value":1540},{"type":121,"tag":182,"props":1631,"children":1633},{"class":184,"line":1632},28,[1634,1638,1643,1647,1651,1656],{"type":121,"tag":182,"props":1635,"children":1636},{"class":201},[1637],{"type":126,"value":1055},{"type":121,"tag":182,"props":1639,"children":1640},{"class":189},[1641],{"type":126,"value":1642},":sizes",{"type":121,"tag":182,"props":1644,"children":1645},{"class":201},[1646],{"type":126,"value":204},{"type":121,"tag":182,"props":1648,"children":1649},{"class":201},[1650],{"type":126,"value":892},{"type":121,"tag":182,"props":1652,"children":1653},{"class":420},[1654],{"type":126,"value":1655},"_srcset.sizes",{"type":121,"tag":182,"props":1657,"children":1658},{"class":201},[1659],{"type":126,"value":1540},{"type":121,"tag":182,"props":1661,"children":1663},{"class":184,"line":1662},29,[1664,1669,1673],{"type":121,"tag":182,"props":1665,"children":1666},{"class":201},[1667],{"type":126,"value":1668},"  >\u003C/",{"type":121,"tag":182,"props":1670,"children":1671},{"class":376},[1672],{"type":126,"value":839},{"type":121,"tag":182,"props":1674,"children":1675},{"class":201},[1676],{"type":126,"value":906},{"type":121,"tag":182,"props":1678,"children":1680},{"class":184,"line":1679},30,[1681,1685,1689],{"type":121,"tag":182,"props":1682,"children":1683},{"class":201},[1684],{"type":126,"value":1459},{"type":121,"tag":182,"props":1686,"children":1687},{"class":376},[1688],{"type":126,"value":1488},{"type":121,"tag":182,"props":1690,"children":1691},{"class":201},[1692],{"type":126,"value":1693},">",{"type":121,"tag":1695,"children":1696},"style",[1697],{"type":126,"value":1698},".light .ct-046724{color:#9C3EDA;}\n.ct-046724{color:#C792EA;}\n.light .ct-770753{color:#90A4AE;}\n.ct-770753{color:#EEFFFF;}\n.dark .ct-770753{color:#A6ACCD;}\n.light .ct-209289{color:#39ADB5;}\n.ct-209289{color:#89DDFF;}\n.light .ct-750008{color:#6182B8;}\n.ct-750008{color:#82AAFF;}\n.light .ct-007771{color:#E53935;}\n.ct-007771{color:#F07178;}\n.light .ct-709943{color:#91B859;}\n.ct-709943{color:#C3E88D;}\n.light .ct-257267{color:#F76D47;}\n.ct-257267{color:#F78C6C;}\n.light .ct-064524{color:#39ADB5;font-style:italic;}\n.ct-064524{color:#89DDFF;font-style:italic;}",{"title":115,"searchDepth":223,"depth":223,"links":1700},[1701],{"id":113,"depth":223,"text":18,"children":1702},[1703],{"id":567,"depth":232,"text":573},"markdown","content:2.usage:3.use-image.md","content","2.usage/3.use-image.md","md",[1710,2118],{"_path":26,"_dir":113,"_draft":114,"_partial":114,"_locale":115,"_empty":114,"title":25,"description":1711,"body":1712,"_type":1704,"_id":2116,"_source":1706,"_file":2117,"_extension":1708},"Discover how to use and configure the Nuxt Picture component.",{"type":118,"children":1713,"toc":2109},[1714,1730,1757,1775,1780,1796,1803,1808,1895,1937,1946,1951,1991,2000,2011,2018,2105],{"type":121,"tag":122,"props":1715,"children":1716},{},[1717,1721,1723,1728],{"type":121,"tag":129,"props":1718,"children":1719},{},[1720],{"type":126,"value":25},{"type":126,"value":1722}," is a drop-in replacement for the native ",{"type":121,"tag":129,"props":1724,"children":1725},{},[1726],{"type":126,"value":1727},"\u003Cpicture>",{"type":126,"value":1729}," tag.",{"type":121,"tag":122,"props":1731,"children":1732},{},[1733,1735,1739,1741,1749,1751,1755],{"type":126,"value":1734},"Usage of ",{"type":121,"tag":129,"props":1736,"children":1737},{},[1738],{"type":126,"value":25},{"type":126,"value":1740}," is almost identical to ",{"type":121,"tag":804,"props":1742,"children":1744},{"href":1743},"nuxt-img",[1745],{"type":121,"tag":129,"props":1746,"children":1747},{},[1748],{"type":126,"value":22},{"type":126,"value":1750}," but also allows serving modern formats like ",{"type":121,"tag":129,"props":1752,"children":1753},{},[1754],{"type":126,"value":1346},{"type":126,"value":1756}," when possible.",{"type":121,"tag":122,"props":1758,"children":1759},{},[1760,1762,1774],{"type":126,"value":1761},"Learn more about the ",{"type":121,"tag":804,"props":1763,"children":1767},{"href":1764,"rel":1765},"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture",[1766],"nofollow",[1768,1772],{"type":121,"tag":129,"props":1769,"children":1770},{},[1771],{"type":126,"value":1727},{"type":126,"value":1773}," tag on MDN",{"type":126,"value":630},{"type":121,"tag":162,"props":1776,"children":1777},{"id":1245},[1778],{"type":126,"value":1779},"Props",{"type":121,"tag":675,"props":1781,"children":1782},{},[1783],{"type":121,"tag":122,"props":1784,"children":1785},{},[1786,1788],{"type":126,"value":1787},"See props supported by",{"type":121,"tag":804,"props":1789,"children":1791},{"href":1790},"/usage/nuxt-img#props",[1792],{"type":121,"tag":129,"props":1793,"children":1794},{},[1795],{"type":126,"value":22},{"type":121,"tag":565,"props":1797,"children":1798},{"id":772},[1799],{"type":121,"tag":129,"props":1800,"children":1801},{},[1802],{"type":126,"value":772},{"type":121,"tag":122,"props":1804,"children":1805},{},[1806],{"type":126,"value":1807},"Format on pictures can be used to serve images in multiple formats. A legacy format will be generated automatically. So in the example below avif, webp and png would be generated. They will be added in the same order they are added to the format attribute.",{"type":121,"tag":167,"props":1809,"children":1812},{"className":1810,"code":1811,"language":845,"meta":115},[843],"\u003CNuxtPicture format=\"avif,webp\" src=\"/nuxt-icon.png\" ... />\n",[1813],{"type":121,"tag":175,"props":1814,"children":1815},{},[1816],{"type":121,"tag":167,"props":1817,"children":1818},{"__ignoreMap":115},[1819],{"type":121,"tag":182,"props":1820,"children":1821},{"class":184,"line":185},[1822,1826,1831,1835,1839,1843,1847,1852,1856,1860,1864,1868,1872,1877,1881,1885,1890],{"type":121,"tag":182,"props":1823,"children":1824},{"class":201},[1825],{"type":126,"value":860},{"type":121,"tag":182,"props":1827,"children":1828},{"class":376},[1829],{"type":126,"value":1830},"NuxtPicture",{"type":121,"tag":182,"props":1832,"children":1833},{"class":201},[1834],{"type":126,"value":209},{"type":121,"tag":182,"props":1836,"children":1837},{"class":189},[1838],{"type":126,"value":772},{"type":121,"tag":182,"props":1840,"children":1841},{"class":201},[1842],{"type":126,"value":204},{"type":121,"tag":182,"props":1844,"children":1845},{"class":201},[1846],{"type":126,"value":892},{"type":121,"tag":182,"props":1848,"children":1849},{"class":420},[1850],{"type":126,"value":1851},"avif,webp",{"type":121,"tag":182,"props":1853,"children":1854},{"class":201},[1855],{"type":126,"value":892},{"type":121,"tag":182,"props":1857,"children":1858},{"class":201},[1859],{"type":126,"value":209},{"type":121,"tag":182,"props":1861,"children":1862},{"class":189},[1863],{"type":126,"value":709},{"type":121,"tag":182,"props":1865,"children":1866},{"class":201},[1867],{"type":126,"value":204},{"type":121,"tag":182,"props":1869,"children":1870},{"class":201},[1871],{"type":126,"value":892},{"type":121,"tag":182,"props":1873,"children":1874},{"class":420},[1875],{"type":126,"value":1876},"/nuxt-icon.png",{"type":121,"tag":182,"props":1878,"children":1879},{"class":201},[1880],{"type":126,"value":892},{"type":121,"tag":182,"props":1882,"children":1883},{"class":201},[1884],{"type":126,"value":209},{"type":121,"tag":182,"props":1886,"children":1887},{"class":189},[1888],{"type":126,"value":1889},"...",{"type":121,"tag":182,"props":1891,"children":1892},{"class":201},[1893],{"type":126,"value":1894}," />",{"type":121,"tag":122,"props":1896,"children":1897},{},[1898,1900,1904,1906,1911,1912,1917,1918,1923,1924,1929,1930,1935],{"type":126,"value":1899},"Available formats are ",{"type":121,"tag":129,"props":1901,"children":1902},{},[1903],{"type":126,"value":1346},{"type":126,"value":1905},", ",{"type":121,"tag":129,"props":1907,"children":1908},{},[1909],{"type":126,"value":1910},"avif",{"type":126,"value":1905},{"type":121,"tag":129,"props":1913,"children":1914},{},[1915],{"type":126,"value":1916},"jpeg",{"type":126,"value":1905},{"type":121,"tag":129,"props":1919,"children":1920},{},[1921],{"type":126,"value":1922},"jpg",{"type":126,"value":1905},{"type":121,"tag":129,"props":1925,"children":1926},{},[1927],{"type":126,"value":1928},"png",{"type":126,"value":134},{"type":121,"tag":129,"props":1931,"children":1932},{},[1933],{"type":126,"value":1934},"gif",{"type":126,"value":1936},". If the format is not specified, it will respect the default image format.",{"type":121,"tag":565,"props":1938,"children":1940},{"id":1939},"legacyformat",[1941],{"type":121,"tag":129,"props":1942,"children":1943},{},[1944],{"type":126,"value":1945},"legacyFormat",{"type":121,"tag":122,"props":1947,"children":1948},{},[1949],{"type":126,"value":1950},"Format used for fallback. Default is conditional:",{"type":121,"tag":698,"props":1952,"children":1953},{},[1954,1981],{"type":121,"tag":702,"props":1955,"children":1956},{},[1957,1959,1963,1964,1968,1969,1973,1975,1979],{"type":126,"value":1958},"If original format supports transparency (",{"type":121,"tag":129,"props":1960,"children":1961},{},[1962],{"type":126,"value":1928},{"type":126,"value":1905},{"type":121,"tag":129,"props":1965,"children":1966},{},[1967],{"type":126,"value":1346},{"type":126,"value":134},{"type":121,"tag":129,"props":1970,"children":1971},{},[1972],{"type":126,"value":1934},{"type":126,"value":1974},"), ",{"type":121,"tag":129,"props":1976,"children":1977},{},[1978],{"type":126,"value":1928},{"type":126,"value":1980}," is used for fallback",{"type":121,"tag":702,"props":1982,"children":1983},{},[1984,1986,1990],{"type":126,"value":1985},"Otherwise ",{"type":121,"tag":129,"props":1987,"children":1988},{},[1989],{"type":126,"value":1916},{"type":126,"value":1980},{"type":121,"tag":565,"props":1992,"children":1994},{"id":1993},"imgattrs",[1995],{"type":121,"tag":129,"props":1996,"children":1997},{},[1998],{"type":126,"value":1999},"imgAttrs",{"type":121,"tag":122,"props":2001,"children":2002},{},[2003,2005,2009],{"type":126,"value":2004},"Allows you to set additional HTML-attributes on the ",{"type":121,"tag":129,"props":2006,"children":2007},{},[2008],{"type":126,"value":158},{"type":126,"value":2010}," element.",{"type":121,"tag":122,"props":2012,"children":2013},{},[2014],{"type":121,"tag":266,"props":2015,"children":2016},{},[2017],{"type":126,"value":270},{"type":121,"tag":167,"props":2019,"children":2022},{"className":2020,"code":2021,"language":845,"meta":115},[843],"\u003CNuxtPicture\n  src=\"/nuxt-icon.png\"\n  :imgAttrs=\"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}\"\n/>\n",[2023],{"type":121,"tag":175,"props":2024,"children":2025},{},[2026],{"type":121,"tag":167,"props":2027,"children":2028},{"__ignoreMap":115},[2029,2041,2068,2097],{"type":121,"tag":182,"props":2030,"children":2031},{"class":184,"line":185},[2032,2036],{"type":121,"tag":182,"props":2033,"children":2034},{"class":201},[2035],{"type":126,"value":860},{"type":121,"tag":182,"props":2037,"children":2038},{"class":376},[2039],{"type":126,"value":2040},"NuxtPicture\n",{"type":121,"tag":182,"props":2042,"children":2043},{"class":184,"line":223},[2044,2048,2052,2056,2060,2064],{"type":121,"tag":182,"props":2045,"children":2046},{"class":201},[2047],{"type":126,"value":379},{"type":121,"tag":182,"props":2049,"children":2050},{"class":189},[2051],{"type":126,"value":709},{"type":121,"tag":182,"props":2053,"children":2054},{"class":201},[2055],{"type":126,"value":204},{"type":121,"tag":182,"props":2057,"children":2058},{"class":201},[2059],{"type":126,"value":892},{"type":121,"tag":182,"props":2061,"children":2062},{"class":420},[2063],{"type":126,"value":1876},{"type":121,"tag":182,"props":2065,"children":2066},{"class":201},[2067],{"type":126,"value":1540},{"type":121,"tag":182,"props":2069,"children":2070},{"class":184,"line":232},[2071,2075,2080,2084,2088,2093],{"type":121,"tag":182,"props":2072,"children":2073},{"class":201},[2074],{"type":126,"value":379},{"type":121,"tag":182,"props":2076,"children":2077},{"class":189},[2078],{"type":126,"value":2079},":imgAttrs",{"type":121,"tag":182,"props":2081,"children":2082},{"class":201},[2083],{"type":126,"value":204},{"type":121,"tag":182,"props":2085,"children":2086},{"class":201},[2087],{"type":126,"value":892},{"type":121,"tag":182,"props":2089,"children":2090},{"class":420},[2091],{"type":126,"value":2092},"{id:'my-id', class:'my-class', style:'display:block', 'data-my-data': 'my-value'}",{"type":121,"tag":182,"props":2094,"children":2095},{"class":201},[2096],{"type":126,"value":1540},{"type":121,"tag":182,"props":2098,"children":2099},{"class":184,"line":477},[2100],{"type":121,"tag":182,"props":2101,"children":2102},{"class":201},[2103],{"type":126,"value":2104},"/>",{"type":121,"tag":1695,"children":2106},[2107],{"type":126,"value":2108},".light .ct-209289{color:#39ADB5;}\n.ct-209289{color:#89DDFF;}\n.light .ct-007771{color:#E53935;}\n.ct-007771{color:#F07178;}\n.light .ct-046724{color:#9C3EDA;}\n.ct-046724{color:#C792EA;}\n.light .ct-709943{color:#91B859;}\n.ct-709943{color:#C3E88D;}",{"title":115,"searchDepth":223,"depth":223,"links":2110},[2111],{"id":1245,"depth":223,"text":1779,"children":2112},[2113,2114,2115],{"id":772,"depth":232,"text":772},{"id":1939,"depth":232,"text":1945},{"id":1993,"depth":232,"text":1999},"content:2.usage:2.nuxt-picture.md","2.usage/2.nuxt-picture.md",{"_path":35,"_dir":809,"_draft":114,"_partial":114,"_locale":115,"_empty":114,"title":34,"description":2119,"body":2120,"_type":1704,"_id":2535,"_source":1706,"_file":2536,"_extension":1708},"Nuxt Image has first class integration with Cloudflare.",{"type":118,"children":2121,"toc":2530},[2122,2135,2140,2301,2308,2482,2487,2495,2505,2510,2526],{"type":121,"tag":122,"props":2123,"children":2124},{},[2125,2127,2133],{"type":126,"value":2126},"Integration between ",{"type":121,"tag":804,"props":2128,"children":2131},{"href":2129,"rel":2130},"https://developers.cloudflare.com/images/",[1766],[2132],{"type":126,"value":34},{"type":126,"value":2134}," and the image module.",{"type":121,"tag":122,"props":2136,"children":2137},{},[2138],{"type":126,"value":2139},"To use this provider you just need to specify the base url (zone) of your service:",{"type":121,"tag":167,"props":2141,"children":2146},{"className":2142,"code":2144,"filename":2145,"language":897,"meta":115},[2143],"language-ts","export default defineNuxtConfig({\n  image: {\n    cloudflare: {\n      baseURL: 'https://that-test.site'\n    }\n  }\n})\n","nuxt.config.ts",[2147],{"type":121,"tag":175,"props":2148,"children":2149},{},[2150],{"type":121,"tag":167,"props":2151,"children":2152},{"__ignoreMap":115},[2153,2186,2210,2234,2268,2279,2290],{"type":121,"tag":182,"props":2154,"children":2155},{"class":184,"line":185},[2156,2161,2165,2169,2173,2178,2182],{"type":121,"tag":182,"props":2157,"children":2158},{"class":485},[2159],{"type":126,"value":2160},"export",{"type":121,"tag":182,"props":2162,"children":2163},{"class":195},[2164],{"type":126,"value":209},{"type":121,"tag":182,"props":2166,"children":2167},{"class":485},[2168],{"type":126,"value":1002},{"type":121,"tag":182,"props":2170,"children":2171},{"class":195},[2172],{"type":126,"value":209},{"type":121,"tag":182,"props":2174,"children":2175},{"class":212},[2176],{"type":126,"value":2177},"defineNuxtConfig",{"type":121,"tag":182,"props":2179,"children":2180},{"class":195},[2181],{"type":126,"value":347},{"type":121,"tag":182,"props":2183,"children":2184},{"class":201},[2185],{"type":126,"value":370},{"type":121,"tag":182,"props":2187,"children":2188},{"class":184,"line":223},[2189,2193,2198,2202,2206],{"type":121,"tag":182,"props":2190,"children":2191},{"class":195},[2192],{"type":126,"value":379},{"type":121,"tag":182,"props":2194,"children":2195},{"class":376},[2196],{"type":126,"value":2197},"image",{"type":121,"tag":182,"props":2199,"children":2200},{"class":201},[2201],{"type":126,"value":450},{"type":121,"tag":182,"props":2203,"children":2204},{"class":195},[2205],{"type":126,"value":209},{"type":121,"tag":182,"props":2207,"children":2208},{"class":201},[2209],{"type":126,"value":370},{"type":121,"tag":182,"props":2211,"children":2212},{"class":184,"line":232},[2213,2217,2222,2226,2230],{"type":121,"tag":182,"props":2214,"children":2215},{"class":195},[2216],{"type":126,"value":1055},{"type":121,"tag":182,"props":2218,"children":2219},{"class":376},[2220],{"type":126,"value":2221},"cloudflare",{"type":121,"tag":182,"props":2223,"children":2224},{"class":201},[2225],{"type":126,"value":450},{"type":121,"tag":182,"props":2227,"children":2228},{"class":195},[2229],{"type":126,"value":209},{"type":121,"tag":182,"props":2231,"children":2232},{"class":201},[2233],{"type":126,"value":370},{"type":121,"tag":182,"props":2235,"children":2236},{"class":184,"line":477},[2237,2242,2247,2251,2255,2259,2264],{"type":121,"tag":182,"props":2238,"children":2239},{"class":195},[2240],{"type":126,"value":2241},"      ",{"type":121,"tag":182,"props":2243,"children":2244},{"class":376},[2245],{"type":126,"value":2246},"baseURL",{"type":121,"tag":182,"props":2248,"children":2249},{"class":201},[2250],{"type":126,"value":450},{"type":121,"tag":182,"props":2252,"children":2253},{"class":195},[2254],{"type":126,"value":209},{"type":121,"tag":182,"props":2256,"children":2257},{"class":201},[2258],{"type":126,"value":417},{"type":121,"tag":182,"props":2260,"children":2261},{"class":420},[2262],{"type":126,"value":2263},"https://that-test.site",{"type":121,"tag":182,"props":2265,"children":2266},{"class":201},[2267],{"type":126,"value":1107},{"type":121,"tag":182,"props":2269,"children":2270},{"class":184,"line":553},[2271,2275],{"type":121,"tag":182,"props":2272,"children":2273},{"class":195},[2274],{"type":126,"value":1055},{"type":121,"tag":182,"props":2276,"children":2277},{"class":201},[2278],{"type":126,"value":550},{"type":121,"tag":182,"props":2280,"children":2281},{"class":184,"line":1076},[2282,2286],{"type":121,"tag":182,"props":2283,"children":2284},{"class":195},[2285],{"type":126,"value":379},{"type":121,"tag":182,"props":2287,"children":2288},{"class":201},[2289],{"type":126,"value":550},{"type":121,"tag":182,"props":2291,"children":2292},{"class":184,"line":1110},[2293,2297],{"type":121,"tag":182,"props":2294,"children":2295},{"class":201},[2296],{"type":126,"value":469},{"type":121,"tag":182,"props":2298,"children":2299},{"class":195},[2300],{"type":126,"value":563},{"type":121,"tag":122,"props":2302,"children":2303},{},[2304],{"type":121,"tag":266,"props":2305,"children":2306},{},[2307],{"type":126,"value":270},{"type":121,"tag":167,"props":2309,"children":2314},{"className":2310,"code":2312,"language":2313,"meta":115},[2311],"language-vue","\u003CNuxtImg provider=\"cloudflare\" src=\"/burger.jpeg\" height=\"300\" :modifiers=\"{ fit: 'contain' }\" />\n","vue",[2315],{"type":121,"tag":175,"props":2316,"children":2317},{},[2318],{"type":121,"tag":167,"props":2319,"children":2320},{"__ignoreMap":115},[2321],{"type":121,"tag":182,"props":2322,"children":2323},{"class":184,"line":185},[2324,2328,2333,2337,2341,2345,2349,2353,2357,2361,2365,2369,2373,2378,2382,2386,2390,2394,2398,2403,2407,2411,2415,2419,2423,2427,2431,2435,2441,2445,2449,2453,2458,2462,2466,2470,2474,2478],{"type":121,"tag":182,"props":2325,"children":2326},{"class":201},[2327],{"type":126,"value":860},{"type":121,"tag":182,"props":2329,"children":2330},{"class":376},[2331],{"type":126,"value":2332},"NuxtImg",{"type":121,"tag":182,"props":2334,"children":2335},{"class":195},[2336],{"type":126,"value":209},{"type":121,"tag":182,"props":2338,"children":2339},{"class":189},[2340],{"type":126,"value":800},{"type":121,"tag":182,"props":2342,"children":2343},{"class":201},[2344],{"type":126,"value":204},{"type":121,"tag":182,"props":2346,"children":2347},{"class":201},[2348],{"type":126,"value":892},{"type":121,"tag":182,"props":2350,"children":2351},{"class":420},[2352],{"type":126,"value":2221},{"type":121,"tag":182,"props":2354,"children":2355},{"class":201},[2356],{"type":126,"value":892},{"type":121,"tag":182,"props":2358,"children":2359},{"class":195},[2360],{"type":126,"value":209},{"type":121,"tag":182,"props":2362,"children":2363},{"class":189},[2364],{"type":126,"value":709},{"type":121,"tag":182,"props":2366,"children":2367},{"class":201},[2368],{"type":126,"value":204},{"type":121,"tag":182,"props":2370,"children":2371},{"class":201},[2372],{"type":126,"value":892},{"type":121,"tag":182,"props":2374,"children":2375},{"class":420},[2376],{"type":126,"value":2377},"/burger.jpeg",{"type":121,"tag":182,"props":2379,"children":2380},{"class":201},[2381],{"type":126,"value":892},{"type":121,"tag":182,"props":2383,"children":2384},{"class":195},[2385],{"type":126,"value":209},{"type":121,"tag":182,"props":2387,"children":2388},{"class":189},[2389],{"type":126,"value":752},{"type":121,"tag":182,"props":2391,"children":2392},{"class":201},[2393],{"type":126,"value":204},{"type":121,"tag":182,"props":2395,"children":2396},{"class":201},[2397],{"type":126,"value":892},{"type":121,"tag":182,"props":2399,"children":2400},{"class":420},[2401],{"type":126,"value":2402},"300",{"type":121,"tag":182,"props":2404,"children":2405},{"class":201},[2406],{"type":126,"value":892},{"type":121,"tag":182,"props":2408,"children":2409},{"class":195},[2410],{"type":126,"value":209},{"type":121,"tag":182,"props":2412,"children":2413},{"class":201},[2414],{"type":126,"value":450},{"type":121,"tag":182,"props":2416,"children":2417},{"class":189},[2418],{"type":126,"value":729},{"type":121,"tag":182,"props":2420,"children":2421},{"class":201},[2422],{"type":126,"value":204},{"type":121,"tag":182,"props":2424,"children":2425},{"class":201},[2426],{"type":126,"value":892},{"type":121,"tag":182,"props":2428,"children":2429},{"class":201},[2430],{"type":126,"value":440},{"type":121,"tag":182,"props":2432,"children":2433},{"class":376},[2434],{"type":126,"value":209},{"type":121,"tag":182,"props":2436,"children":2438},{"class":2437},"ct-465623",[2439],{"type":126,"value":2440},"fit",{"type":121,"tag":182,"props":2442,"children":2443},{"class":201},[2444],{"type":126,"value":450},{"type":121,"tag":182,"props":2446,"children":2447},{"class":376},[2448],{"type":126,"value":209},{"type":121,"tag":182,"props":2450,"children":2451},{"class":201},[2452],{"type":126,"value":417},{"type":121,"tag":182,"props":2454,"children":2455},{"class":420},[2456],{"type":126,"value":2457},"contain",{"type":121,"tag":182,"props":2459,"children":2460},{"class":201},[2461],{"type":126,"value":417},{"type":121,"tag":182,"props":2463,"children":2464},{"class":376},[2465],{"type":126,"value":209},{"type":121,"tag":182,"props":2467,"children":2468},{"class":201},[2469],{"type":126,"value":469},{"type":121,"tag":182,"props":2471,"children":2472},{"class":201},[2473],{"type":126,"value":892},{"type":121,"tag":182,"props":2475,"children":2476},{"class":195},[2477],{"type":126,"value":209},{"type":121,"tag":182,"props":2479,"children":2480},{"class":201},[2481],{"type":126,"value":2104},{"type":121,"tag":162,"props":2483,"children":2484},{"id":787},[2485],{"type":126,"value":2486},"Options",{"type":121,"tag":565,"props":2488,"children":2490},{"id":2489},"baseurl",[2491],{"type":121,"tag":129,"props":2492,"children":2493},{},[2494],{"type":126,"value":2246},{"type":121,"tag":122,"props":2496,"children":2497},{},[2498,2500],{"type":126,"value":2499},"Default: ",{"type":121,"tag":129,"props":2501,"children":2502},{},[2503],{"type":126,"value":2504},"/",{"type":121,"tag":122,"props":2506,"children":2507},{},[2508],{"type":126,"value":2509},"Your deployment's domain (zone).",{"type":121,"tag":122,"props":2511,"children":2512},{},[2513,2518,2519,2524],{"type":121,"tag":266,"props":2514,"children":2515},{},[2516],{"type":126,"value":2517},"Note:",{"type":126,"value":209},{"type":121,"tag":129,"props":2520,"children":2521},{},[2522],{"type":126,"value":2523},"/cdn-cgi/image/",{"type":126,"value":2525}," will be automatically appended for generating URLs.",{"type":121,"tag":1695,"children":2527},[2528],{"type":126,"value":2529},".light .ct-064524{color:#39ADB5;font-style:italic;}\n.ct-064524{color:#89DDFF;font-style:italic;}\n.light .ct-770753{color:#90A4AE;}\n.ct-770753{color:#EEFFFF;}\n.dark .ct-770753{color:#A6ACCD;}\n.light .ct-750008{color:#6182B8;}\n.ct-750008{color:#82AAFF;}\n.light .ct-209289{color:#39ADB5;}\n.ct-209289{color:#89DDFF;}\n.light .ct-007771{color:#E53935;}\n.ct-007771{color:#F07178;}\n.light .ct-709943{color:#91B859;}\n.ct-709943{color:#C3E88D;}\n.light .ct-046724{color:#9C3EDA;}\n.ct-046724{color:#C792EA;}\n.light .ct-465623{color:#E2931D;}\n.ct-465623{color:#FFCB6B;}",{"title":115,"searchDepth":223,"depth":223,"links":2531},[2532],{"id":787,"depth":223,"text":2486,"children":2533},[2534],{"id":2489,"depth":232,"text":2246},"content:3.providers:cloudflare.md","3.providers/cloudflare.md",1693229331735]