[{"data":1,"prerenderedAt":4804},["ShallowReactive",2],{"navigation_docs":3,"-essentials-image-optimization":70,"-essentials-image-optimization-surround":4799},[4,30,60],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F2.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F3.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Quick Start","\u002Fgetting-started\u002Fquick-start","1.getting-started\u002F4.quick-start","i-lucide-rocket",{"title":26,"path":27,"stem":28,"icon":29},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F5.configuration","i-lucide-settings",{"title":31,"path":32,"stem":33,"children":34,"page":6},"Essentials","\u002Fessentials","2.essentials",[35,40,45,50,55],{"title":36,"path":37,"stem":38,"icon":39},"Composables","\u002Fessentials\u002Fcomposables","2.essentials\u002F1.composables","i-lucide-code",{"title":41,"path":42,"stem":43,"icon":44},"Components","\u002Fessentials\u002Fcomponents","2.essentials\u002F2.components","i-lucide-layers",{"title":46,"path":47,"stem":48,"icon":49},"Image Optimization","\u002Fessentials\u002Fimage-optimization","2.essentials\u002F3.image-optimization","i-lucide-image",{"title":51,"path":52,"stem":53,"icon":54},"Personalization","\u002Fessentials\u002Fpersonalization","2.essentials\u002F4.personalization","i-lucide-users",{"title":56,"path":57,"stem":58,"icon":59},"Performance Optimization","\u002Fessentials\u002Fperformance","2.essentials\u002F5.performance","i-lucide-zap",{"title":61,"path":62,"stem":63,"children":64,"page":6},"Features","\u002Ffeatures","3.features",[65],{"title":66,"path":67,"stem":68,"icon":69},"Live Preview","\u002Ffeatures\u002Flive-preview","3.features\u002F1.live-preview","i-lucide-eye",{"id":71,"title":46,"body":72,"description":4792,"extension":4793,"links":4794,"meta":4795,"navigation":4796,"path":47,"seo":4797,"stem":48,"__hash__":4798},"docs\u002F2.essentials\u002F3.image-optimization.md",{"type":73,"value":74,"toc":4754},"minimark",[75,79,97,102,105,145,149,163,168,174,199,203,285,303,311,315,433,436,440,578,582,695,699,823,827,830,834,837,863,1356,1360,1364,1604,1608,1948,1952,1955,2337,2340,2347,2453,2457,2974,2977,2980,3099,3103,3393,3397,3400,3834,3838,3841,4148,4152,4169,4173,4256,4260,4340,4343,4467,4471,4605,4609,4734,4738,4750],[76,77,78],"p",{},"Nuxt Contentstack provides powerful image optimization through seamless integration with @nuxt\u002Fimage and Contentstack's Image Delivery API, enabling responsive images, automatic format conversion, and advanced transformations.",[80,81,84,88,89,96],"callout",{"icon":82,"color":83},"i-lucide-book-open","primary",[85,86,87],"strong",{},"Explore Image Delivery API",": Learn about all available image transformations, parameters, and capabilities in the ",[90,91,95],"a",{"href":92,"rel":93},"https:\u002F\u002Fwww.contentstack.com\u002Fdocs\u002Fdevelopers\u002Fapis\u002Fimage-delivery-api",[94],"nofollow","Contentstack Image Delivery API documentation",". Discover advanced features like overlays, filters, canvas manipulation, and more.",[98,99,101],"h2",{"id":100},"overview","Overview",[76,103,104],{},"Image optimization features include:",[106,107,108,115,121,127,133,139],"ul",{},[109,110,111,114],"li",{},[85,112,113],{},"@nuxt\u002Fimage Integration",": Native Nuxt image optimization",[109,116,117,120],{},[85,118,119],{},"Contentstack Provider",": Custom provider for Image Delivery API",[109,122,123,126],{},[85,124,125],{},"Responsive Images",": Automatic sizing and density handling",[109,128,129,132],{},[85,130,131],{},"Format Optimization",": WebP, AVIF conversion with fallbacks",[109,134,135,138],{},[85,136,137],{},"Advanced Transformations",": Resize, crop, effects, and overlays",[109,140,141,144],{},[85,142,143],{},"Lazy Loading",": Optimized loading strategies",[98,146,148],{"id":147},"setup","Setup",[150,151,152],"blockquote",{},[76,153,154,157,158,162],{},[85,155,156],{},"Note:"," To use Contentstack's image optimization features, you need ",[159,160,161],"code",{},"@nuxt\u002Fimage"," version 2.0.0 or higher. The module can run without it if you don't need image optimization.",[164,165,167],"h3",{"id":166},"_1-install-nuxtimage","1. Install @nuxt\u002Fimage",[76,169,170,171,173],{},"Install ",[159,172,161],{}," if you want to use image optimization features:",[175,176,181],"pre",{"className":177,"code":178,"language":179,"meta":180,"style":180},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @nuxt\u002Fimage@^2.0.0\n","bash","",[159,182,183],{"__ignoreMap":180},[184,185,188,192,196],"span",{"class":186,"line":187},"line",1,[184,189,191],{"class":190},"sBMFI","npm",[184,193,195],{"class":194},"sfazB"," install",[184,197,198],{"class":194}," @nuxt\u002Fimage@^2.0.0\n",[164,200,202],{"id":201},"_2-configure-modules","2. Configure Modules",[175,204,209],{"className":205,"code":206,"filename":207,"language":208,"meta":180,"style":180},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n modules: [\n 'nuxt-contentstack',\n '@nuxt\u002Fimage'\n ]\n})\n","nuxt.config.ts","ts",[159,210,211,232,245,260,270,276],{"__ignoreMap":180},[184,212,213,217,220,224,228],{"class":186,"line":187},[184,214,216],{"class":215},"s7zQu","export",[184,218,219],{"class":215}," default",[184,221,223],{"class":222},"s2Zo4"," defineNuxtConfig",[184,225,227],{"class":226},"sTEyZ","(",[184,229,231],{"class":230},"sMK4o","{\n",[184,233,235,239,242],{"class":186,"line":234},2,[184,236,238],{"class":237},"swJcz"," modules",[184,240,241],{"class":230},":",[184,243,244],{"class":226}," [\n",[184,246,248,251,254,257],{"class":186,"line":247},3,[184,249,250],{"class":230}," '",[184,252,253],{"class":194},"nuxt-contentstack",[184,255,256],{"class":230},"'",[184,258,259],{"class":230},",\n",[184,261,263,265,267],{"class":186,"line":262},4,[184,264,250],{"class":230},[184,266,161],{"class":194},[184,268,269],{"class":230},"'\n",[184,271,273],{"class":186,"line":272},5,[184,274,275],{"class":226}," ]\n",[184,277,279,282],{"class":186,"line":278},6,[184,280,281],{"class":230},"}",[184,283,284],{"class":226},")\n",[80,286,288,291,292,294,295,298,299,302],{"icon":287},"i-lucide-info",[85,289,290],{},"Auto-registration",": When ",[159,293,161],{}," is detected, the module automatically registers the Contentstack image provider. No manual provider configuration is needed. To set it as the default provider (so you don't need ",[159,296,297],{},"provider=\"contentstack\""," on every component), add ",[159,300,301],{},"image: { provider: \"contentstack\" }"," to your config.",[175,304,309],{"className":305,"code":307,"language":308},[306],"language-text","\n## Basic Usage\n\n### NuxtImg Component\n\n```vue [components\u002FOptimizedImage.vue]\n\u003Ctemplate>\n \u003CNuxtImg\n :src=\"image.url\"\n :alt=\"image.title\"\n width=\"800\"\n height=\"400\"\n provider=\"contentstack\"\n \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\ndefineProps\u003C{\n image: {\n url: string\n title: string\n }\n}>()\n\u003C\u002Fscript>\n","text",[159,310,307],{"__ignoreMap":180},[164,312,314],{"id":313},"nuxtpicture-for-art-direction","NuxtPicture for Art Direction",[175,316,321],{"className":317,"code":318,"filename":319,"language":320,"meta":180,"style":180},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n \u003CNuxtPicture\n :src=\"hero.image.url\"\n :imgAttrs=\"{ alt: hero.image.title }\"\n sizes=\"100vw md:50vw lg:33vw\"\n densities=\"1x 2x\"\n provider=\"contentstack\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FResponsiveImage.vue","vue",[159,322,323,334,342,360,374,388,402,417,423],{"__ignoreMap":180},[184,324,325,328,331],{"class":186,"line":187},[184,326,327],{"class":230},"\u003C",[184,329,330],{"class":237},"template",[184,332,333],{"class":230},">\n",[184,335,336,339],{"class":186,"line":234},[184,337,338],{"class":230}," \u003C",[184,340,341],{"class":237},"NuxtPicture\n",[184,343,344,348,351,354,357],{"class":186,"line":247},[184,345,347],{"class":346},"spNyl"," :src",[184,349,350],{"class":230},"=",[184,352,353],{"class":230},"\"",[184,355,356],{"class":194},"hero.image.url",[184,358,359],{"class":230},"\"\n",[184,361,362,365,367,369,372],{"class":186,"line":262},[184,363,364],{"class":346}," :imgAttrs",[184,366,350],{"class":230},[184,368,353],{"class":230},[184,370,371],{"class":194},"{ alt: hero.image.title }",[184,373,359],{"class":230},[184,375,376,379,381,383,386],{"class":186,"line":272},[184,377,378],{"class":346}," sizes",[184,380,350],{"class":230},[184,382,353],{"class":230},[184,384,385],{"class":194},"100vw md:50vw lg:33vw",[184,387,359],{"class":230},[184,389,390,393,395,397,400],{"class":186,"line":278},[184,391,392],{"class":346}," densities",[184,394,350],{"class":230},[184,396,353],{"class":230},[184,398,399],{"class":194},"1x 2x",[184,401,359],{"class":230},[184,403,405,408,410,412,415],{"class":186,"line":404},7,[184,406,407],{"class":346}," provider",[184,409,350],{"class":230},[184,411,353],{"class":230},[184,413,414],{"class":194},"contentstack",[184,416,359],{"class":230},[184,418,420],{"class":186,"line":419},8,[184,421,422],{"class":230}," \u002F>\n",[184,424,426,429,431],{"class":186,"line":425},9,[184,427,428],{"class":230},"\u003C\u002F",[184,430,330],{"class":237},[184,432,333],{"class":230},[98,434,137],{"id":435},"advanced-transformations",[164,437,439],{"id":438},"quality-and-format-optimization","Quality and Format Optimization",[175,441,444],{"className":317,"code":442,"filename":443,"language":320,"meta":180,"style":180},"\u003Ctemplate>\n \u003CNuxtImg\n :src=\"image.url\"\n :alt=\"image.title\"\n width=\"600\"\n height=\"400\"\n :modifiers=\"{\n auto: 'webp,compress',\n quality: 85,\n format: 'webp'\n }\"\n provider=\"contentstack\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FQualityOptimized.vue",[159,445,446,454,461,474,488,502,516,527,532,537,543,551,564,569],{"__ignoreMap":180},[184,447,448,450,452],{"class":186,"line":187},[184,449,327],{"class":230},[184,451,330],{"class":237},[184,453,333],{"class":230},[184,455,456,458],{"class":186,"line":234},[184,457,338],{"class":230},[184,459,460],{"class":237},"NuxtImg\n",[184,462,463,465,467,469,472],{"class":186,"line":247},[184,464,347],{"class":346},[184,466,350],{"class":230},[184,468,353],{"class":230},[184,470,471],{"class":194},"image.url",[184,473,359],{"class":230},[184,475,476,479,481,483,486],{"class":186,"line":262},[184,477,478],{"class":346}," :alt",[184,480,350],{"class":230},[184,482,353],{"class":230},[184,484,485],{"class":194},"image.title",[184,487,359],{"class":230},[184,489,490,493,495,497,500],{"class":186,"line":272},[184,491,492],{"class":346}," width",[184,494,350],{"class":230},[184,496,353],{"class":230},[184,498,499],{"class":194},"600",[184,501,359],{"class":230},[184,503,504,507,509,511,514],{"class":186,"line":278},[184,505,506],{"class":346}," height",[184,508,350],{"class":230},[184,510,353],{"class":230},[184,512,513],{"class":194},"400",[184,515,359],{"class":230},[184,517,518,521,523,525],{"class":186,"line":404},[184,519,520],{"class":346}," :modifiers",[184,522,350],{"class":230},[184,524,353],{"class":230},[184,526,231],{"class":194},[184,528,529],{"class":186,"line":419},[184,530,531],{"class":194}," auto: 'webp,compress',\n",[184,533,534],{"class":186,"line":425},[184,535,536],{"class":194}," quality: 85,\n",[184,538,540],{"class":186,"line":539},10,[184,541,542],{"class":194}," format: 'webp'\n",[184,544,546,549],{"class":186,"line":545},11,[184,547,548],{"class":194}," }",[184,550,359],{"class":230},[184,552,554,556,558,560,562],{"class":186,"line":553},12,[184,555,407],{"class":346},[184,557,350],{"class":230},[184,559,353],{"class":230},[184,561,414],{"class":194},[184,563,359],{"class":230},[184,565,567],{"class":186,"line":566},13,[184,568,422],{"class":230},[184,570,572,574,576],{"class":186,"line":571},14,[184,573,428],{"class":230},[184,575,330],{"class":237},[184,577,333],{"class":230},[164,579,581],{"id":580},"cropping-and-fitting","Cropping and Fitting",[175,583,586],{"className":317,"code":584,"filename":585,"language":320,"meta":180,"style":180},"\u003Ctemplate>\n \u003CNuxtImg\n :src=\"gallery.image.url\"\n width=\"300\"\n height=\"300\"\n :modifiers=\"{\n fit: 'crop',\n crop: 'center',\n quality: 90\n }\"\n provider=\"contentstack\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FCroppedImage.vue",[159,587,588,596,602,615,628,640,650,655,660,665,671,683,687],{"__ignoreMap":180},[184,589,590,592,594],{"class":186,"line":187},[184,591,327],{"class":230},[184,593,330],{"class":237},[184,595,333],{"class":230},[184,597,598,600],{"class":186,"line":234},[184,599,338],{"class":230},[184,601,460],{"class":237},[184,603,604,606,608,610,613],{"class":186,"line":247},[184,605,347],{"class":346},[184,607,350],{"class":230},[184,609,353],{"class":230},[184,611,612],{"class":194},"gallery.image.url",[184,614,359],{"class":230},[184,616,617,619,621,623,626],{"class":186,"line":262},[184,618,492],{"class":346},[184,620,350],{"class":230},[184,622,353],{"class":230},[184,624,625],{"class":194},"300",[184,627,359],{"class":230},[184,629,630,632,634,636,638],{"class":186,"line":272},[184,631,506],{"class":346},[184,633,350],{"class":230},[184,635,353],{"class":230},[184,637,625],{"class":194},[184,639,359],{"class":230},[184,641,642,644,646,648],{"class":186,"line":278},[184,643,520],{"class":346},[184,645,350],{"class":230},[184,647,353],{"class":230},[184,649,231],{"class":194},[184,651,652],{"class":186,"line":404},[184,653,654],{"class":194}," fit: 'crop',\n",[184,656,657],{"class":186,"line":419},[184,658,659],{"class":194}," crop: 'center',\n",[184,661,662],{"class":186,"line":425},[184,663,664],{"class":194}," quality: 90\n",[184,666,667,669],{"class":186,"line":539},[184,668,548],{"class":194},[184,670,359],{"class":230},[184,672,673,675,677,679,681],{"class":186,"line":545},[184,674,407],{"class":346},[184,676,350],{"class":230},[184,678,353],{"class":230},[184,680,414],{"class":194},[184,682,359],{"class":230},[184,684,685],{"class":186,"line":553},[184,686,422],{"class":230},[184,688,689,691,693],{"class":186,"line":566},[184,690,428],{"class":230},[184,692,330],{"class":237},[184,694,333],{"class":230},[164,696,698],{"id":697},"visual-effects","Visual Effects",[175,700,703],{"className":317,"code":701,"filename":702,"language":320,"meta":180,"style":180},"\u003Ctemplate>\n \u003CNuxtImg\n :src=\"artistic.image.url\"\n width=\"500\"\n height=\"300\"\n :modifiers=\"{\n blur: 2,\n brightness: 110,\n contrast: 120,\n saturation: 130,\n quality: 80\n }\"\n provider=\"contentstack\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FStylizedImage.vue",[159,704,705,713,719,732,745,757,767,772,777,782,787,792,798,810,814],{"__ignoreMap":180},[184,706,707,709,711],{"class":186,"line":187},[184,708,327],{"class":230},[184,710,330],{"class":237},[184,712,333],{"class":230},[184,714,715,717],{"class":186,"line":234},[184,716,338],{"class":230},[184,718,460],{"class":237},[184,720,721,723,725,727,730],{"class":186,"line":247},[184,722,347],{"class":346},[184,724,350],{"class":230},[184,726,353],{"class":230},[184,728,729],{"class":194},"artistic.image.url",[184,731,359],{"class":230},[184,733,734,736,738,740,743],{"class":186,"line":262},[184,735,492],{"class":346},[184,737,350],{"class":230},[184,739,353],{"class":230},[184,741,742],{"class":194},"500",[184,744,359],{"class":230},[184,746,747,749,751,753,755],{"class":186,"line":272},[184,748,506],{"class":346},[184,750,350],{"class":230},[184,752,353],{"class":230},[184,754,625],{"class":194},[184,756,359],{"class":230},[184,758,759,761,763,765],{"class":186,"line":278},[184,760,520],{"class":346},[184,762,350],{"class":230},[184,764,353],{"class":230},[184,766,231],{"class":194},[184,768,769],{"class":186,"line":404},[184,770,771],{"class":194}," blur: 2,\n",[184,773,774],{"class":186,"line":419},[184,775,776],{"class":194}," brightness: 110,\n",[184,778,779],{"class":186,"line":425},[184,780,781],{"class":194}," contrast: 120,\n",[184,783,784],{"class":186,"line":539},[184,785,786],{"class":194}," saturation: 130,\n",[184,788,789],{"class":186,"line":545},[184,790,791],{"class":194}," quality: 80\n",[184,793,794,796],{"class":186,"line":553},[184,795,548],{"class":194},[184,797,359],{"class":230},[184,799,800,802,804,806,808],{"class":186,"line":566},[184,801,407],{"class":346},[184,803,350],{"class":230},[184,805,353],{"class":230},[184,807,414],{"class":194},[184,809,359],{"class":230},[184,811,812],{"class":186,"line":571},[184,813,422],{"class":230},[184,815,817,819,821],{"class":186,"line":816},15,[184,818,428],{"class":230},[184,820,330],{"class":237},[184,822,333],{"class":230},[98,824,826],{"id":825},"useimagetransform-composable","useImageTransform Composable",[76,828,829],{},"For programmatic image transformations and dynamic modifications:",[164,831,833],{"id":832},"basic-usage","Basic Usage",[76,835,836],{},"The composable returns four values:",[106,838,839,845,851,857],{},[109,840,841,844],{},[159,842,843],{},"transformedUrl"," - Computed URL with all transformations applied",[109,846,847,850],{},[159,848,849],{},"transformOptions"," - Readonly ref of current transform options",[109,852,853,856],{},[159,854,855],{},"updateTransform"," - Function to merge new options into current transforms",[109,858,859,862],{},[159,860,861],{},"resetTransform"," - Function to clear all transformations",[175,864,867],{"className":317,"code":865,"filename":866,"language":320,"meta":180,"style":180},"\u003Cscript setup>\nconst props = defineProps\u003C{\n imageUrl: string\n size: 'small' | 'medium' | 'large'\n}>()\n\nconst sizeMap = {\n small: { width: 300, height: 200 },\n medium: { width: 600, height: 400 },\n large: { width: 1200, height: 800 }\n}\n\nconst { transformedUrl, updateTransform, resetTransform } = useImageTransform(\n props.imageUrl,\n {\n ...sizeMap[props.size],\n quality: 85,\n format: 'webp',\n auto: 'webp,compress'\n }\n)\n\n\u002F\u002F Dynamically update transforms\nconst switchSize = (newSize: 'small' | 'medium' | 'large') => {\n updateTransform(sizeMap[newSize])\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cimg\n :src=\"transformedUrl\"\n :alt=\"alt\"\n class=\"responsive-image\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FDynamicImage.vue",[159,868,869,881,897,907,941,949,955,967,1000,1027,1055,1060,1064,1094,1107,1112,1128,1141,1158,1173,1179,1184,1189,1196,1245,1264,1269,1278,1283,1292,1300,1313,1327,1342,1347],{"__ignoreMap":180},[184,870,871,873,876,879],{"class":186,"line":187},[184,872,327],{"class":230},[184,874,875],{"class":237},"script",[184,877,878],{"class":346}," setup",[184,880,333],{"class":230},[184,882,883,886,889,891,894],{"class":186,"line":234},[184,884,885],{"class":346},"const",[184,887,888],{"class":226}," props ",[184,890,350],{"class":230},[184,892,893],{"class":222}," defineProps",[184,895,896],{"class":230},"\u003C{\n",[184,898,899,902,904],{"class":186,"line":247},[184,900,901],{"class":237}," imageUrl",[184,903,241],{"class":230},[184,905,906],{"class":190}," string\n",[184,908,909,912,914,917,920,922,925,927,930,932,934,936,939],{"class":186,"line":262},[184,910,911],{"class":237}," size",[184,913,241],{"class":230},[184,915,916],{"class":230}," '",[184,918,919],{"class":194},"small",[184,921,256],{"class":230},[184,923,924],{"class":230}," |",[184,926,916],{"class":230},[184,928,929],{"class":194},"medium",[184,931,256],{"class":230},[184,933,924],{"class":230},[184,935,916],{"class":230},[184,937,938],{"class":194},"large",[184,940,269],{"class":230},[184,942,943,946],{"class":186,"line":272},[184,944,945],{"class":230},"}>",[184,947,948],{"class":226},"()\n",[184,950,951],{"class":186,"line":278},[184,952,954],{"emptyLinePlaceholder":953},true,"\n",[184,956,957,959,962,964],{"class":186,"line":404},[184,958,885],{"class":346},[184,960,961],{"class":226}," sizeMap ",[184,963,350],{"class":230},[184,965,966],{"class":230}," {\n",[184,968,969,972,974,977,980,982,986,989,992,994,997],{"class":186,"line":419},[184,970,971],{"class":237}," small",[184,973,241],{"class":230},[184,975,976],{"class":230}," {",[184,978,979],{"class":237}," width",[184,981,241],{"class":230},[184,983,985],{"class":984},"sbssI"," 300",[184,987,988],{"class":230},",",[184,990,991],{"class":237}," height",[184,993,241],{"class":230},[184,995,996],{"class":984}," 200",[184,998,999],{"class":230}," },\n",[184,1001,1002,1005,1007,1009,1011,1013,1016,1018,1020,1022,1025],{"class":186,"line":425},[184,1003,1004],{"class":237}," medium",[184,1006,241],{"class":230},[184,1008,976],{"class":230},[184,1010,979],{"class":237},[184,1012,241],{"class":230},[184,1014,1015],{"class":984}," 600",[184,1017,988],{"class":230},[184,1019,991],{"class":237},[184,1021,241],{"class":230},[184,1023,1024],{"class":984}," 400",[184,1026,999],{"class":230},[184,1028,1029,1032,1034,1036,1038,1040,1043,1045,1047,1049,1052],{"class":186,"line":539},[184,1030,1031],{"class":237}," large",[184,1033,241],{"class":230},[184,1035,976],{"class":230},[184,1037,979],{"class":237},[184,1039,241],{"class":230},[184,1041,1042],{"class":984}," 1200",[184,1044,988],{"class":230},[184,1046,991],{"class":237},[184,1048,241],{"class":230},[184,1050,1051],{"class":984}," 800",[184,1053,1054],{"class":230}," }\n",[184,1056,1057],{"class":186,"line":545},[184,1058,1059],{"class":230},"}\n",[184,1061,1062],{"class":186,"line":553},[184,1063,954],{"emptyLinePlaceholder":953},[184,1065,1066,1068,1070,1073,1075,1078,1080,1083,1085,1088,1091],{"class":186,"line":566},[184,1067,885],{"class":346},[184,1069,976],{"class":230},[184,1071,1072],{"class":226}," transformedUrl",[184,1074,988],{"class":230},[184,1076,1077],{"class":226}," updateTransform",[184,1079,988],{"class":230},[184,1081,1082],{"class":226}," resetTransform ",[184,1084,281],{"class":230},[184,1086,1087],{"class":230}," =",[184,1089,1090],{"class":222}," useImageTransform",[184,1092,1093],{"class":226},"(\n",[184,1095,1096,1099,1102,1105],{"class":186,"line":571},[184,1097,1098],{"class":226}," props",[184,1100,1101],{"class":230},".",[184,1103,1104],{"class":226},"imageUrl",[184,1106,259],{"class":230},[184,1108,1109],{"class":186,"line":816},[184,1110,1111],{"class":230}," {\n",[184,1113,1115,1118,1121,1123,1126],{"class":186,"line":1114},16,[184,1116,1117],{"class":230}," ...",[184,1119,1120],{"class":226},"sizeMap[props",[184,1122,1101],{"class":230},[184,1124,1125],{"class":226},"size]",[184,1127,259],{"class":230},[184,1129,1131,1134,1136,1139],{"class":186,"line":1130},17,[184,1132,1133],{"class":237}," quality",[184,1135,241],{"class":230},[184,1137,1138],{"class":984}," 85",[184,1140,259],{"class":230},[184,1142,1144,1147,1149,1151,1154,1156],{"class":186,"line":1143},18,[184,1145,1146],{"class":237}," format",[184,1148,241],{"class":230},[184,1150,916],{"class":230},[184,1152,1153],{"class":194},"webp",[184,1155,256],{"class":230},[184,1157,259],{"class":230},[184,1159,1161,1164,1166,1168,1171],{"class":186,"line":1160},19,[184,1162,1163],{"class":237}," auto",[184,1165,241],{"class":230},[184,1167,916],{"class":230},[184,1169,1170],{"class":194},"webp,compress",[184,1172,269],{"class":230},[184,1174,1176],{"class":186,"line":1175},20,[184,1177,1178],{"class":230}," }\n",[184,1180,1182],{"class":186,"line":1181},21,[184,1183,284],{"class":226},[184,1185,1187],{"class":186,"line":1186},22,[184,1188,954],{"emptyLinePlaceholder":953},[184,1190,1192],{"class":186,"line":1191},23,[184,1193,1195],{"class":1194},"sHwdD","\u002F\u002F Dynamically update transforms\n",[184,1197,1199,1201,1204,1206,1209,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1240,1243],{"class":186,"line":1198},24,[184,1200,885],{"class":346},[184,1202,1203],{"class":226}," switchSize ",[184,1205,350],{"class":230},[184,1207,1208],{"class":230}," (",[184,1210,1212],{"class":1211},"sHdIc","newSize",[184,1214,241],{"class":230},[184,1216,916],{"class":230},[184,1218,919],{"class":194},[184,1220,256],{"class":230},[184,1222,924],{"class":230},[184,1224,916],{"class":230},[184,1226,929],{"class":194},[184,1228,256],{"class":230},[184,1230,924],{"class":230},[184,1232,916],{"class":230},[184,1234,938],{"class":194},[184,1236,256],{"class":230},[184,1238,1239],{"class":230},")",[184,1241,1242],{"class":346}," =>",[184,1244,966],{"class":230},[184,1246,1248,1251,1253,1256,1259,1261],{"class":186,"line":1247},25,[184,1249,1250],{"class":222}," updateTransform",[184,1252,227],{"class":237},[184,1254,1255],{"class":226},"sizeMap",[184,1257,1258],{"class":237},"[",[184,1260,1212],{"class":226},[184,1262,1263],{"class":237},"])\n",[184,1265,1267],{"class":186,"line":1266},26,[184,1268,1059],{"class":230},[184,1270,1272,1274,1276],{"class":186,"line":1271},27,[184,1273,428],{"class":230},[184,1275,875],{"class":237},[184,1277,333],{"class":230},[184,1279,1281],{"class":186,"line":1280},28,[184,1282,954],{"emptyLinePlaceholder":953},[184,1284,1286,1288,1290],{"class":186,"line":1285},29,[184,1287,327],{"class":230},[184,1289,330],{"class":237},[184,1291,333],{"class":230},[184,1293,1295,1297],{"class":186,"line":1294},30,[184,1296,338],{"class":230},[184,1298,1299],{"class":237},"img\n",[184,1301,1303,1305,1307,1309,1311],{"class":186,"line":1302},31,[184,1304,347],{"class":346},[184,1306,350],{"class":230},[184,1308,353],{"class":230},[184,1310,843],{"class":194},[184,1312,359],{"class":230},[184,1314,1316,1318,1320,1322,1325],{"class":186,"line":1315},32,[184,1317,478],{"class":346},[184,1319,350],{"class":230},[184,1321,353],{"class":230},[184,1323,1324],{"class":194},"alt",[184,1326,359],{"class":230},[184,1328,1330,1333,1335,1337,1340],{"class":186,"line":1329},33,[184,1331,1332],{"class":346}," class",[184,1334,350],{"class":230},[184,1336,353],{"class":230},[184,1338,1339],{"class":194},"responsive-image",[184,1341,359],{"class":230},[184,1343,1345],{"class":186,"line":1344},34,[184,1346,422],{"class":230},[184,1348,1350,1352,1354],{"class":186,"line":1349},35,[184,1351,428],{"class":230},[184,1353,330],{"class":237},[184,1355,333],{"class":230},[98,1357,1359],{"id":1358},"advanced-features","Advanced Features",[164,1361,1363],{"id":1362},"overlay-images","Overlay Images",[175,1365,1370],{"className":1366,"code":1367,"filename":1368,"language":1369,"meta":180,"style":180},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export const useWatermarkImage = (baseImageUrl: string, watermarkUrl: string) => {\n const { transformedUrl } = useImageTransform(baseImageUrl, {\n width: 800,\n height: 600,\n quality: 85,\n overlay: {\n relativeURL: watermarkUrl,\n align: 'bottom', \u002F\u002F 'top' | 'bottom' | 'left' | 'right' | 'middle' | 'center'\n repeat: 'both', \u002F\u002F 'x' | 'y' | 'both' (optional)\n width: '20p', \u002F\u002F 20% of base image\n height: 50, \u002F\u002F pixels\n pad: 10 \u002F\u002F padding from edge\n }\n })\n\n return { watermarkedUrl: transformedUrl }\n}\n","composables\u002FuseWatermark.ts","typescript",[159,1371,1372,1409,1433,1443,1453,1463,1472,1483,1502,1521,1540,1555,1568,1573,1580,1584,1600],{"__ignoreMap":180},[184,1373,1374,1376,1379,1382,1384,1386,1389,1391,1394,1396,1399,1401,1403,1405,1407],{"class":186,"line":187},[184,1375,216],{"class":215},[184,1377,1378],{"class":346}," const",[184,1380,1381],{"class":226}," useWatermarkImage ",[184,1383,350],{"class":230},[184,1385,1208],{"class":230},[184,1387,1388],{"class":1211},"baseImageUrl",[184,1390,241],{"class":230},[184,1392,1393],{"class":190}," string",[184,1395,988],{"class":230},[184,1397,1398],{"class":1211}," watermarkUrl",[184,1400,241],{"class":230},[184,1402,1393],{"class":190},[184,1404,1239],{"class":230},[184,1406,1242],{"class":346},[184,1408,966],{"class":230},[184,1410,1411,1414,1416,1418,1421,1423,1425,1427,1429,1431],{"class":186,"line":234},[184,1412,1413],{"class":346}," const",[184,1415,976],{"class":230},[184,1417,1072],{"class":226},[184,1419,1420],{"class":230}," }",[184,1422,1087],{"class":230},[184,1424,1090],{"class":222},[184,1426,227],{"class":237},[184,1428,1388],{"class":226},[184,1430,988],{"class":230},[184,1432,966],{"class":230},[184,1434,1435,1437,1439,1441],{"class":186,"line":247},[184,1436,492],{"class":237},[184,1438,241],{"class":230},[184,1440,1051],{"class":984},[184,1442,259],{"class":230},[184,1444,1445,1447,1449,1451],{"class":186,"line":262},[184,1446,506],{"class":237},[184,1448,241],{"class":230},[184,1450,1015],{"class":984},[184,1452,259],{"class":230},[184,1454,1455,1457,1459,1461],{"class":186,"line":272},[184,1456,1133],{"class":237},[184,1458,241],{"class":230},[184,1460,1138],{"class":984},[184,1462,259],{"class":230},[184,1464,1465,1468,1470],{"class":186,"line":278},[184,1466,1467],{"class":237}," overlay",[184,1469,241],{"class":230},[184,1471,966],{"class":230},[184,1473,1474,1477,1479,1481],{"class":186,"line":404},[184,1475,1476],{"class":237}," relativeURL",[184,1478,241],{"class":230},[184,1480,1398],{"class":226},[184,1482,259],{"class":230},[184,1484,1485,1488,1490,1492,1495,1497,1499],{"class":186,"line":419},[184,1486,1487],{"class":237}," align",[184,1489,241],{"class":230},[184,1491,916],{"class":230},[184,1493,1494],{"class":194},"bottom",[184,1496,256],{"class":230},[184,1498,988],{"class":230},[184,1500,1501],{"class":1194}," \u002F\u002F 'top' | 'bottom' | 'left' | 'right' | 'middle' | 'center'\n",[184,1503,1504,1507,1509,1511,1514,1516,1518],{"class":186,"line":425},[184,1505,1506],{"class":237}," repeat",[184,1508,241],{"class":230},[184,1510,916],{"class":230},[184,1512,1513],{"class":194},"both",[184,1515,256],{"class":230},[184,1517,988],{"class":230},[184,1519,1520],{"class":1194}," \u002F\u002F 'x' | 'y' | 'both' (optional)\n",[184,1522,1523,1526,1528,1530,1533,1535,1537],{"class":186,"line":539},[184,1524,1525],{"class":237}," width",[184,1527,241],{"class":230},[184,1529,916],{"class":230},[184,1531,1532],{"class":194},"20p",[184,1534,256],{"class":230},[184,1536,988],{"class":230},[184,1538,1539],{"class":1194}," \u002F\u002F 20% of base image\n",[184,1541,1542,1545,1547,1550,1552],{"class":186,"line":545},[184,1543,1544],{"class":237}," height",[184,1546,241],{"class":230},[184,1548,1549],{"class":984}," 50",[184,1551,988],{"class":230},[184,1553,1554],{"class":1194}," \u002F\u002F pixels\n",[184,1556,1557,1560,1562,1565],{"class":186,"line":553},[184,1558,1559],{"class":237}," pad",[184,1561,241],{"class":230},[184,1563,1564],{"class":984}," 10",[184,1566,1567],{"class":1194}," \u002F\u002F padding from edge\n",[184,1569,1570],{"class":186,"line":566},[184,1571,1572],{"class":230}," }\n",[184,1574,1575,1578],{"class":186,"line":571},[184,1576,1577],{"class":230}," }",[184,1579,284],{"class":237},[184,1581,1582],{"class":186,"line":816},[184,1583,954],{"emptyLinePlaceholder":953},[184,1585,1586,1589,1591,1594,1596,1598],{"class":186,"line":1114},[184,1587,1588],{"class":215}," return",[184,1590,976],{"class":230},[184,1592,1593],{"class":237}," watermarkedUrl",[184,1595,241],{"class":230},[184,1597,1072],{"class":226},[184,1599,1054],{"class":230},[184,1601,1602],{"class":186,"line":1130},[184,1603,1059],{"class":230},[164,1605,1607],{"id":1606},"smart-cropping","Smart Cropping",[175,1609,1612],{"className":317,"code":1610,"filename":1611,"language":320,"meta":180,"style":180},"\u003Cscript setup>\nconst props = defineProps\u003C{\n image: {\n url: string\n title: string\n focalPoint?: {\n x: number\n y: number\n }\n }\n}>()\n\nconst { transformedUrl } = useImageTransform(props.image.url, {\n width: 400,\n height: 300,\n fit: 'crop',\n crop: props.image.focalPoint \n ? `${props.image.focalPoint.x},${props.image.focalPoint.y}`\n : 'smart'\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cimg \n :src=\"transformedUrl\" \n :alt=\"image.title\"\n class=\"smart-cropped\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FSmartCrop.vue",[159,1613,1614,1624,1636,1645,1654,1663,1673,1683,1692,1696,1700,1706,1710,1742,1753,1764,1780,1799,1849,1861,1867,1875,1879,1887,1897,1911,1923,1936,1940],{"__ignoreMap":180},[184,1615,1616,1618,1620,1622],{"class":186,"line":187},[184,1617,327],{"class":230},[184,1619,875],{"class":237},[184,1621,878],{"class":346},[184,1623,333],{"class":230},[184,1625,1626,1628,1630,1632,1634],{"class":186,"line":234},[184,1627,885],{"class":346},[184,1629,888],{"class":226},[184,1631,350],{"class":230},[184,1633,893],{"class":222},[184,1635,896],{"class":230},[184,1637,1638,1641,1643],{"class":186,"line":247},[184,1639,1640],{"class":237}," image",[184,1642,241],{"class":230},[184,1644,966],{"class":230},[184,1646,1647,1650,1652],{"class":186,"line":262},[184,1648,1649],{"class":237}," url",[184,1651,241],{"class":230},[184,1653,906],{"class":190},[184,1655,1656,1659,1661],{"class":186,"line":272},[184,1657,1658],{"class":237}," title",[184,1660,241],{"class":230},[184,1662,906],{"class":190},[184,1664,1665,1668,1671],{"class":186,"line":278},[184,1666,1667],{"class":237}," focalPoint",[184,1669,1670],{"class":230},"?:",[184,1672,966],{"class":230},[184,1674,1675,1678,1680],{"class":186,"line":404},[184,1676,1677],{"class":237}," x",[184,1679,241],{"class":230},[184,1681,1682],{"class":190}," number\n",[184,1684,1685,1688,1690],{"class":186,"line":419},[184,1686,1687],{"class":237}," y",[184,1689,241],{"class":230},[184,1691,1682],{"class":190},[184,1693,1694],{"class":186,"line":425},[184,1695,1572],{"class":230},[184,1697,1698],{"class":186,"line":539},[184,1699,1178],{"class":230},[184,1701,1702,1704],{"class":186,"line":545},[184,1703,945],{"class":230},[184,1705,948],{"class":226},[184,1707,1708],{"class":186,"line":553},[184,1709,954],{"emptyLinePlaceholder":953},[184,1711,1712,1714,1716,1719,1721,1723,1725,1728,1730,1733,1735,1738,1740],{"class":186,"line":566},[184,1713,885],{"class":346},[184,1715,976],{"class":230},[184,1717,1718],{"class":226}," transformedUrl ",[184,1720,281],{"class":230},[184,1722,1087],{"class":230},[184,1724,1090],{"class":222},[184,1726,1727],{"class":226},"(props",[184,1729,1101],{"class":230},[184,1731,1732],{"class":226},"image",[184,1734,1101],{"class":230},[184,1736,1737],{"class":226},"url",[184,1739,988],{"class":230},[184,1741,966],{"class":230},[184,1743,1744,1747,1749,1751],{"class":186,"line":571},[184,1745,1746],{"class":237}," width",[184,1748,241],{"class":230},[184,1750,1024],{"class":984},[184,1752,259],{"class":230},[184,1754,1755,1758,1760,1762],{"class":186,"line":816},[184,1756,1757],{"class":237}," height",[184,1759,241],{"class":230},[184,1761,985],{"class":984},[184,1763,259],{"class":230},[184,1765,1766,1769,1771,1773,1776,1778],{"class":186,"line":1114},[184,1767,1768],{"class":237}," fit",[184,1770,241],{"class":230},[184,1772,916],{"class":230},[184,1774,1775],{"class":194},"crop",[184,1777,256],{"class":230},[184,1779,259],{"class":230},[184,1781,1782,1785,1787,1790,1792,1794,1796],{"class":186,"line":1130},[184,1783,1784],{"class":237}," crop",[184,1786,241],{"class":230},[184,1788,1789],{"class":226}," props",[184,1791,1101],{"class":230},[184,1793,1732],{"class":226},[184,1795,1101],{"class":230},[184,1797,1798],{"class":226},"focalPoint \n",[184,1800,1801,1804,1807,1810,1812,1814,1816,1819,1821,1824,1826,1828,1831,1833,1835,1837,1839,1841,1843,1846],{"class":186,"line":1143},[184,1802,1803],{"class":230}," ?",[184,1805,1806],{"class":230}," `${",[184,1808,1809],{"class":226},"props",[184,1811,1101],{"class":230},[184,1813,1732],{"class":226},[184,1815,1101],{"class":230},[184,1817,1818],{"class":226},"focalPoint",[184,1820,1101],{"class":230},[184,1822,1823],{"class":226},"x",[184,1825,281],{"class":230},[184,1827,988],{"class":194},[184,1829,1830],{"class":230},"${",[184,1832,1809],{"class":226},[184,1834,1101],{"class":230},[184,1836,1732],{"class":226},[184,1838,1101],{"class":230},[184,1840,1818],{"class":226},[184,1842,1101],{"class":230},[184,1844,1845],{"class":226},"y",[184,1847,1848],{"class":230},"}`\n",[184,1850,1851,1854,1856,1859],{"class":186,"line":1160},[184,1852,1853],{"class":230}," :",[184,1855,916],{"class":230},[184,1857,1858],{"class":194},"smart",[184,1860,269],{"class":230},[184,1862,1863,1865],{"class":186,"line":1175},[184,1864,281],{"class":230},[184,1866,284],{"class":226},[184,1868,1869,1871,1873],{"class":186,"line":1181},[184,1870,428],{"class":230},[184,1872,875],{"class":237},[184,1874,333],{"class":230},[184,1876,1877],{"class":186,"line":1186},[184,1878,954],{"emptyLinePlaceholder":953},[184,1880,1881,1883,1885],{"class":186,"line":1191},[184,1882,327],{"class":230},[184,1884,330],{"class":237},[184,1886,333],{"class":230},[184,1888,1889,1891,1894],{"class":186,"line":1198},[184,1890,338],{"class":230},[184,1892,1893],{"class":237},"img",[184,1895,1896],{"class":230}," \n",[184,1898,1899,1901,1903,1905,1907,1909],{"class":186,"line":1247},[184,1900,347],{"class":346},[184,1902,350],{"class":230},[184,1904,353],{"class":230},[184,1906,843],{"class":194},[184,1908,353],{"class":230},[184,1910,1896],{"class":230},[184,1912,1913,1915,1917,1919,1921],{"class":186,"line":1266},[184,1914,478],{"class":346},[184,1916,350],{"class":230},[184,1918,353],{"class":230},[184,1920,485],{"class":194},[184,1922,359],{"class":230},[184,1924,1925,1927,1929,1931,1934],{"class":186,"line":1271},[184,1926,1332],{"class":346},[184,1928,350],{"class":230},[184,1930,353],{"class":230},[184,1932,1933],{"class":194},"smart-cropped",[184,1935,359],{"class":230},[184,1937,1938],{"class":186,"line":1280},[184,1939,422],{"class":230},[184,1941,1942,1944,1946],{"class":186,"line":1285},[184,1943,428],{"class":230},[184,1945,330],{"class":237},[184,1947,333],{"class":230},[164,1949,1951],{"id":1950},"progressive-enhancement","Progressive Enhancement",[76,1953,1954],{},"Load a low-quality placeholder first, then swap to high-quality:",[175,1956,1959],{"className":317,"code":1957,"filename":1958,"language":320,"meta":180,"style":180},"\u003Cscript setup>\nconst props = defineProps\u003C{\n imageUrl: string\n alt: string\n}>()\n\n\u002F\u002F Low quality placeholder\nconst { transformedUrl: placeholder } = useImageTransform(props.imageUrl, {\n width: 50,\n quality: 20,\n blur: 5\n})\n\n\u002F\u002F High quality image\nconst { transformedUrl: highQuality } = useImageTransform(props.imageUrl, {\n width: 800,\n quality: 85,\n format: 'webp'\n})\n\nconst isLoaded = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"progressive-image\">\n \u003Cimg v-show=\"!isLoaded\" :src=\"placeholder\" :alt=\"alt\" class=\"placeholder\" \u002F>\n \u003Cimg :src=\"highQuality\" :alt=\"alt\" @load=\"isLoaded = true\" \u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","components\u002FProgressiveImage.vue",[159,1960,1961,1971,1983,1991,2000,2006,2010,2015,2044,2054,2066,2076,2082,2086,2091,2120,2130,2140,2153,2159,2163,2183,2191,2195,2203,2224,2279,2320,2329],{"__ignoreMap":180},[184,1962,1963,1965,1967,1969],{"class":186,"line":187},[184,1964,327],{"class":230},[184,1966,875],{"class":237},[184,1968,878],{"class":346},[184,1970,333],{"class":230},[184,1972,1973,1975,1977,1979,1981],{"class":186,"line":234},[184,1974,885],{"class":346},[184,1976,888],{"class":226},[184,1978,350],{"class":230},[184,1980,893],{"class":222},[184,1982,896],{"class":230},[184,1984,1985,1987,1989],{"class":186,"line":247},[184,1986,901],{"class":237},[184,1988,241],{"class":230},[184,1990,906],{"class":190},[184,1992,1993,1996,1998],{"class":186,"line":262},[184,1994,1995],{"class":237}," alt",[184,1997,241],{"class":230},[184,1999,906],{"class":190},[184,2001,2002,2004],{"class":186,"line":272},[184,2003,945],{"class":230},[184,2005,948],{"class":226},[184,2007,2008],{"class":186,"line":278},[184,2009,954],{"emptyLinePlaceholder":953},[184,2011,2012],{"class":186,"line":404},[184,2013,2014],{"class":1194},"\u002F\u002F Low quality placeholder\n",[184,2016,2017,2019,2021,2023,2025,2028,2030,2032,2034,2036,2038,2040,2042],{"class":186,"line":419},[184,2018,885],{"class":346},[184,2020,976],{"class":230},[184,2022,1072],{"class":237},[184,2024,241],{"class":230},[184,2026,2027],{"class":226}," placeholder ",[184,2029,281],{"class":230},[184,2031,1087],{"class":230},[184,2033,1090],{"class":222},[184,2035,1727],{"class":226},[184,2037,1101],{"class":230},[184,2039,1104],{"class":226},[184,2041,988],{"class":230},[184,2043,966],{"class":230},[184,2045,2046,2048,2050,2052],{"class":186,"line":425},[184,2047,1746],{"class":237},[184,2049,241],{"class":230},[184,2051,1549],{"class":984},[184,2053,259],{"class":230},[184,2055,2056,2059,2061,2064],{"class":186,"line":539},[184,2057,2058],{"class":237}," quality",[184,2060,241],{"class":230},[184,2062,2063],{"class":984}," 20",[184,2065,259],{"class":230},[184,2067,2068,2071,2073],{"class":186,"line":545},[184,2069,2070],{"class":237}," blur",[184,2072,241],{"class":230},[184,2074,2075],{"class":984}," 5\n",[184,2077,2078,2080],{"class":186,"line":553},[184,2079,281],{"class":230},[184,2081,284],{"class":226},[184,2083,2084],{"class":186,"line":566},[184,2085,954],{"emptyLinePlaceholder":953},[184,2087,2088],{"class":186,"line":571},[184,2089,2090],{"class":1194},"\u002F\u002F High quality image\n",[184,2092,2093,2095,2097,2099,2101,2104,2106,2108,2110,2112,2114,2116,2118],{"class":186,"line":816},[184,2094,885],{"class":346},[184,2096,976],{"class":230},[184,2098,1072],{"class":237},[184,2100,241],{"class":230},[184,2102,2103],{"class":226}," highQuality ",[184,2105,281],{"class":230},[184,2107,1087],{"class":230},[184,2109,1090],{"class":222},[184,2111,1727],{"class":226},[184,2113,1101],{"class":230},[184,2115,1104],{"class":226},[184,2117,988],{"class":230},[184,2119,966],{"class":230},[184,2121,2122,2124,2126,2128],{"class":186,"line":1114},[184,2123,1746],{"class":237},[184,2125,241],{"class":230},[184,2127,1051],{"class":984},[184,2129,259],{"class":230},[184,2131,2132,2134,2136,2138],{"class":186,"line":1130},[184,2133,2058],{"class":237},[184,2135,241],{"class":230},[184,2137,1138],{"class":984},[184,2139,259],{"class":230},[184,2141,2142,2145,2147,2149,2151],{"class":186,"line":1143},[184,2143,2144],{"class":237}," format",[184,2146,241],{"class":230},[184,2148,916],{"class":230},[184,2150,1153],{"class":194},[184,2152,269],{"class":230},[184,2154,2155,2157],{"class":186,"line":1160},[184,2156,281],{"class":230},[184,2158,284],{"class":226},[184,2160,2161],{"class":186,"line":1175},[184,2162,954],{"emptyLinePlaceholder":953},[184,2164,2165,2167,2170,2172,2175,2177,2181],{"class":186,"line":1181},[184,2166,885],{"class":346},[184,2168,2169],{"class":226}," isLoaded ",[184,2171,350],{"class":230},[184,2173,2174],{"class":222}," ref",[184,2176,227],{"class":226},[184,2178,2180],{"class":2179},"sfNiH","false",[184,2182,284],{"class":226},[184,2184,2185,2187,2189],{"class":186,"line":1186},[184,2186,428],{"class":230},[184,2188,875],{"class":237},[184,2190,333],{"class":230},[184,2192,2193],{"class":186,"line":1191},[184,2194,954],{"emptyLinePlaceholder":953},[184,2196,2197,2199,2201],{"class":186,"line":1198},[184,2198,327],{"class":230},[184,2200,330],{"class":237},[184,2202,333],{"class":230},[184,2204,2205,2207,2210,2213,2215,2217,2220,2222],{"class":186,"line":1247},[184,2206,338],{"class":230},[184,2208,2209],{"class":237},"div",[184,2211,2212],{"class":346}," class",[184,2214,350],{"class":230},[184,2216,353],{"class":230},[184,2218,2219],{"class":194},"progressive-image",[184,2221,353],{"class":230},[184,2223,333],{"class":230},[184,2225,2226,2229,2231,2234,2236,2238,2241,2243,2246,2248,2250,2253,2255,2258,2260,2262,2264,2266,2268,2270,2272,2274,2276],{"class":186,"line":1266},[184,2227,2228],{"class":230}," \u003C",[184,2230,1893],{"class":237},[184,2232,2233],{"class":346}," v-show",[184,2235,350],{"class":230},[184,2237,353],{"class":230},[184,2239,2240],{"class":194},"!isLoaded",[184,2242,353],{"class":230},[184,2244,2245],{"class":346}," :src",[184,2247,350],{"class":230},[184,2249,353],{"class":230},[184,2251,2252],{"class":194},"placeholder",[184,2254,353],{"class":230},[184,2256,2257],{"class":346}," :alt",[184,2259,350],{"class":230},[184,2261,353],{"class":230},[184,2263,1324],{"class":194},[184,2265,353],{"class":230},[184,2267,2212],{"class":346},[184,2269,350],{"class":230},[184,2271,353],{"class":230},[184,2273,2252],{"class":194},[184,2275,353],{"class":230},[184,2277,2278],{"class":230}," \u002F>\n",[184,2280,2281,2283,2285,2287,2289,2291,2294,2296,2298,2300,2302,2304,2306,2309,2311,2313,2316,2318],{"class":186,"line":1271},[184,2282,2228],{"class":230},[184,2284,1893],{"class":237},[184,2286,2245],{"class":346},[184,2288,350],{"class":230},[184,2290,353],{"class":230},[184,2292,2293],{"class":194},"highQuality",[184,2295,353],{"class":230},[184,2297,2257],{"class":346},[184,2299,350],{"class":230},[184,2301,353],{"class":230},[184,2303,1324],{"class":194},[184,2305,353],{"class":230},[184,2307,2308],{"class":346}," @load",[184,2310,350],{"class":230},[184,2312,353],{"class":230},[184,2314,2315],{"class":194},"isLoaded = true",[184,2317,353],{"class":230},[184,2319,2278],{"class":230},[184,2321,2322,2325,2327],{"class":186,"line":1280},[184,2323,2324],{"class":230}," \u003C\u002F",[184,2326,2209],{"class":237},[184,2328,333],{"class":230},[184,2330,2331,2333,2335],{"class":186,"line":1285},[184,2332,428],{"class":230},[184,2334,330],{"class":237},[184,2336,333],{"class":230},[98,2338,125],{"id":2339},"responsive-images",[76,2341,2342,2343,2346],{},"Use ",[159,2344,2345],{},"NuxtPicture"," for responsive images with breakpoint-based sizing:",[175,2348,2351],{"className":317,"code":2349,"filename":2350,"language":320,"meta":180,"style":180},"\u003Ctemplate>\n \u003CNuxtPicture\n :src=\"hero.image.url\"\n :imgAttrs=\"{ alt: hero.image.title }\"\n :modifiers=\"{ quality: 85, auto: 'webp,compress' }\"\n sizes=\"100vw sm:90vw md:80vw lg:1200px\"\n densities=\"1x 2x\"\n provider=\"contentstack\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FResponsiveHero.vue",[159,2352,2353,2361,2367,2379,2391,2404,2417,2429,2441,2445],{"__ignoreMap":180},[184,2354,2355,2357,2359],{"class":186,"line":187},[184,2356,327],{"class":230},[184,2358,330],{"class":237},[184,2360,333],{"class":230},[184,2362,2363,2365],{"class":186,"line":234},[184,2364,338],{"class":230},[184,2366,341],{"class":237},[184,2368,2369,2371,2373,2375,2377],{"class":186,"line":247},[184,2370,347],{"class":346},[184,2372,350],{"class":230},[184,2374,353],{"class":230},[184,2376,356],{"class":194},[184,2378,359],{"class":230},[184,2380,2381,2383,2385,2387,2389],{"class":186,"line":262},[184,2382,364],{"class":346},[184,2384,350],{"class":230},[184,2386,353],{"class":230},[184,2388,371],{"class":194},[184,2390,359],{"class":230},[184,2392,2393,2395,2397,2399,2402],{"class":186,"line":272},[184,2394,520],{"class":346},[184,2396,350],{"class":230},[184,2398,353],{"class":230},[184,2400,2401],{"class":194},"{ quality: 85, auto: 'webp,compress' }",[184,2403,359],{"class":230},[184,2405,2406,2408,2410,2412,2415],{"class":186,"line":278},[184,2407,378],{"class":346},[184,2409,350],{"class":230},[184,2411,353],{"class":230},[184,2413,2414],{"class":194},"100vw sm:90vw md:80vw lg:1200px",[184,2416,359],{"class":230},[184,2418,2419,2421,2423,2425,2427],{"class":186,"line":404},[184,2420,392],{"class":346},[184,2422,350],{"class":230},[184,2424,353],{"class":230},[184,2426,399],{"class":194},[184,2428,359],{"class":230},[184,2430,2431,2433,2435,2437,2439],{"class":186,"line":419},[184,2432,407],{"class":346},[184,2434,350],{"class":230},[184,2436,353],{"class":230},[184,2438,414],{"class":194},[184,2440,359],{"class":230},[184,2442,2443],{"class":186,"line":425},[184,2444,422],{"class":230},[184,2446,2447,2449,2451],{"class":186,"line":539},[184,2448,428],{"class":230},[184,2450,330],{"class":237},[184,2452,333],{"class":230},[164,2454,2456],{"id":2455},"art-direction","Art Direction",[175,2458,2461],{"className":317,"code":2459,"filename":2460,"language":320,"meta":180,"style":180},"\u003Ctemplate>\n \u003Cpicture>\n \u003C!-- Desktop version (landscape) -->\n \u003Csource\n media=\"(min-width: 768px)\"\n :srcset=\"desktopSrcset\"\n type=\"image\u002Fwebp\"\n \u002F>\n \n \u003C!-- Mobile version (portrait crop) -->\n \u003Csource\n :srcset=\"mobileSrcset\"\n type=\"image\u002Fwebp\"\n \u002F>\n \n \u003C!-- Fallback -->\n \u003Cimg :src=\"fallbackSrc\" :alt=\"image.title\" \u002F>\n \u003C\u002Fpicture>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst props = defineProps\u003C{\n image: { url: string; title: string }\n}>()\n\n\u002F\u002F Desktop landscape\nconst { transformedUrl: desktopSrcset } = useImageTransform(props.image.url, {\n width: 1200,\n height: 600,\n fit: 'crop',\n crop: 'center'\n})\n\n\u002F\u002F Mobile portrait\nconst { transformedUrl: mobileSrcset } = useImageTransform(props.image.url, {\n width: 400,\n height: 600,\n fit: 'crop',\n crop: 'top'\n})\n\n\u002F\u002F Fallback\nconst { transformedUrl: fallbackSrc } = useImageTransform(props.image.url, {\n width: 800,\n height: 400\n})\n\u003C\u002Fscript>\n","components\u002FArtDirectedImage.vue",[159,2462,2463,2471,2480,2485,2492,2506,2520,2534,2539,2544,2549,2555,2568,2580,2584,2588,2593,2622,2630,2638,2642,2652,2664,2691,2697,2701,2706,2739,2749,2759,2773,2786,2792,2796,2801,2834,2845,2856,2871,2885,2892,2897,2903,2937,2948,2958,2965],{"__ignoreMap":180},[184,2464,2465,2467,2469],{"class":186,"line":187},[184,2466,327],{"class":230},[184,2468,330],{"class":237},[184,2470,333],{"class":230},[184,2472,2473,2475,2478],{"class":186,"line":234},[184,2474,338],{"class":230},[184,2476,2477],{"class":237},"picture",[184,2479,333],{"class":230},[184,2481,2482],{"class":186,"line":247},[184,2483,2484],{"class":1194}," \u003C!-- Desktop version (landscape) -->\n",[184,2486,2487,2489],{"class":186,"line":262},[184,2488,2228],{"class":230},[184,2490,2491],{"class":237},"source\n",[184,2493,2494,2497,2499,2501,2504],{"class":186,"line":272},[184,2495,2496],{"class":346}," media",[184,2498,350],{"class":230},[184,2500,353],{"class":230},[184,2502,2503],{"class":194},"(min-width: 768px)",[184,2505,359],{"class":230},[184,2507,2508,2511,2513,2515,2518],{"class":186,"line":278},[184,2509,2510],{"class":346}," :srcset",[184,2512,350],{"class":230},[184,2514,353],{"class":230},[184,2516,2517],{"class":194},"desktopSrcset",[184,2519,359],{"class":230},[184,2521,2522,2525,2527,2529,2532],{"class":186,"line":404},[184,2523,2524],{"class":346}," type",[184,2526,350],{"class":230},[184,2528,353],{"class":230},[184,2530,2531],{"class":194},"image\u002Fwebp",[184,2533,359],{"class":230},[184,2535,2536],{"class":186,"line":419},[184,2537,2538],{"class":230}," \u002F>\n",[184,2540,2541],{"class":186,"line":425},[184,2542,2543],{"class":226}," \n",[184,2545,2546],{"class":186,"line":539},[184,2547,2548],{"class":1194}," \u003C!-- Mobile version (portrait crop) -->\n",[184,2550,2551,2553],{"class":186,"line":545},[184,2552,2228],{"class":230},[184,2554,2491],{"class":237},[184,2556,2557,2559,2561,2563,2566],{"class":186,"line":553},[184,2558,2510],{"class":346},[184,2560,350],{"class":230},[184,2562,353],{"class":230},[184,2564,2565],{"class":194},"mobileSrcset",[184,2567,359],{"class":230},[184,2569,2570,2572,2574,2576,2578],{"class":186,"line":566},[184,2571,2524],{"class":346},[184,2573,350],{"class":230},[184,2575,353],{"class":230},[184,2577,2531],{"class":194},[184,2579,359],{"class":230},[184,2581,2582],{"class":186,"line":571},[184,2583,2538],{"class":230},[184,2585,2586],{"class":186,"line":816},[184,2587,2543],{"class":226},[184,2589,2590],{"class":186,"line":1114},[184,2591,2592],{"class":1194}," \u003C!-- Fallback -->\n",[184,2594,2595,2597,2599,2601,2603,2605,2608,2610,2612,2614,2616,2618,2620],{"class":186,"line":1130},[184,2596,2228],{"class":230},[184,2598,1893],{"class":237},[184,2600,2245],{"class":346},[184,2602,350],{"class":230},[184,2604,353],{"class":230},[184,2606,2607],{"class":194},"fallbackSrc",[184,2609,353],{"class":230},[184,2611,2257],{"class":346},[184,2613,350],{"class":230},[184,2615,353],{"class":230},[184,2617,485],{"class":194},[184,2619,353],{"class":230},[184,2621,2278],{"class":230},[184,2623,2624,2626,2628],{"class":186,"line":1143},[184,2625,2324],{"class":230},[184,2627,2477],{"class":237},[184,2629,333],{"class":230},[184,2631,2632,2634,2636],{"class":186,"line":1160},[184,2633,428],{"class":230},[184,2635,330],{"class":237},[184,2637,333],{"class":230},[184,2639,2640],{"class":186,"line":1175},[184,2641,954],{"emptyLinePlaceholder":953},[184,2643,2644,2646,2648,2650],{"class":186,"line":1181},[184,2645,327],{"class":230},[184,2647,875],{"class":237},[184,2649,878],{"class":346},[184,2651,333],{"class":230},[184,2653,2654,2656,2658,2660,2662],{"class":186,"line":1186},[184,2655,885],{"class":346},[184,2657,888],{"class":226},[184,2659,350],{"class":230},[184,2661,893],{"class":222},[184,2663,896],{"class":230},[184,2665,2666,2668,2670,2672,2675,2677,2679,2682,2685,2687,2689],{"class":186,"line":1191},[184,2667,1640],{"class":237},[184,2669,241],{"class":230},[184,2671,976],{"class":230},[184,2673,2674],{"class":237}," url",[184,2676,241],{"class":230},[184,2678,1393],{"class":190},[184,2680,2681],{"class":230},";",[184,2683,2684],{"class":237}," title",[184,2686,241],{"class":230},[184,2688,1393],{"class":190},[184,2690,1054],{"class":230},[184,2692,2693,2695],{"class":186,"line":1198},[184,2694,945],{"class":230},[184,2696,948],{"class":226},[184,2698,2699],{"class":186,"line":1247},[184,2700,954],{"emptyLinePlaceholder":953},[184,2702,2703],{"class":186,"line":1266},[184,2704,2705],{"class":1194},"\u002F\u002F Desktop landscape\n",[184,2707,2708,2710,2712,2714,2716,2719,2721,2723,2725,2727,2729,2731,2733,2735,2737],{"class":186,"line":1271},[184,2709,885],{"class":346},[184,2711,976],{"class":230},[184,2713,1072],{"class":237},[184,2715,241],{"class":230},[184,2717,2718],{"class":226}," desktopSrcset ",[184,2720,281],{"class":230},[184,2722,1087],{"class":230},[184,2724,1090],{"class":222},[184,2726,1727],{"class":226},[184,2728,1101],{"class":230},[184,2730,1732],{"class":226},[184,2732,1101],{"class":230},[184,2734,1737],{"class":226},[184,2736,988],{"class":230},[184,2738,966],{"class":230},[184,2740,2741,2743,2745,2747],{"class":186,"line":1280},[184,2742,1746],{"class":237},[184,2744,241],{"class":230},[184,2746,1042],{"class":984},[184,2748,259],{"class":230},[184,2750,2751,2753,2755,2757],{"class":186,"line":1285},[184,2752,1757],{"class":237},[184,2754,241],{"class":230},[184,2756,1015],{"class":984},[184,2758,259],{"class":230},[184,2760,2761,2763,2765,2767,2769,2771],{"class":186,"line":1294},[184,2762,1768],{"class":237},[184,2764,241],{"class":230},[184,2766,916],{"class":230},[184,2768,1775],{"class":194},[184,2770,256],{"class":230},[184,2772,259],{"class":230},[184,2774,2775,2777,2779,2781,2784],{"class":186,"line":1302},[184,2776,1784],{"class":237},[184,2778,241],{"class":230},[184,2780,916],{"class":230},[184,2782,2783],{"class":194},"center",[184,2785,269],{"class":230},[184,2787,2788,2790],{"class":186,"line":1315},[184,2789,281],{"class":230},[184,2791,284],{"class":226},[184,2793,2794],{"class":186,"line":1329},[184,2795,954],{"emptyLinePlaceholder":953},[184,2797,2798],{"class":186,"line":1344},[184,2799,2800],{"class":1194},"\u002F\u002F Mobile portrait\n",[184,2802,2803,2805,2807,2809,2811,2814,2816,2818,2820,2822,2824,2826,2828,2830,2832],{"class":186,"line":1349},[184,2804,885],{"class":346},[184,2806,976],{"class":230},[184,2808,1072],{"class":237},[184,2810,241],{"class":230},[184,2812,2813],{"class":226}," mobileSrcset ",[184,2815,281],{"class":230},[184,2817,1087],{"class":230},[184,2819,1090],{"class":222},[184,2821,1727],{"class":226},[184,2823,1101],{"class":230},[184,2825,1732],{"class":226},[184,2827,1101],{"class":230},[184,2829,1737],{"class":226},[184,2831,988],{"class":230},[184,2833,966],{"class":230},[184,2835,2837,2839,2841,2843],{"class":186,"line":2836},36,[184,2838,1746],{"class":237},[184,2840,241],{"class":230},[184,2842,1024],{"class":984},[184,2844,259],{"class":230},[184,2846,2848,2850,2852,2854],{"class":186,"line":2847},37,[184,2849,1757],{"class":237},[184,2851,241],{"class":230},[184,2853,1015],{"class":984},[184,2855,259],{"class":230},[184,2857,2859,2861,2863,2865,2867,2869],{"class":186,"line":2858},38,[184,2860,1768],{"class":237},[184,2862,241],{"class":230},[184,2864,916],{"class":230},[184,2866,1775],{"class":194},[184,2868,256],{"class":230},[184,2870,259],{"class":230},[184,2872,2874,2876,2878,2880,2883],{"class":186,"line":2873},39,[184,2875,1784],{"class":237},[184,2877,241],{"class":230},[184,2879,916],{"class":230},[184,2881,2882],{"class":194},"top",[184,2884,269],{"class":230},[184,2886,2888,2890],{"class":186,"line":2887},40,[184,2889,281],{"class":230},[184,2891,284],{"class":226},[184,2893,2895],{"class":186,"line":2894},41,[184,2896,954],{"emptyLinePlaceholder":953},[184,2898,2900],{"class":186,"line":2899},42,[184,2901,2902],{"class":1194},"\u002F\u002F Fallback\n",[184,2904,2906,2908,2910,2912,2914,2917,2919,2921,2923,2925,2927,2929,2931,2933,2935],{"class":186,"line":2905},43,[184,2907,885],{"class":346},[184,2909,976],{"class":230},[184,2911,1072],{"class":237},[184,2913,241],{"class":230},[184,2915,2916],{"class":226}," fallbackSrc ",[184,2918,281],{"class":230},[184,2920,1087],{"class":230},[184,2922,1090],{"class":222},[184,2924,1727],{"class":226},[184,2926,1101],{"class":230},[184,2928,1732],{"class":226},[184,2930,1101],{"class":230},[184,2932,1737],{"class":226},[184,2934,988],{"class":230},[184,2936,966],{"class":230},[184,2938,2940,2942,2944,2946],{"class":186,"line":2939},44,[184,2941,1746],{"class":237},[184,2943,241],{"class":230},[184,2945,1051],{"class":984},[184,2947,259],{"class":230},[184,2949,2951,2953,2955],{"class":186,"line":2950},45,[184,2952,1757],{"class":237},[184,2954,241],{"class":230},[184,2956,2957],{"class":984}," 400\n",[184,2959,2961,2963],{"class":186,"line":2960},46,[184,2962,281],{"class":230},[184,2964,284],{"class":226},[184,2966,2968,2970,2972],{"class":186,"line":2967},47,[184,2969,428],{"class":230},[184,2971,875],{"class":237},[184,2973,333],{"class":230},[98,2975,56],{"id":2976},"performance-optimization",[164,2978,143],{"id":2979},"lazy-loading",[175,2981,2984],{"className":317,"code":2982,"filename":2983,"language":320,"meta":180,"style":180},"\u003Ctemplate>\n \u003CNuxtImg\n :src=\"image.url\"\n :alt=\"image.title\"\n loading=\"lazy\"\n width=\"600\"\n height=\"400\"\n :modifiers=\"{ quality: 80 }\"\n provider=\"contentstack\"\n \u002F>\n\u003C\u002Ftemplate>\n","components\u002FLazyImage.vue",[159,2985,2986,2994,3000,3012,3024,3038,3050,3062,3075,3087,3091],{"__ignoreMap":180},[184,2987,2988,2990,2992],{"class":186,"line":187},[184,2989,327],{"class":230},[184,2991,330],{"class":237},[184,2993,333],{"class":230},[184,2995,2996,2998],{"class":186,"line":234},[184,2997,338],{"class":230},[184,2999,460],{"class":237},[184,3001,3002,3004,3006,3008,3010],{"class":186,"line":247},[184,3003,347],{"class":346},[184,3005,350],{"class":230},[184,3007,353],{"class":230},[184,3009,471],{"class":194},[184,3011,359],{"class":230},[184,3013,3014,3016,3018,3020,3022],{"class":186,"line":262},[184,3015,478],{"class":346},[184,3017,350],{"class":230},[184,3019,353],{"class":230},[184,3021,485],{"class":194},[184,3023,359],{"class":230},[184,3025,3026,3029,3031,3033,3036],{"class":186,"line":272},[184,3027,3028],{"class":346}," loading",[184,3030,350],{"class":230},[184,3032,353],{"class":230},[184,3034,3035],{"class":194},"lazy",[184,3037,359],{"class":230},[184,3039,3040,3042,3044,3046,3048],{"class":186,"line":278},[184,3041,492],{"class":346},[184,3043,350],{"class":230},[184,3045,353],{"class":230},[184,3047,499],{"class":194},[184,3049,359],{"class":230},[184,3051,3052,3054,3056,3058,3060],{"class":186,"line":404},[184,3053,506],{"class":346},[184,3055,350],{"class":230},[184,3057,353],{"class":230},[184,3059,513],{"class":194},[184,3061,359],{"class":230},[184,3063,3064,3066,3068,3070,3073],{"class":186,"line":419},[184,3065,520],{"class":346},[184,3067,350],{"class":230},[184,3069,353],{"class":230},[184,3071,3072],{"class":194},"{ quality: 80 }",[184,3074,359],{"class":230},[184,3076,3077,3079,3081,3083,3085],{"class":186,"line":425},[184,3078,407],{"class":346},[184,3080,350],{"class":230},[184,3082,353],{"class":230},[184,3084,414],{"class":194},[184,3086,359],{"class":230},[184,3088,3089],{"class":186,"line":539},[184,3090,422],{"class":230},[184,3092,3093,3095,3097],{"class":186,"line":545},[184,3094,428],{"class":230},[184,3096,330],{"class":237},[184,3098,333],{"class":230},[164,3100,3102],{"id":3101},"preloading-critical-images","Preloading Critical Images",[175,3104,3107],{"className":317,"code":3105,"filename":3106,"language":320,"meta":180,"style":180},"\u003Cscript setup>\n\u002F\u002F Preload hero image\nconst { data: page } = await useGetEntryByUrl({\n contentTypeUid: 'landing_page',\n url: '\u002F'\n})\n\nif (page.value?.hero?.image) {\n const { transformedUrl } = useImageTransform(page.value.hero.image.url, {\n width: 1200,\n height: 600,\n quality: 85\n })\n \n \u002F\u002F Preload the hero image\n useHead({\n link: [\n {\n rel: 'preload',\n href: transformedUrl,\n as: 'image'\n }\n ]\n })\n}\n\u003C\u002Fscript>\n","pages\u002Findex.vue",[159,3108,3109,3119,3124,3152,3168,3182,3188,3192,3218,3257,3267,3277,3286,3292,3297,3302,3311,3320,3325,3341,3352,3365,3370,3375,3381,3385],{"__ignoreMap":180},[184,3110,3111,3113,3115,3117],{"class":186,"line":187},[184,3112,327],{"class":230},[184,3114,875],{"class":237},[184,3116,878],{"class":346},[184,3118,333],{"class":230},[184,3120,3121],{"class":186,"line":234},[184,3122,3123],{"class":1194},"\u002F\u002F Preload hero image\n",[184,3125,3126,3128,3130,3133,3135,3138,3140,3142,3145,3148,3150],{"class":186,"line":247},[184,3127,885],{"class":346},[184,3129,976],{"class":230},[184,3131,3132],{"class":237}," data",[184,3134,241],{"class":230},[184,3136,3137],{"class":226}," page ",[184,3139,281],{"class":230},[184,3141,1087],{"class":230},[184,3143,3144],{"class":215}," await",[184,3146,3147],{"class":222}," useGetEntryByUrl",[184,3149,227],{"class":226},[184,3151,231],{"class":230},[184,3153,3154,3157,3159,3161,3164,3166],{"class":186,"line":262},[184,3155,3156],{"class":237}," contentTypeUid",[184,3158,241],{"class":230},[184,3160,916],{"class":230},[184,3162,3163],{"class":194},"landing_page",[184,3165,256],{"class":230},[184,3167,259],{"class":230},[184,3169,3170,3173,3175,3177,3180],{"class":186,"line":272},[184,3171,3172],{"class":237}," url",[184,3174,241],{"class":230},[184,3176,916],{"class":230},[184,3178,3179],{"class":194},"\u002F",[184,3181,269],{"class":230},[184,3183,3184,3186],{"class":186,"line":278},[184,3185,281],{"class":230},[184,3187,284],{"class":226},[184,3189,3190],{"class":186,"line":404},[184,3191,954],{"emptyLinePlaceholder":953},[184,3193,3194,3197,3200,3202,3205,3208,3211,3213,3216],{"class":186,"line":419},[184,3195,3196],{"class":215},"if",[184,3198,3199],{"class":226}," (page",[184,3201,1101],{"class":230},[184,3203,3204],{"class":226},"value",[184,3206,3207],{"class":230},"?.",[184,3209,3210],{"class":226},"hero",[184,3212,3207],{"class":230},[184,3214,3215],{"class":226},"image) ",[184,3217,231],{"class":230},[184,3219,3220,3222,3224,3226,3228,3230,3232,3234,3237,3239,3241,3243,3245,3247,3249,3251,3253,3255],{"class":186,"line":425},[184,3221,1413],{"class":346},[184,3223,976],{"class":230},[184,3225,1072],{"class":226},[184,3227,1420],{"class":230},[184,3229,1087],{"class":230},[184,3231,1090],{"class":222},[184,3233,227],{"class":237},[184,3235,3236],{"class":226},"page",[184,3238,1101],{"class":230},[184,3240,3204],{"class":226},[184,3242,1101],{"class":230},[184,3244,3210],{"class":226},[184,3246,1101],{"class":230},[184,3248,1732],{"class":226},[184,3250,1101],{"class":230},[184,3252,1737],{"class":226},[184,3254,988],{"class":230},[184,3256,966],{"class":230},[184,3258,3259,3261,3263,3265],{"class":186,"line":539},[184,3260,492],{"class":237},[184,3262,241],{"class":230},[184,3264,1042],{"class":984},[184,3266,259],{"class":230},[184,3268,3269,3271,3273,3275],{"class":186,"line":545},[184,3270,506],{"class":237},[184,3272,241],{"class":230},[184,3274,1015],{"class":984},[184,3276,259],{"class":230},[184,3278,3279,3281,3283],{"class":186,"line":553},[184,3280,1133],{"class":237},[184,3282,241],{"class":230},[184,3284,3285],{"class":984}," 85\n",[184,3287,3288,3290],{"class":186,"line":566},[184,3289,1577],{"class":230},[184,3291,284],{"class":237},[184,3293,3294],{"class":186,"line":571},[184,3295,3296],{"class":237}," \n",[184,3298,3299],{"class":186,"line":816},[184,3300,3301],{"class":1194}," \u002F\u002F Preload the hero image\n",[184,3303,3304,3307,3309],{"class":186,"line":1114},[184,3305,3306],{"class":222}," useHead",[184,3308,227],{"class":237},[184,3310,231],{"class":230},[184,3312,3313,3316,3318],{"class":186,"line":1130},[184,3314,3315],{"class":237}," link",[184,3317,241],{"class":230},[184,3319,244],{"class":237},[184,3321,3322],{"class":186,"line":1143},[184,3323,3324],{"class":230}," {\n",[184,3326,3327,3330,3332,3334,3337,3339],{"class":186,"line":1160},[184,3328,3329],{"class":237}," rel",[184,3331,241],{"class":230},[184,3333,916],{"class":230},[184,3335,3336],{"class":194},"preload",[184,3338,256],{"class":230},[184,3340,259],{"class":230},[184,3342,3343,3346,3348,3350],{"class":186,"line":1175},[184,3344,3345],{"class":237}," href",[184,3347,241],{"class":230},[184,3349,1072],{"class":226},[184,3351,259],{"class":230},[184,3353,3354,3357,3359,3361,3363],{"class":186,"line":1181},[184,3355,3356],{"class":237}," as",[184,3358,241],{"class":230},[184,3360,916],{"class":230},[184,3362,1732],{"class":194},[184,3364,269],{"class":230},[184,3366,3367],{"class":186,"line":1186},[184,3368,3369],{"class":230}," }\n",[184,3371,3372],{"class":186,"line":1191},[184,3373,3374],{"class":237}," ]\n",[184,3376,3377,3379],{"class":186,"line":1198},[184,3378,1577],{"class":230},[184,3380,284],{"class":237},[184,3382,3383],{"class":186,"line":1247},[184,3384,1059],{"class":230},[184,3386,3387,3389,3391],{"class":186,"line":1266},[184,3388,428],{"class":230},[184,3390,875],{"class":237},[184,3392,333],{"class":230},[164,3394,3396],{"id":3395},"multiple-image-sizes","Multiple Image Sizes",[76,3398,3399],{},"Generate multiple sizes for galleries and lightboxes:",[175,3401,3404],{"className":317,"code":3402,"filename":3403,"language":320,"meta":180,"style":180},"\u003Cscript setup>\nconst props = defineProps\u003C{\n images: Array\u003C{ url: string; title: string }>\n}>()\n\nconst optimizedImages = computed(() => {\n return props.images.map(image => ({\n ...image,\n thumbnail: useImageTransform(image.url, { width: 300, height: 200, quality: 75 }).transformedUrl,\n medium: useImageTransform(image.url, { width: 800, height: 600, quality: 85 }).transformedUrl,\n large: useImageTransform(image.url, { width: 1600, height: 1200, quality: 90 }).transformedUrl\n }))\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv class=\"gallery\">\n \u003Cimg \n v-for=\"image in optimizedImages\" \n :key=\"image.url\"\n :src=\"image.thumbnail\"\n :alt=\"image.title\"\n loading=\"lazy\"\n \u002F>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","components\u002FOptimizedGallery.vue",[159,3405,3406,3416,3428,3458,3464,3468,3489,3515,3523,3578,3631,3685,3692,3698,3706,3710,3718,3737,3745,3761,3774,3788,3801,3814,3818,3826],{"__ignoreMap":180},[184,3407,3408,3410,3412,3414],{"class":186,"line":187},[184,3409,327],{"class":230},[184,3411,875],{"class":237},[184,3413,878],{"class":346},[184,3415,333],{"class":230},[184,3417,3418,3420,3422,3424,3426],{"class":186,"line":234},[184,3419,885],{"class":346},[184,3421,888],{"class":226},[184,3423,350],{"class":230},[184,3425,893],{"class":222},[184,3427,896],{"class":230},[184,3429,3430,3433,3435,3438,3441,3443,3445,3447,3449,3451,3453,3455],{"class":186,"line":247},[184,3431,3432],{"class":237}," images",[184,3434,241],{"class":230},[184,3436,3437],{"class":190}," Array",[184,3439,3440],{"class":230},"\u003C{",[184,3442,2674],{"class":237},[184,3444,241],{"class":230},[184,3446,1393],{"class":190},[184,3448,2681],{"class":230},[184,3450,2684],{"class":237},[184,3452,241],{"class":230},[184,3454,1393],{"class":190},[184,3456,3457],{"class":230}," }>\n",[184,3459,3460,3462],{"class":186,"line":262},[184,3461,945],{"class":230},[184,3463,948],{"class":226},[184,3465,3466],{"class":186,"line":272},[184,3467,954],{"emptyLinePlaceholder":953},[184,3469,3470,3472,3475,3477,3480,3482,3485,3487],{"class":186,"line":278},[184,3471,885],{"class":346},[184,3473,3474],{"class":226}," optimizedImages ",[184,3476,350],{"class":230},[184,3478,3479],{"class":222}," computed",[184,3481,227],{"class":226},[184,3483,3484],{"class":230},"()",[184,3486,1242],{"class":346},[184,3488,966],{"class":230},[184,3490,3491,3493,3495,3497,3500,3502,3505,3507,3509,3511,3513],{"class":186,"line":404},[184,3492,1588],{"class":215},[184,3494,1789],{"class":226},[184,3496,1101],{"class":230},[184,3498,3499],{"class":226},"images",[184,3501,1101],{"class":230},[184,3503,3504],{"class":222},"map",[184,3506,227],{"class":237},[184,3508,1732],{"class":1211},[184,3510,1242],{"class":346},[184,3512,1208],{"class":237},[184,3514,231],{"class":230},[184,3516,3517,3519,3521],{"class":186,"line":419},[184,3518,1117],{"class":230},[184,3520,1732],{"class":226},[184,3522,259],{"class":230},[184,3524,3525,3528,3530,3532,3534,3536,3538,3540,3542,3544,3546,3548,3550,3552,3554,3556,3558,3560,3563,3565,3568,3570,3572,3574,3576],{"class":186,"line":425},[184,3526,3527],{"class":237}," thumbnail",[184,3529,241],{"class":230},[184,3531,1090],{"class":222},[184,3533,227],{"class":237},[184,3535,1732],{"class":226},[184,3537,1101],{"class":230},[184,3539,1737],{"class":226},[184,3541,988],{"class":230},[184,3543,976],{"class":230},[184,3545,979],{"class":237},[184,3547,241],{"class":230},[184,3549,985],{"class":984},[184,3551,988],{"class":230},[184,3553,991],{"class":237},[184,3555,241],{"class":230},[184,3557,996],{"class":984},[184,3559,988],{"class":230},[184,3561,3562],{"class":237}," quality",[184,3564,241],{"class":230},[184,3566,3567],{"class":984}," 75",[184,3569,1420],{"class":230},[184,3571,1239],{"class":237},[184,3573,1101],{"class":230},[184,3575,843],{"class":226},[184,3577,259],{"class":230},[184,3579,3580,3583,3585,3587,3589,3591,3593,3595,3597,3599,3601,3603,3605,3607,3609,3611,3613,3615,3617,3619,3621,3623,3625,3627,3629],{"class":186,"line":539},[184,3581,3582],{"class":237}," medium",[184,3584,241],{"class":230},[184,3586,1090],{"class":222},[184,3588,227],{"class":237},[184,3590,1732],{"class":226},[184,3592,1101],{"class":230},[184,3594,1737],{"class":226},[184,3596,988],{"class":230},[184,3598,976],{"class":230},[184,3600,979],{"class":237},[184,3602,241],{"class":230},[184,3604,1051],{"class":984},[184,3606,988],{"class":230},[184,3608,991],{"class":237},[184,3610,241],{"class":230},[184,3612,1015],{"class":984},[184,3614,988],{"class":230},[184,3616,3562],{"class":237},[184,3618,241],{"class":230},[184,3620,1138],{"class":984},[184,3622,1420],{"class":230},[184,3624,1239],{"class":237},[184,3626,1101],{"class":230},[184,3628,843],{"class":226},[184,3630,259],{"class":230},[184,3632,3633,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654,3656,3659,3661,3663,3665,3667,3669,3671,3673,3676,3678,3680,3682],{"class":186,"line":545},[184,3634,3635],{"class":237}," large",[184,3637,241],{"class":230},[184,3639,1090],{"class":222},[184,3641,227],{"class":237},[184,3643,1732],{"class":226},[184,3645,1101],{"class":230},[184,3647,1737],{"class":226},[184,3649,988],{"class":230},[184,3651,976],{"class":230},[184,3653,979],{"class":237},[184,3655,241],{"class":230},[184,3657,3658],{"class":984}," 1600",[184,3660,988],{"class":230},[184,3662,991],{"class":237},[184,3664,241],{"class":230},[184,3666,1042],{"class":984},[184,3668,988],{"class":230},[184,3670,3562],{"class":237},[184,3672,241],{"class":230},[184,3674,3675],{"class":984}," 90",[184,3677,1420],{"class":230},[184,3679,1239],{"class":237},[184,3681,1101],{"class":230},[184,3683,3684],{"class":226},"transformedUrl\n",[184,3686,3687,3689],{"class":186,"line":553},[184,3688,1577],{"class":230},[184,3690,3691],{"class":237},"))\n",[184,3693,3694,3696],{"class":186,"line":566},[184,3695,281],{"class":230},[184,3697,284],{"class":226},[184,3699,3700,3702,3704],{"class":186,"line":571},[184,3701,428],{"class":230},[184,3703,875],{"class":237},[184,3705,333],{"class":230},[184,3707,3708],{"class":186,"line":816},[184,3709,954],{"emptyLinePlaceholder":953},[184,3711,3712,3714,3716],{"class":186,"line":1114},[184,3713,327],{"class":230},[184,3715,330],{"class":237},[184,3717,333],{"class":230},[184,3719,3720,3722,3724,3726,3728,3730,3733,3735],{"class":186,"line":1130},[184,3721,338],{"class":230},[184,3723,2209],{"class":237},[184,3725,2212],{"class":346},[184,3727,350],{"class":230},[184,3729,353],{"class":230},[184,3731,3732],{"class":194},"gallery",[184,3734,353],{"class":230},[184,3736,333],{"class":230},[184,3738,3739,3741,3743],{"class":186,"line":1143},[184,3740,2228],{"class":230},[184,3742,1893],{"class":237},[184,3744,1896],{"class":230},[184,3746,3747,3750,3752,3754,3757,3759],{"class":186,"line":1160},[184,3748,3749],{"class":346}," v-for",[184,3751,350],{"class":230},[184,3753,353],{"class":230},[184,3755,3756],{"class":194},"image in optimizedImages",[184,3758,353],{"class":230},[184,3760,1896],{"class":230},[184,3762,3763,3766,3768,3770,3772],{"class":186,"line":1175},[184,3764,3765],{"class":346}," :key",[184,3767,350],{"class":230},[184,3769,353],{"class":230},[184,3771,471],{"class":194},[184,3773,359],{"class":230},[184,3775,3776,3779,3781,3783,3786],{"class":186,"line":1181},[184,3777,3778],{"class":346}," :src",[184,3780,350],{"class":230},[184,3782,353],{"class":230},[184,3784,3785],{"class":194},"image.thumbnail",[184,3787,359],{"class":230},[184,3789,3790,3793,3795,3797,3799],{"class":186,"line":1186},[184,3791,3792],{"class":346}," :alt",[184,3794,350],{"class":230},[184,3796,353],{"class":230},[184,3798,485],{"class":194},[184,3800,359],{"class":230},[184,3802,3803,3806,3808,3810,3812],{"class":186,"line":1191},[184,3804,3805],{"class":346}," loading",[184,3807,350],{"class":230},[184,3809,353],{"class":230},[184,3811,3035],{"class":194},[184,3813,359],{"class":230},[184,3815,3816],{"class":186,"line":1198},[184,3817,2538],{"class":230},[184,3819,3820,3822,3824],{"class":186,"line":1247},[184,3821,2324],{"class":230},[184,3823,2209],{"class":237},[184,3825,333],{"class":230},[184,3827,3828,3830,3832],{"class":186,"line":1266},[184,3829,428],{"class":230},[184,3831,330],{"class":237},[184,3833,333],{"class":230},[98,3835,3837],{"id":3836},"error-handling","Error Handling",[76,3839,3840],{},"Handle image loading errors and states:",[175,3842,3845],{"className":317,"code":3843,"filename":3844,"language":320,"meta":180,"style":180},"\u003Cscript setup>\nconst props = defineProps\u003C{\n src: string\n alt: string\n fallback?: string\n}>()\n\nconst imageSrc = ref(props.src)\nconst hasError = ref(false)\n\nconst handleError = () => {\n if (!hasError.value && props.fallback) {\n hasError.value = true\n imageSrc.value = props.fallback\n }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv v-if=\"hasError && !fallback\" class=\"error-state\">\n Failed to load image\n \u003C\u002Fdiv>\n \u003Cimg v-else :src=\"imageSrc\" :alt=\"alt\" @error=\"handleError\" \u002F>\n\u003C\u002Ftemplate>\n","components\u002FSafeImage.vue",[159,3846,3847,3857,3869,3878,3886,3895,3901,3905,3923,3940,3944,3960,3992,4006,4024,4028,4032,4040,4044,4052,4083,4088,4096,4140],{"__ignoreMap":180},[184,3848,3849,3851,3853,3855],{"class":186,"line":187},[184,3850,327],{"class":230},[184,3852,875],{"class":237},[184,3854,878],{"class":346},[184,3856,333],{"class":230},[184,3858,3859,3861,3863,3865,3867],{"class":186,"line":234},[184,3860,885],{"class":346},[184,3862,888],{"class":226},[184,3864,350],{"class":230},[184,3866,893],{"class":222},[184,3868,896],{"class":230},[184,3870,3871,3874,3876],{"class":186,"line":247},[184,3872,3873],{"class":237}," src",[184,3875,241],{"class":230},[184,3877,906],{"class":190},[184,3879,3880,3882,3884],{"class":186,"line":262},[184,3881,1995],{"class":237},[184,3883,241],{"class":230},[184,3885,906],{"class":190},[184,3887,3888,3891,3893],{"class":186,"line":272},[184,3889,3890],{"class":237}," fallback",[184,3892,1670],{"class":230},[184,3894,906],{"class":190},[184,3896,3897,3899],{"class":186,"line":278},[184,3898,945],{"class":230},[184,3900,948],{"class":226},[184,3902,3903],{"class":186,"line":404},[184,3904,954],{"emptyLinePlaceholder":953},[184,3906,3907,3909,3912,3914,3916,3918,3920],{"class":186,"line":419},[184,3908,885],{"class":346},[184,3910,3911],{"class":226}," imageSrc ",[184,3913,350],{"class":230},[184,3915,2174],{"class":222},[184,3917,1727],{"class":226},[184,3919,1101],{"class":230},[184,3921,3922],{"class":226},"src)\n",[184,3924,3925,3927,3930,3932,3934,3936,3938],{"class":186,"line":425},[184,3926,885],{"class":346},[184,3928,3929],{"class":226}," hasError ",[184,3931,350],{"class":230},[184,3933,2174],{"class":222},[184,3935,227],{"class":226},[184,3937,2180],{"class":2179},[184,3939,284],{"class":226},[184,3941,3942],{"class":186,"line":539},[184,3943,954],{"emptyLinePlaceholder":953},[184,3945,3946,3948,3951,3953,3956,3958],{"class":186,"line":545},[184,3947,885],{"class":346},[184,3949,3950],{"class":226}," handleError ",[184,3952,350],{"class":230},[184,3954,3955],{"class":230}," ()",[184,3957,1242],{"class":346},[184,3959,966],{"class":230},[184,3961,3962,3965,3967,3970,3973,3975,3977,3980,3982,3984,3987,3990],{"class":186,"line":553},[184,3963,3964],{"class":215}," if",[184,3966,1208],{"class":237},[184,3968,3969],{"class":230},"!",[184,3971,3972],{"class":226},"hasError",[184,3974,1101],{"class":230},[184,3976,3204],{"class":226},[184,3978,3979],{"class":230}," &&",[184,3981,1789],{"class":226},[184,3983,1101],{"class":230},[184,3985,3986],{"class":226},"fallback",[184,3988,3989],{"class":237},") ",[184,3991,231],{"class":230},[184,3993,3994,3997,3999,4001,4003],{"class":186,"line":566},[184,3995,3996],{"class":226}," hasError",[184,3998,1101],{"class":230},[184,4000,3204],{"class":226},[184,4002,1087],{"class":230},[184,4004,4005],{"class":2179}," true\n",[184,4007,4008,4011,4013,4015,4017,4019,4021],{"class":186,"line":571},[184,4009,4010],{"class":226}," imageSrc",[184,4012,1101],{"class":230},[184,4014,3204],{"class":226},[184,4016,1087],{"class":230},[184,4018,1789],{"class":226},[184,4020,1101],{"class":230},[184,4022,4023],{"class":226},"fallback\n",[184,4025,4026],{"class":186,"line":816},[184,4027,1178],{"class":230},[184,4029,4030],{"class":186,"line":1114},[184,4031,1059],{"class":230},[184,4033,4034,4036,4038],{"class":186,"line":1130},[184,4035,428],{"class":230},[184,4037,875],{"class":237},[184,4039,333],{"class":230},[184,4041,4042],{"class":186,"line":1143},[184,4043,954],{"emptyLinePlaceholder":953},[184,4045,4046,4048,4050],{"class":186,"line":1160},[184,4047,327],{"class":230},[184,4049,330],{"class":237},[184,4051,333],{"class":230},[184,4053,4054,4056,4058,4061,4063,4065,4068,4070,4072,4074,4076,4079,4081],{"class":186,"line":1175},[184,4055,338],{"class":230},[184,4057,2209],{"class":237},[184,4059,4060],{"class":346}," v-if",[184,4062,350],{"class":230},[184,4064,353],{"class":230},[184,4066,4067],{"class":194},"hasError && !fallback",[184,4069,353],{"class":230},[184,4071,2212],{"class":346},[184,4073,350],{"class":230},[184,4075,353],{"class":230},[184,4077,4078],{"class":194},"error-state",[184,4080,353],{"class":230},[184,4082,333],{"class":230},[184,4084,4085],{"class":186,"line":1181},[184,4086,4087],{"class":226}," Failed to load image\n",[184,4089,4090,4092,4094],{"class":186,"line":1186},[184,4091,2324],{"class":230},[184,4093,2209],{"class":237},[184,4095,333],{"class":230},[184,4097,4098,4100,4102,4105,4107,4109,4111,4114,4116,4118,4120,4122,4124,4126,4129,4131,4133,4136,4138],{"class":186,"line":1191},[184,4099,338],{"class":230},[184,4101,1893],{"class":237},[184,4103,4104],{"class":346}," v-else",[184,4106,2245],{"class":346},[184,4108,350],{"class":230},[184,4110,353],{"class":230},[184,4112,4113],{"class":194},"imageSrc",[184,4115,353],{"class":230},[184,4117,2257],{"class":346},[184,4119,350],{"class":230},[184,4121,353],{"class":230},[184,4123,1324],{"class":194},[184,4125,353],{"class":230},[184,4127,4128],{"class":346}," @error",[184,4130,350],{"class":230},[184,4132,353],{"class":230},[184,4134,4135],{"class":194},"handleError",[184,4137,353],{"class":230},[184,4139,2278],{"class":230},[184,4141,4142,4144,4146],{"class":186,"line":1198},[184,4143,428],{"class":230},[184,4145,330],{"class":237},[184,4147,333],{"class":230},[98,4149,4151],{"id":4150},"available-transformations","Available Transformations",[80,4153,4154,4157,4158,4160,4161,4164,4165,4168],{"icon":287},[85,4155,4156],{},"Provider Defaults",": When using the Contentstack ",[159,4159,161],{}," provider, images automatically get ",[159,4162,4163],{},"auto: 'webp,compress'"," and ",[159,4166,4167],{},"quality: 80"," applied by default. You can override these by specifying your own values.",[164,4170,4172],{"id":4171},"dimension-control","Dimension Control",[4174,4175,4176,4192],"table",{},[4177,4178,4179],"thead",{},[4180,4181,4182,4186,4189],"tr",{},[4183,4184,4185],"th",{},"Parameter",[4183,4187,4188],{},"Description",[4183,4190,4191],{},"Example",[4193,4194,4195,4211,4226,4241],"tbody",{},[4180,4196,4197,4203,4206],{},[4198,4199,4200],"td",{},[159,4201,4202],{},"width",[4198,4204,4205],{},"Set image width",[4198,4207,4208],{},[159,4209,4210],{},"width: 800",[4180,4212,4213,4218,4221],{},[4198,4214,4215],{},[159,4216,4217],{},"height",[4198,4219,4220],{},"Set image height",[4198,4222,4223],{},[159,4224,4225],{},"height: 600",[4180,4227,4228,4233,4236],{},[4198,4229,4230],{},[159,4231,4232],{},"dpr",[4198,4234,4235],{},"Device pixel ratio",[4198,4237,4238],{},[159,4239,4240],{},"dpr: 2",[4180,4242,4243,4248,4251],{},[4198,4244,4245],{},[159,4246,4247],{},"disable",[4198,4249,4250],{},"Disable upscaling",[4198,4252,4253],{},[159,4254,4255],{},"disable: 'upscale'",[164,4257,4259],{"id":4258},"quality-and-format","Quality and Format",[4174,4261,4262,4272],{},[4177,4263,4264],{},[4180,4265,4266,4268,4270],{},[4183,4267,4185],{},[4183,4269,4188],{},[4183,4271,4191],{},[4193,4273,4274,4289,4322],{},[4180,4275,4276,4281,4284],{},[4198,4277,4278],{},[159,4279,4280],{},"quality",[4198,4282,4283],{},"Image quality (1-100)",[4198,4285,4286],{},[159,4287,4288],{},"quality: 85",[4180,4290,4291,4296,4317],{},[4198,4292,4293],{},[159,4294,4295],{},"format",[4198,4297,4298,4299,4301,4302,4301,4305,4301,4308,4301,4311,4301,4314,1239],{},"Output format (",[159,4300,1153],{},", ",[159,4303,4304],{},"png",[159,4306,4307],{},"jpg",[159,4309,4310],{},"jpeg",[159,4312,4313],{},"gif",[159,4315,4316],{},"auto",[4198,4318,4319],{},[159,4320,4321],{},"format: 'webp'",[4180,4323,4324,4328,4336],{},[4198,4325,4326],{},[159,4327,4316],{},[4198,4329,4330,4331,4333,4334,1239],{},"Auto optimization (",[159,4332,1153],{}," or ",[159,4335,1170],{},[4198,4337,4338],{},[159,4339,4163],{},[164,4341,581],{"id":4342},"cropping-and-fitting-1",[4174,4344,4345,4355],{},[4177,4346,4347],{},[4180,4348,4349,4351,4353],{},[4183,4350,4185],{},[4183,4352,4188],{},[4183,4354,4191],{},[4193,4356,4357,4377,4391,4409,4434,4452],{},[4180,4358,4359,4364,4372],{},[4198,4360,4361],{},[159,4362,4363],{},"fit",[4198,4365,4366,4367,4333,4370,1239],{},"Resize behavior (",[159,4368,4369],{},"bounds",[159,4371,1775],{},[4198,4373,4374],{},[159,4375,4376],{},"fit: 'crop'",[4180,4378,4379,4383,4386],{},[4198,4380,4381],{},[159,4382,1775],{},[4198,4384,4385],{},"Crop position",[4198,4387,4388],{},[159,4389,4390],{},"crop: 'center'",[4180,4392,4393,4398,4401],{},[4198,4394,4395],{},[159,4396,4397],{},"trim",[4198,4399,4400],{},"Remove edges (single value or array)",[4198,4402,4403,4333,4406],{},[159,4404,4405],{},"trim: 5",[159,4407,4408],{},"trim: [5, 10, 5, 10]",[4180,4410,4411,4416,4429],{},[4198,4412,4413],{},[159,4414,4415],{},"orient",[4198,4417,4418,4419,4301,4422,4425,4426,1239],{},"Image orientation (",[159,4420,4421],{},"default",[159,4423,4424],{},"1","-",[159,4427,4428],{},"8",[4198,4430,4431],{},[159,4432,4433],{},"orient: '6'",[4180,4435,4436,4441,4444],{},[4198,4437,4438],{},[159,4439,4440],{},"pad",[4198,4442,4443],{},"Padding around image (single value or array)",[4198,4445,4446,4333,4449],{},[159,4447,4448],{},"pad: 10",[159,4450,4451],{},"pad: [5, 10, 5, 10]",[4180,4453,4454,4459,4462],{},[4198,4455,4456],{},[159,4457,4458],{},"bg",[4198,4460,4461],{},"Background color (hex)",[4198,4463,4464],{},[159,4465,4466],{},"bg: 'FF0000'",[164,4468,4470],{"id":4469},"effects","Effects",[4174,4472,4473,4483],{},[4177,4474,4475],{},[4180,4476,4477,4479,4481],{},[4183,4478,4185],{},[4183,4480,4188],{},[4183,4482,4191],{},[4193,4484,4485,4500,4515,4530,4545,4560,4575],{},[4180,4486,4487,4492,4495],{},[4198,4488,4489],{},[159,4490,4491],{},"blur",[4198,4493,4494],{},"Blur amount",[4198,4496,4497],{},[159,4498,4499],{},"blur: 5",[4180,4501,4502,4507,4510],{},[4198,4503,4504],{},[159,4505,4506],{},"brightness",[4198,4508,4509],{},"Brightness adjustment",[4198,4511,4512],{},[159,4513,4514],{},"brightness: 10",[4180,4516,4517,4522,4525],{},[4198,4518,4519],{},[159,4520,4521],{},"contrast",[4198,4523,4524],{},"Contrast adjustment",[4198,4526,4527],{},[159,4528,4529],{},"contrast: 20",[4180,4531,4532,4537,4540],{},[4198,4533,4534],{},[159,4535,4536],{},"saturation",[4198,4538,4539],{},"Saturation adjustment",[4198,4541,4542],{},[159,4543,4544],{},"saturation: 15",[4180,4546,4547,4552,4555],{},[4198,4548,4549],{},[159,4550,4551],{},"sharpen",[4198,4553,4554],{},"Sharpen with amount, radius, threshold",[4198,4556,4557],{},[159,4558,4559],{},"sharpen: { amount: 5, radius: 1, threshold: 0 }",[4180,4561,4562,4567,4570],{},[4198,4563,4564],{},[159,4565,4566],{},"frame",[4198,4568,4569],{},"Extract specific frame (for animated images)",[4198,4571,4572],{},[159,4573,4574],{},"frame: 1",[4180,4576,4577,4582,4600],{},[4198,4578,4579],{},[159,4580,4581],{},"resizeFilter",[4198,4583,4584,4585,4301,4588,4301,4591,4301,4594,4301,4597,1239],{},"Resize algorithm (",[159,4586,4587],{},"nearest",[159,4589,4590],{},"bilinear",[159,4592,4593],{},"bicubic",[159,4595,4596],{},"lanczos2",[159,4598,4599],{},"lanczos3",[4198,4601,4602],{},[159,4603,4604],{},"resizeFilter: 'lanczos3'",[164,4606,4608],{"id":4607},"overlay","Overlay",[4174,4610,4611,4621],{},[4177,4612,4613],{},[4180,4614,4615,4617,4619],{},[4183,4616,4185],{},[4183,4618,4188],{},[4183,4620,4191],{},[4193,4622,4623,4638,4668,4689,4704,4719],{},[4180,4624,4625,4630,4633],{},[4198,4626,4627],{},[159,4628,4629],{},"overlay.relativeURL",[4198,4631,4632],{},"URL of overlay image (required)",[4198,4634,4635],{},[159,4636,4637],{},"overlay: { relativeURL: '\u002Fwatermark.png' }",[4180,4639,4640,4645,4663],{},[4198,4641,4642],{},[159,4643,4644],{},"overlay.align",[4198,4646,4647,4648,4301,4650,4301,4652,4301,4655,4301,4658,4301,4661,1239],{},"Overlay alignment (",[159,4649,2882],{},[159,4651,1494],{},[159,4653,4654],{},"left",[159,4656,4657],{},"right",[159,4659,4660],{},"middle",[159,4662,2783],{},[4198,4664,4665],{},[159,4666,4667],{},"overlay: { relativeURL: '...', align: 'bottom' }",[4180,4669,4670,4675,4684],{},[4198,4671,4672],{},[159,4673,4674],{},"overlay.repeat",[4198,4676,4677,4678,4301,4680,4301,4682,1239],{},"Repeat overlay (",[159,4679,1823],{},[159,4681,1845],{},[159,4683,1513],{},[4198,4685,4686],{},[159,4687,4688],{},"overlay: { relativeURL: '...', repeat: 'both' }",[4180,4690,4691,4696,4699],{},[4198,4692,4693],{},[159,4694,4695],{},"overlay.width",[4198,4697,4698],{},"Overlay width (pixels or percentage string)",[4198,4700,4701],{},[159,4702,4703],{},"overlay: { relativeURL: '...', width: '20p' }",[4180,4705,4706,4711,4714],{},[4198,4707,4708],{},[159,4709,4710],{},"overlay.height",[4198,4712,4713],{},"Overlay height (pixels or percentage string)",[4198,4715,4716],{},[159,4717,4718],{},"overlay: { relativeURL: '...', height: 50 }",[4180,4720,4721,4726,4729],{},[4198,4722,4723],{},[159,4724,4725],{},"overlay.pad",[4198,4727,4728],{},"Padding from edge",[4198,4730,4731],{},[159,4732,4733],{},"overlay: { relativeURL: '...', pad: 10 }",[98,4735,4737],{"id":4736},"next-steps","Next Steps",[2209,4739,4746],{"className":4740},[4741,4742,4743,4744,4745],"grid","grid-cols-1","md:grid-cols-2","gap-4","mt-6",[4747,4748,4749],"card",{"icon":39,"title":36,"to":37},"Learn how to fetch and use images with Contentstack composables.",[4751,4752,4753],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":180,"searchDepth":234,"depth":234,"links":4755},[4756,4757,4762,4767,4770,4775,4778,4783,4784,4791],{"id":100,"depth":234,"text":101},{"id":147,"depth":234,"text":148,"children":4758},[4759,4760,4761],{"id":166,"depth":247,"text":167},{"id":201,"depth":247,"text":202},{"id":313,"depth":247,"text":314},{"id":435,"depth":234,"text":137,"children":4763},[4764,4765,4766],{"id":438,"depth":247,"text":439},{"id":580,"depth":247,"text":581},{"id":697,"depth":247,"text":698},{"id":825,"depth":234,"text":826,"children":4768},[4769],{"id":832,"depth":247,"text":833},{"id":1358,"depth":234,"text":1359,"children":4771},[4772,4773,4774],{"id":1362,"depth":247,"text":1363},{"id":1606,"depth":247,"text":1607},{"id":1950,"depth":247,"text":1951},{"id":2339,"depth":234,"text":125,"children":4776},[4777],{"id":2455,"depth":247,"text":2456},{"id":2976,"depth":234,"text":56,"children":4779},[4780,4781,4782],{"id":2979,"depth":247,"text":143},{"id":3101,"depth":247,"text":3102},{"id":3395,"depth":247,"text":3396},{"id":3836,"depth":234,"text":3837},{"id":4150,"depth":234,"text":4151,"children":4785},[4786,4787,4788,4789,4790],{"id":4171,"depth":247,"text":4172},{"id":4258,"depth":247,"text":4259},{"id":4342,"depth":247,"text":581},{"id":4469,"depth":247,"text":4470},{"id":4607,"depth":247,"text":4608},{"id":4736,"depth":234,"text":4737},"Optimize images with Contentstack's Image Delivery API and @nuxt\u002Fimage integration for responsive, fast-loading images with advanced transformations.","md",null,{},{"icon":49},{"title":46,"description":4792},"PKwaVuJR7LfGwFkBteZmDHWQtZsZHQU_37iIiKthb6M",[4800,4802],{"title":41,"path":42,"stem":43,"description":4801,"icon":44,"children":-1},"Learn about the Vue components provided by Nuxt Contentstack, including the powerful ContentstackModularBlocks component for dynamic content rendering.",{"title":51,"path":52,"stem":53,"description":4803,"icon":54,"children":-1},"Deliver personalized content experiences with Contentstack Personalize integration, including user attributes, events, and variant-based content delivery.",1775639654835]