[{"data":1,"prerenderedAt":2784},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:pzoNuURKq06wPOkavh7FD0BNFnTQ9S_bjR-l52OV33E":188,"content-page-surround:docs:pzoNuURKq06wPOkavh7FD0BNFnTQ9S_bjR-l52OV33E":2768,"i-logos:nuxt-icon":2771,"i-logos:typescript-icon":2776,"i-logos:vue":2778,"i-lucide:clipboard":2781},[4,49,110,172],{"title":5,"page":6,"canonicalKey":7,"locale":8,"id":9,"draft":6,"icon":10,"sidebar":11,"children":12},"Start",false,"1","en","content:docs:1.start:.navigation.yml","i-lucide-rocket","section",[13,19,24,29,34,39,44],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Introduction","content:docs:1.start:1.introduction.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fintroduction",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Get started","content:docs:1.start:2.get-started.md","1\u002F2","\u002Fdocs\u002Fstart\u002Fget-started",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Examples","content:docs:1.start:3.examples.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fexamples",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"path":33},"AI coding agents","content:docs:1.start:4.ai-agents.md","1\u002F4","\u002Fdocs\u002Fstart\u002Fai-agents",{"title":35,"id":36,"canonicalKey":37,"locale":8,"draft":6,"path":38},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":40,"id":41,"canonicalKey":42,"locale":8,"draft":6,"path":43},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":45,"id":46,"canonicalKey":47,"locale":8,"draft":6,"path":48},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":50,"page":6,"canonicalKey":51,"locale":8,"id":52,"draft":6,"icon":53,"children":54},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[55,60,65,70,75,80,85,90,95,100,105],{"title":56,"id":57,"canonicalKey":58,"locale":8,"draft":6,"path":59},"Use your own photos","content:docs:2.guides:1.use-your-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-your-photos",{"title":61,"id":62,"canonicalKey":63,"locale":8,"draft":6,"path":64},"Responsive layouts and SSR","content:docs:2.guides:2.responsive-layouts.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fresponsive-layouts",{"title":66,"id":67,"canonicalKey":68,"locale":8,"draft":6,"path":69},"Share one lightbox","content:docs:2.guides:3.share-one-lightbox.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":71,"id":72,"canonicalKey":73,"locale":8,"draft":6,"path":74},"Build a carousel","content:docs:2.guides:4.build-a-carousel.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":76,"id":77,"canonicalKey":78,"locale":8,"draft":6,"path":79},"Deliver images","content:docs:2.guides:5.deliver-images.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fdeliver-images",{"title":81,"id":82,"canonicalKey":83,"locale":8,"draft":6,"path":84},"Integrate a custom image service","content:docs:2.guides:6.integrate-a-custom-image-service.md","2\u002F6","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":86,"id":87,"canonicalKey":88,"locale":8,"draft":6,"path":89},"Style and theme","content:docs:2.guides:7.style-and-theme.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fstyle-and-theme",{"title":91,"id":92,"canonicalKey":93,"locale":8,"draft":6,"path":94},"Customize the lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":96,"id":97,"canonicalKey":98,"locale":8,"draft":6,"path":99},"Create a custom thumbnail layout","content:docs:2.guides:9.create-a-custom-thumbnail-layout.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":101,"id":102,"canonicalKey":103,"locale":8,"draft":6,"path":104},"Build a lightbox from primitives","content:docs:2.guides:10.build-a-lightbox-from-primitives.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":106,"id":107,"canonicalKey":108,"locale":8,"draft":6,"path":109},"Control the lightbox from code","content:docs:2.guides:11.control-the-lightbox.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-the-lightbox",{"title":111,"id":112,"canonicalKey":113,"locale":8,"draft":6,"icon":114,"sidebar":11,"path":115,"children":116},"Reference","content:docs:3.reference:.navigation.yml","3","i-lucide-braces","\u002Fdocs\u002Freference",[117,122,127,132,137,142,147,152,157,162,167],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo","content:docs:3.reference:2.photo.md","3\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"PhotoAlbum","content:docs:3.reference:3.photo-album.md","3\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"PhotoGroup","content:docs:3.reference:4.photo-group.md","3\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"PhotoCarousel","content:docs:3.reference:5.photo-carousel.md","3\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Lightbox","content:docs:3.reference:6.lightbox.md","3\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Primitives","content:docs:3.reference:7.primitives.md","3\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Composables","content:docs:3.reference:8.composables.md","3\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"path":156},"Configuration and labels","content:docs:3.reference:9.configuration-and-labels.md","3\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":158,"id":159,"canonicalKey":160,"locale":8,"draft":6,"path":161},"Types","content:docs:3.reference:10.types.md","3\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":163,"id":164,"canonicalKey":165,"locale":8,"draft":6,"path":166},"CSS","content:docs:3.reference:11.css.md","3\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":168,"id":169,"canonicalKey":170,"locale":8,"draft":6,"path":171},"Package exports","content:docs:3.reference:12.package-exports.md","3\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":173,"page":6,"canonicalKey":174,"locale":8,"id":175,"draft":6,"icon":176,"children":177},"Help","4","content:docs:4.help:.navigation.yml","i-lucide-life-buoy",[178,183],{"title":179,"id":180,"canonicalKey":181,"locale":8,"draft":6,"path":182},"Troubleshooting","content:docs:4.help:1.troubleshooting.md","4\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":184,"id":185,"canonicalKey":186,"locale":8,"draft":6,"path":187},"Known constraints","content:docs:4.help:2.known-constraints.md","4\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":76,"description":189,"redirectFrom":190,"body":193,"type":2755,"id":77,"canonicalKey":78,"draft":6,"partial":6,"locale":8,"collection":2756,"navigationFile":6,"file":2757,"route":2763,"resolution":2765},"How Nuxt Photo sizes every thumbnail, slide and photo - srcset from your Nuxt Image screens, sizes from the layout, priority and preload for the first screen, build-time blur placeholders, browser cache headers, and the Nuxt Image config for Vercel, static sites, IPX and Cloudinary.",[191,192],"\u002Fdocs\u002Fguides\u002Fuse-nuxt-image","\u002Fdocs\u002Fconcepts\u002Fimage-delivery",{"type":194,"children":195,"toc":2741},"root",[196,219,226,231,316,327,417,427,433,439,612,623,778,788,794,813,1149,1168,1194,1331,1348,1354,1359,1432,1437,1647,1665,1671,1710,1727,1733,1747,1974,1993,2254,2272,2278,2283,2360,2365,2371,2376,2539,2587,2605,2676,2681,2687,2692],{"type":197,"tag":198,"props":199,"children":200},"element","p",{},[201,204,210,212,217],{"type":202,"value":203},"text","Nuxt Photo asks your image service for the widths a photo can be shown at, and\ntells the browser how wide each photo is on screen. The browser then downloads\none file close to the size it needs. With ",{"type":197,"tag":205,"props":206,"children":207},"code",{},[208],{"type":202,"value":209},"@nuxt\u002Fimage",{"type":202,"value":211}," installed this works\nwithout Nuxt Photo options: quality, format, widths and the provider all come\nfrom your ",{"type":197,"tag":205,"props":213,"children":214},{},[215],{"type":202,"value":216},"image",{"type":202,"value":218}," config.",{"type":197,"tag":220,"props":221,"children":223},"h2",{"id":222},"how-a-size-is-chosen",[224],{"type":202,"value":225},"How a size is chosen",{"type":197,"tag":198,"props":227,"children":228},{},[229],{"type":202,"value":230},"Every image gets two attributes:",{"type":197,"tag":232,"props":233,"children":234},"table",{},[235,259],{"type":197,"tag":236,"props":237,"children":238},"thead",{},[239],{"type":197,"tag":240,"props":241,"children":242},"tr",{},[243,249,254],{"type":197,"tag":244,"props":245,"children":246},"th",{},[247],{"type":202,"value":248},"Attribute",{"type":197,"tag":244,"props":250,"children":251},{},[252],{"type":202,"value":253},"Who writes it",{"type":197,"tag":244,"props":255,"children":256},{},[257],{"type":202,"value":258},"What it says",{"type":197,"tag":260,"props":261,"children":262},"tbody",{},[263,290],{"type":197,"tag":240,"props":264,"children":265},{},[266,275,280],{"type":197,"tag":267,"props":268,"children":269},"td",{},[270],{"type":197,"tag":205,"props":271,"children":272},{},[273],{"type":202,"value":274},"srcset",{"type":197,"tag":267,"props":276,"children":277},{},[278],{"type":202,"value":279},"Nuxt Photo, from the widths your image service allows",{"type":197,"tag":267,"props":281,"children":282},{},[283,285],{"type":202,"value":284},"The files that exist: ",{"type":197,"tag":205,"props":286,"children":287},{},[288],{"type":202,"value":289},"…?w=256 256w, …?w=640 640w, …",{"type":197,"tag":240,"props":291,"children":292},{},[293,301,306],{"type":197,"tag":267,"props":294,"children":295},{},[296],{"type":197,"tag":205,"props":297,"children":298},{},[299],{"type":202,"value":300},"sizes",{"type":197,"tag":267,"props":302,"children":303},{},[304],{"type":202,"value":305},"The component that knows the layout",{"type":197,"tag":267,"props":307,"children":308},{},[309,311],{"type":202,"value":310},"How wide this image is on screen: ",{"type":197,"tag":205,"props":312,"children":313},{},[314],{"type":202,"value":315},"auto, 212px",{"type":197,"tag":198,"props":317,"children":318},{},[319,321,325],{"type":202,"value":320},"The browser multiplies the ",{"type":197,"tag":205,"props":322,"children":323},{},[324],{"type":202,"value":300},{"type":202,"value":326}," width by the screen's pixel density and\npicks the smallest file that is large enough. Two rules keep this correct:",{"type":197,"tag":328,"props":329,"children":330},"ul",{},[331,350],{"type":197,"tag":332,"props":333,"children":334},"li",{},[335,341,343,348],{"type":197,"tag":336,"props":337,"children":338},"strong",{},[339],{"type":202,"value":340},"No file is wider than the source.",{"type":202,"value":342}," A 1000 px photo never gets a ",{"type":197,"tag":205,"props":344,"children":345},{},[346],{"type":202,"value":347},"1280w",{"type":202,"value":349},"\nentry. The source width is the last entry when it falls between two widths.",{"type":197,"tag":332,"props":351,"children":352},{},[353,364,366,370,372,376,378,383,385,390,391,396,398,402,404,408,410,415],{"type":197,"tag":336,"props":354,"children":355},{},[356,358,362],{"type":202,"value":357},"The layout owns ",{"type":197,"tag":205,"props":359,"children":360},{},[361],{"type":202,"value":300},{"type":202,"value":363},".",{"type":202,"value":365}," ",{"type":197,"tag":205,"props":367,"children":368},{},[369],{"type":202,"value":123},{"type":202,"value":371}," writes the exact width of each\nthumbnail from its layout, already in the server-rendered HTML.\n",{"type":197,"tag":205,"props":373,"children":374},{},[375],{"type":202,"value":133},{"type":202,"value":377}," uses ",{"type":197,"tag":205,"props":379,"children":380},{},[381],{"type":202,"value":382},"slideSize",{"type":202,"value":384}," and the measured track. The lightbox uses\nthe size of its frame. ",{"type":197,"tag":205,"props":386,"children":387},{},[388],{"type":202,"value":389},"\u003CPhoto>",{"type":202,"value":377},{"type":197,"tag":205,"props":392,"children":393},{},[394],{"type":202,"value":395},"auto",{"type":202,"value":397}," with a fallback. A ",{"type":197,"tag":205,"props":399,"children":400},{},[401],{"type":202,"value":300},{"type":202,"value":403}," prop\non ",{"type":197,"tag":205,"props":405,"children":406},{},[407],{"type":202,"value":123},{"type":202,"value":409}," or ",{"type":197,"tag":205,"props":411,"children":412},{},[413],{"type":202,"value":414},"PhotoImage",{"type":202,"value":416}," replaces the computed value.",{"type":197,"tag":198,"props":418,"children":419},{},[420,425],{"type":197,"tag":205,"props":421,"children":422},{},[423],{"type":202,"value":424},"sizes=\"auto, …\"",{"type":202,"value":426}," lets browsers that support it use the measured width of a\nlazy image. Other browsers use the pixel value after it.",{"type":197,"tag":220,"props":428,"children":430},{"id":429},"use-nuxt-image",[431],{"type":202,"value":432},"Use Nuxt Image",{"type":197,"tag":434,"props":435,"children":438},"pm-install",{"name":209,"$":436},{"component":437,"block":437},1,[],{"type":197,"tag":440,"props":441,"children":445},"pre",{"language":442,"filename":443,"class":444},"ts","nuxt.config.ts","shiki shiki-themes material-theme-lighter material-theme-palenight dark:material-theme-palenight",[446],{"type":197,"tag":205,"props":447,"children":449},{"class":448},"language-ts",[450,485,487,548,549,566,567,589,590,598,599],{"type":197,"tag":451,"props":452,"children":455},"span",{"class":453,"style":454},"line","display: inline",[456,462,467,473,479],{"type":197,"tag":451,"props":457,"children":459},{"style":458},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[460],{"type":202,"value":461},"export",{"type":197,"tag":451,"props":463,"children":464},{"style":458},[465],{"type":202,"value":466}," default",{"type":197,"tag":451,"props":468,"children":470},{"style":469},"color:#6182B8;--shiki-dark:#82AAFF",[471],{"type":202,"value":472}," defineNuxtConfig",{"type":197,"tag":451,"props":474,"children":476},{"style":475},"color:#90A4AE;--shiki-dark:#BABED8",[477],{"type":202,"value":478},"(",{"type":197,"tag":451,"props":480,"children":482},{"style":481},"color:#39ADB5;--shiki-dark:#89DDFF",[483],{"type":202,"value":484},"{",{"type":202,"value":486},"\n",{"type":197,"tag":451,"props":488,"children":489},{"class":453,"style":454},[490,496,501,506,511,516,520,525,530,535,539,544],{"type":197,"tag":451,"props":491,"children":493},{"style":492},"color:#E53935;--shiki-dark:#F07178",[494],{"type":202,"value":495},"  modules",{"type":197,"tag":451,"props":497,"children":498},{"style":481},[499],{"type":202,"value":500},":",{"type":197,"tag":451,"props":502,"children":503},{"style":475},[504],{"type":202,"value":505}," [",{"type":197,"tag":451,"props":507,"children":508},{"style":481},[509],{"type":202,"value":510},"'",{"type":197,"tag":451,"props":512,"children":514},{"style":513},"color:#91B859;--shiki-dark:#C3E88D",[515],{"type":202,"value":209},{"type":197,"tag":451,"props":517,"children":518},{"style":481},[519],{"type":202,"value":510},{"type":197,"tag":451,"props":521,"children":522},{"style":481},[523],{"type":202,"value":524},",",{"type":197,"tag":451,"props":526,"children":527},{"style":481},[528],{"type":202,"value":529}," '",{"type":197,"tag":451,"props":531,"children":532},{"style":513},[533],{"type":202,"value":534},"@lupinum\u002Fnuxt-photo",{"type":197,"tag":451,"props":536,"children":537},{"style":481},[538],{"type":202,"value":510},{"type":197,"tag":451,"props":540,"children":541},{"style":475},[542],{"type":202,"value":543},"]",{"type":197,"tag":451,"props":545,"children":546},{"style":481},[547],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":550,"children":551},{"class":453,"style":454},[552,557,561],{"type":197,"tag":451,"props":553,"children":554},{"style":492},[555],{"type":202,"value":556},"  image",{"type":197,"tag":451,"props":558,"children":559},{"style":481},[560],{"type":202,"value":500},{"type":197,"tag":451,"props":562,"children":563},{"style":481},[564],{"type":202,"value":565}," {",{"type":202,"value":486},{"type":197,"tag":451,"props":568,"children":569},{"class":453,"style":454},[570,575,579,585],{"type":197,"tag":451,"props":571,"children":572},{"style":492},[573],{"type":202,"value":574},"    quality",{"type":197,"tag":451,"props":576,"children":577},{"style":481},[578],{"type":202,"value":500},{"type":197,"tag":451,"props":580,"children":582},{"style":581},"color:#F76D47;--shiki-dark:#F78C6C",[583],{"type":202,"value":584}," 80",{"type":197,"tag":451,"props":586,"children":587},{"style":481},[588],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":591,"children":592},{"class":453,"style":454},[593],{"type":197,"tag":451,"props":594,"children":595},{"style":481},[596],{"type":202,"value":597},"  },",{"type":202,"value":486},{"type":197,"tag":451,"props":600,"children":601},{"class":453,"style":454},[602,607],{"type":197,"tag":451,"props":603,"children":604},{"style":481},[605],{"type":202,"value":606},"}",{"type":197,"tag":451,"props":608,"children":609},{"style":475},[610],{"type":202,"value":611},")",{"type":197,"tag":198,"props":613,"children":614},{},[615,617,621],{"type":202,"value":616},"Nuxt Photo detects ",{"type":197,"tag":205,"props":618,"children":619},{},[620],{"type":202,"value":209},{"type":202,"value":622}," and uses its default provider. Module order\ndoes not matter. These Nuxt Image options apply to every Nuxt Photo image:",{"type":197,"tag":232,"props":624,"children":625},{},[626,642],{"type":197,"tag":236,"props":627,"children":628},{},[629],{"type":197,"tag":240,"props":630,"children":631},{},[632,637],{"type":197,"tag":244,"props":633,"children":634},{},[635],{"type":202,"value":636},"Nuxt Image option",{"type":197,"tag":244,"props":638,"children":639},{},[640],{"type":202,"value":641},"Effect in Nuxt Photo",{"type":197,"tag":260,"props":643,"children":644},{},[645,674,703,719,755],{"type":197,"tag":240,"props":646,"children":647},{},[648,656],{"type":197,"tag":267,"props":649,"children":650},{},[651],{"type":197,"tag":205,"props":652,"children":653},{},[654],{"type":202,"value":655},"provider",{"type":197,"tag":267,"props":657,"children":658},{},[659,661,666,668,673],{"type":202,"value":660},"Builds every URL. Choose another one for Nuxt Photo only with ",{"type":197,"tag":205,"props":662,"children":663},{},[664],{"type":202,"value":665},"nuxtPhoto.provider: 'cloudinary'",{"type":202,"value":667},", or per component with ",{"type":197,"tag":205,"props":669,"children":670},{},[671],{"type":202,"value":672},"provider=\"cloudinary\"",{"type":202,"value":363},{"type":197,"tag":240,"props":675,"children":676},{},[677,692],{"type":197,"tag":267,"props":678,"children":679},{},[680,685,687],{"type":197,"tag":205,"props":681,"children":682},{},[683],{"type":202,"value":684},"screens",{"type":202,"value":686}," × ",{"type":197,"tag":205,"props":688,"children":689},{},[690],{"type":202,"value":691},"densities",{"type":197,"tag":267,"props":693,"children":694},{},[695,697,701],{"type":202,"value":696},"The widths in ",{"type":197,"tag":205,"props":698,"children":699},{},[700],{"type":202,"value":274},{"type":202,"value":702},". With the defaults this is 640 to 3072 px. For IPX and other providers that accept any width, Nuxt Photo adds 128, 256, 384 and 512 px below that, for thumbnails.",{"type":197,"tag":240,"props":704,"children":705},{},[706,714],{"type":197,"tag":267,"props":707,"children":708},{},[709],{"type":197,"tag":205,"props":710,"children":711},{},[712],{"type":202,"value":713},"quality",{"type":197,"tag":267,"props":715,"children":716},{},[717],{"type":202,"value":718},"Sent with every image.",{"type":197,"tag":240,"props":720,"children":721},{},[722,730],{"type":197,"tag":267,"props":723,"children":724},{},[725],{"type":197,"tag":205,"props":726,"children":727},{},[728],{"type":202,"value":729},"format",{"type":197,"tag":267,"props":731,"children":732},{},[733,735,739,741,746,748,753],{"type":202,"value":734},"The first format is sent to IPX. Without a ",{"type":197,"tag":205,"props":736,"children":737},{},[738],{"type":202,"value":729},{"type":202,"value":740},", IPX gets ",{"type":197,"tag":205,"props":742,"children":743},{},[744],{"type":202,"value":745},"webp",{"type":202,"value":747},". Vercel, Netlify and Cloudinary choose AVIF or WebP from the browser's ",{"type":197,"tag":205,"props":749,"children":750},{},[751],{"type":202,"value":752},"Accept",{"type":202,"value":754}," header instead.",{"type":197,"tag":240,"props":756,"children":757},{},[758,766],{"type":197,"tag":267,"props":759,"children":760},{},[761],{"type":197,"tag":205,"props":762,"children":763},{},[764],{"type":202,"value":765},"domains",{"type":197,"tag":267,"props":767,"children":768},{},[769,771,776],{"type":202,"value":770},"Hosts of remote images, without ",{"type":197,"tag":205,"props":772,"children":773},{},[774],{"type":202,"value":775},"https:\u002F\u002F",{"type":202,"value":777},". A remote image whose host is missing fails to load.",{"type":197,"tag":198,"props":779,"children":780},{},[781,783,787],{"type":202,"value":782},"Animated GIFs never get a format, so they keep their animation. SVG files\nare passed through unchanged, with no ",{"type":197,"tag":205,"props":784,"children":785},{},[786],{"type":202,"value":274},{"type":202,"value":363},{"type":197,"tag":220,"props":789,"children":791},{"id":790},"deploy-on-vercel",[792],{"type":202,"value":793},"Deploy on Vercel",{"type":197,"tag":198,"props":795,"children":796},{},[797,799,804,806,811],{"type":202,"value":798},"On Vercel, Nuxt Image uses the ",{"type":197,"tag":205,"props":800,"children":801},{},[802],{"type":202,"value":803},"vercel",{"type":202,"value":805}," provider by itself. Vercel only\nserves widths from a list that Nuxt Image builds from ",{"type":197,"tag":205,"props":807,"children":808},{},[809],{"type":202,"value":810},"image.screens",{"type":202,"value":812}," alone,\nnot from screens × densities. Nuxt Photo uses exactly that list, so no width\nis rejected. The default screens run from 640 to 1536 px, so add small widths\nfor thumbnails and large widths for 2× screens:",{"type":197,"tag":440,"props":814,"children":815},{"language":442,"filename":443,"class":444},[816],{"type":197,"tag":205,"props":817,"children":818},{"class":448},[819,842,843,894,895,910,911,930,931,947,948,978,979,1008,1009,1030,1031,1060,1061,1090,1091,1120,1121,1129,1130,1137,1138],{"type":197,"tag":451,"props":820,"children":821},{"class":453,"style":454},[822,826,830,834,838],{"type":197,"tag":451,"props":823,"children":824},{"style":458},[825],{"type":202,"value":461},{"type":197,"tag":451,"props":827,"children":828},{"style":458},[829],{"type":202,"value":466},{"type":197,"tag":451,"props":831,"children":832},{"style":469},[833],{"type":202,"value":472},{"type":197,"tag":451,"props":835,"children":836},{"style":475},[837],{"type":202,"value":478},{"type":197,"tag":451,"props":839,"children":840},{"style":481},[841],{"type":202,"value":484},{"type":202,"value":486},{"type":197,"tag":451,"props":844,"children":845},{"class":453,"style":454},[846,850,854,858,862,866,870,874,878,882,886,890],{"type":197,"tag":451,"props":847,"children":848},{"style":492},[849],{"type":202,"value":495},{"type":197,"tag":451,"props":851,"children":852},{"style":481},[853],{"type":202,"value":500},{"type":197,"tag":451,"props":855,"children":856},{"style":475},[857],{"type":202,"value":505},{"type":197,"tag":451,"props":859,"children":860},{"style":481},[861],{"type":202,"value":510},{"type":197,"tag":451,"props":863,"children":864},{"style":513},[865],{"type":202,"value":209},{"type":197,"tag":451,"props":867,"children":868},{"style":481},[869],{"type":202,"value":510},{"type":197,"tag":451,"props":871,"children":872},{"style":481},[873],{"type":202,"value":524},{"type":197,"tag":451,"props":875,"children":876},{"style":481},[877],{"type":202,"value":529},{"type":197,"tag":451,"props":879,"children":880},{"style":513},[881],{"type":202,"value":534},{"type":197,"tag":451,"props":883,"children":884},{"style":481},[885],{"type":202,"value":510},{"type":197,"tag":451,"props":887,"children":888},{"style":475},[889],{"type":202,"value":543},{"type":197,"tag":451,"props":891,"children":892},{"style":481},[893],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":896,"children":897},{"class":453,"style":454},[898,902,906],{"type":197,"tag":451,"props":899,"children":900},{"style":492},[901],{"type":202,"value":556},{"type":197,"tag":451,"props":903,"children":904},{"style":481},[905],{"type":202,"value":500},{"type":197,"tag":451,"props":907,"children":908},{"style":481},[909],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":912,"children":913},{"class":453,"style":454},[914,918,922,926],{"type":197,"tag":451,"props":915,"children":916},{"style":492},[917],{"type":202,"value":574},{"type":197,"tag":451,"props":919,"children":920},{"style":481},[921],{"type":202,"value":500},{"type":197,"tag":451,"props":923,"children":924},{"style":581},[925],{"type":202,"value":584},{"type":197,"tag":451,"props":927,"children":928},{"style":481},[929],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":932,"children":933},{"class":453,"style":454},[934,939,943],{"type":197,"tag":451,"props":935,"children":936},{"style":492},[937],{"type":202,"value":938},"    screens",{"type":197,"tag":451,"props":940,"children":941},{"style":481},[942],{"type":202,"value":500},{"type":197,"tag":451,"props":944,"children":945},{"style":481},[946],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":949,"children":950},{"class":453,"style":454},[951,956,961,965,969,974],{"type":197,"tag":451,"props":952,"children":953},{"style":481},[954],{"type":202,"value":955},"      '",{"type":197,"tag":451,"props":957,"children":958},{"style":492},[959],{"type":202,"value":960},"3xs",{"type":197,"tag":451,"props":962,"children":963},{"style":481},[964],{"type":202,"value":510},{"type":197,"tag":451,"props":966,"children":967},{"style":481},[968],{"type":202,"value":500},{"type":197,"tag":451,"props":970,"children":971},{"style":581},[972],{"type":202,"value":973}," 128",{"type":197,"tag":451,"props":975,"children":976},{"style":481},[977],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":980,"children":981},{"class":453,"style":454},[982,986,991,995,999,1004],{"type":197,"tag":451,"props":983,"children":984},{"style":481},[985],{"type":202,"value":955},{"type":197,"tag":451,"props":987,"children":988},{"style":492},[989],{"type":202,"value":990},"2xs",{"type":197,"tag":451,"props":992,"children":993},{"style":481},[994],{"type":202,"value":510},{"type":197,"tag":451,"props":996,"children":997},{"style":481},[998],{"type":202,"value":500},{"type":197,"tag":451,"props":1000,"children":1001},{"style":581},[1002],{"type":202,"value":1003}," 256",{"type":197,"tag":451,"props":1005,"children":1006},{"style":481},[1007],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1010,"children":1011},{"class":453,"style":454},[1012,1017,1021,1026],{"type":197,"tag":451,"props":1013,"children":1014},{"style":492},[1015],{"type":202,"value":1016},"      xs",{"type":197,"tag":451,"props":1018,"children":1019},{"style":481},[1020],{"type":202,"value":500},{"type":197,"tag":451,"props":1022,"children":1023},{"style":581},[1024],{"type":202,"value":1025}," 384",{"type":197,"tag":451,"props":1027,"children":1028},{"style":481},[1029],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1032,"children":1033},{"class":453,"style":454},[1034,1038,1043,1047,1051,1056],{"type":197,"tag":451,"props":1035,"children":1036},{"style":481},[1037],{"type":202,"value":955},{"type":197,"tag":451,"props":1039,"children":1040},{"style":492},[1041],{"type":202,"value":1042},"3xl",{"type":197,"tag":451,"props":1044,"children":1045},{"style":481},[1046],{"type":202,"value":510},{"type":197,"tag":451,"props":1048,"children":1049},{"style":481},[1050],{"type":202,"value":500},{"type":197,"tag":451,"props":1052,"children":1053},{"style":581},[1054],{"type":202,"value":1055}," 1920",{"type":197,"tag":451,"props":1057,"children":1058},{"style":481},[1059],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1062,"children":1063},{"class":453,"style":454},[1064,1068,1073,1077,1081,1086],{"type":197,"tag":451,"props":1065,"children":1066},{"style":481},[1067],{"type":202,"value":955},{"type":197,"tag":451,"props":1069,"children":1070},{"style":492},[1071],{"type":202,"value":1072},"4xl",{"type":197,"tag":451,"props":1074,"children":1075},{"style":481},[1076],{"type":202,"value":510},{"type":197,"tag":451,"props":1078,"children":1079},{"style":481},[1080],{"type":202,"value":500},{"type":197,"tag":451,"props":1082,"children":1083},{"style":581},[1084],{"type":202,"value":1085}," 2560",{"type":197,"tag":451,"props":1087,"children":1088},{"style":481},[1089],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1092,"children":1093},{"class":453,"style":454},[1094,1098,1103,1107,1111,1116],{"type":197,"tag":451,"props":1095,"children":1096},{"style":481},[1097],{"type":202,"value":955},{"type":197,"tag":451,"props":1099,"children":1100},{"style":492},[1101],{"type":202,"value":1102},"5xl",{"type":197,"tag":451,"props":1104,"children":1105},{"style":481},[1106],{"type":202,"value":510},{"type":197,"tag":451,"props":1108,"children":1109},{"style":481},[1110],{"type":202,"value":500},{"type":197,"tag":451,"props":1112,"children":1113},{"style":581},[1114],{"type":202,"value":1115}," 3072",{"type":197,"tag":451,"props":1117,"children":1118},{"style":481},[1119],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1122,"children":1123},{"class":453,"style":454},[1124],{"type":197,"tag":451,"props":1125,"children":1126},{"style":481},[1127],{"type":202,"value":1128},"    },",{"type":202,"value":486},{"type":197,"tag":451,"props":1131,"children":1132},{"class":453,"style":454},[1133],{"type":197,"tag":451,"props":1134,"children":1135},{"style":481},[1136],{"type":202,"value":597},{"type":202,"value":486},{"type":197,"tag":451,"props":1139,"children":1140},{"class":453,"style":454},[1141,1145],{"type":197,"tag":451,"props":1142,"children":1143},{"style":481},[1144],{"type":202,"value":606},{"type":197,"tag":451,"props":1146,"children":1147},{"style":475},[1148],{"type":202,"value":611},{"type":197,"tag":198,"props":1150,"children":1151},{},[1152,1154,1159,1161,1166],{"type":202,"value":1153},"The default screens (",{"type":197,"tag":205,"props":1155,"children":1156},{},[1157],{"type":202,"value":1158},"sm",{"type":202,"value":1160}," to ",{"type":197,"tag":205,"props":1162,"children":1163},{},[1164],{"type":202,"value":1165},"2xl",{"type":202,"value":1167},") stay, because Nuxt Image merges this\nobject with its defaults. Without the small screens, a 64 px thumbnail\ndownloads a 640 px file. Without the large ones, a lightbox on a 2× laptop\ngets at most 1536 px.",{"type":197,"tag":198,"props":1169,"children":1170},{},[1171,1173,1178,1180,1185,1187,1192],{"type":202,"value":1172},"Vercel keeps each transformed image on its CDN. For files in ",{"type":197,"tag":205,"props":1174,"children":1175},{},[1176],{"type":202,"value":1177},"public\u002F",{"type":202,"value":1179}," this\nlasts up to 31 days, and a redeploy does not reset it. For remote images it\nlasts for the longer of the source's ",{"type":197,"tag":205,"props":1181,"children":1182},{},[1183],{"type":202,"value":1184},"Cache-Control: max-age",{"type":202,"value":1186}," and\n",{"type":197,"tag":205,"props":1188,"children":1189},{},[1190],{"type":202,"value":1191},"minimumCacheTTL",{"type":202,"value":1193},", which Nuxt Image sets to 300 seconds. When your CMS gives\nan edited image a new URL, raise it so visitors do not wait for a new\ntransform every five minutes:",{"type":197,"tag":440,"props":1195,"children":1196},{"language":442,"filename":443,"class":444},[1197],{"type":197,"tag":205,"props":1198,"children":1199},{"class":448},[1200,1223,1224,1240,1241,1311,1312,1319,1320],{"type":197,"tag":451,"props":1201,"children":1202},{"class":453,"style":454},[1203,1207,1211,1215,1219],{"type":197,"tag":451,"props":1204,"children":1205},{"style":458},[1206],{"type":202,"value":461},{"type":197,"tag":451,"props":1208,"children":1209},{"style":458},[1210],{"type":202,"value":466},{"type":197,"tag":451,"props":1212,"children":1213},{"style":469},[1214],{"type":202,"value":472},{"type":197,"tag":451,"props":1216,"children":1217},{"style":475},[1218],{"type":202,"value":478},{"type":197,"tag":451,"props":1220,"children":1221},{"style":481},[1222],{"type":202,"value":484},{"type":202,"value":486},{"type":197,"tag":451,"props":1225,"children":1226},{"class":453,"style":454},[1227,1232,1236],{"type":197,"tag":451,"props":1228,"children":1229},{"style":492},[1230],{"type":202,"value":1231},"  nitro",{"type":197,"tag":451,"props":1233,"children":1234},{"style":481},[1235],{"type":202,"value":500},{"type":197,"tag":451,"props":1237,"children":1238},{"style":481},[1239],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":1242,"children":1243},{"class":453,"style":454},[1244,1249,1253,1257,1262,1266,1270,1275,1279,1283,1288,1292,1297,1302,1306],{"type":197,"tag":451,"props":1245,"children":1246},{"style":492},[1247],{"type":202,"value":1248},"    vercel",{"type":197,"tag":451,"props":1250,"children":1251},{"style":481},[1252],{"type":202,"value":500},{"type":197,"tag":451,"props":1254,"children":1255},{"style":481},[1256],{"type":202,"value":565},{"type":197,"tag":451,"props":1258,"children":1259},{"style":492},[1260],{"type":202,"value":1261}," config",{"type":197,"tag":451,"props":1263,"children":1264},{"style":481},[1265],{"type":202,"value":500},{"type":197,"tag":451,"props":1267,"children":1268},{"style":481},[1269],{"type":202,"value":565},{"type":197,"tag":451,"props":1271,"children":1272},{"style":492},[1273],{"type":202,"value":1274}," images",{"type":197,"tag":451,"props":1276,"children":1277},{"style":481},[1278],{"type":202,"value":500},{"type":197,"tag":451,"props":1280,"children":1281},{"style":481},[1282],{"type":202,"value":565},{"type":197,"tag":451,"props":1284,"children":1285},{"style":492},[1286],{"type":202,"value":1287}," minimumCacheTTL",{"type":197,"tag":451,"props":1289,"children":1290},{"style":481},[1291],{"type":202,"value":500},{"type":197,"tag":451,"props":1293,"children":1294},{"style":581},[1295],{"type":202,"value":1296}," 2678400",{"type":197,"tag":451,"props":1298,"children":1299},{"style":481},[1300],{"type":202,"value":1301}," }",{"type":197,"tag":451,"props":1303,"children":1304},{"style":481},[1305],{"type":202,"value":1301},{"type":197,"tag":451,"props":1307,"children":1308},{"style":481},[1309],{"type":202,"value":1310}," },",{"type":202,"value":486},{"type":197,"tag":451,"props":1313,"children":1314},{"class":453,"style":454},[1315],{"type":197,"tag":451,"props":1316,"children":1317},{"style":481},[1318],{"type":202,"value":597},{"type":202,"value":486},{"type":197,"tag":451,"props":1321,"children":1322},{"class":453,"style":454},[1323,1327],{"type":197,"tag":451,"props":1324,"children":1325},{"style":481},[1326],{"type":202,"value":606},{"type":197,"tag":451,"props":1328,"children":1329},{"style":475},[1330],{"type":202,"value":611},{"type":197,"tag":198,"props":1332,"children":1333},{},[1334,1336,1340,1342,1346],{"type":202,"value":1335},"Use the ",{"type":197,"tag":205,"props":1337,"children":1338},{},[1339],{"type":202,"value":803},{"type":202,"value":1341}," provider for server-rendered sites on Vercel. IPX inside a\nVercel function cannot read ",{"type":197,"tag":205,"props":1343,"children":1344},{},[1345],{"type":202,"value":1177},{"type":202,"value":1347},", so local images return 404.",{"type":197,"tag":220,"props":1349,"children":1351},{"id":1350},"let-browsers-keep-images",[1352],{"type":202,"value":1353},"Let browsers keep images",{"type":197,"tag":198,"props":1355,"children":1356},{},[1357],{"type":202,"value":1358},"Without a cache header, browsers ask the server again for every image on every\nvisit. That costs a round trip per image while scrolling, even when the CDN\nanswers from its cache. Two defaults cause it:",{"type":197,"tag":232,"props":1360,"children":1361},{},[1362,1383],{"type":197,"tag":236,"props":1363,"children":1364},{},[1365],{"type":197,"tag":240,"props":1366,"children":1367},{},[1368,1373,1378],{"type":197,"tag":244,"props":1369,"children":1370},{},[1371],{"type":202,"value":1372},"Where",{"type":197,"tag":244,"props":1374,"children":1375},{},[1376],{"type":202,"value":1377},"Default",{"type":197,"tag":244,"props":1379,"children":1380},{},[1381],{"type":202,"value":1382},"Effect",{"type":197,"tag":260,"props":1384,"children":1385},{},[1386,1411],{"type":197,"tag":240,"props":1387,"children":1388},{},[1389,1398,1406],{"type":197,"tag":267,"props":1390,"children":1391},{},[1392,1394],{"type":202,"value":1393},"Vercel, files in ",{"type":197,"tag":205,"props":1395,"children":1396},{},[1397],{"type":202,"value":1177},{"type":197,"tag":267,"props":1399,"children":1400},{},[1401],{"type":197,"tag":205,"props":1402,"children":1403},{},[1404],{"type":202,"value":1405},"max-age=0, must-revalidate",{"type":197,"tag":267,"props":1407,"children":1408},{},[1409],{"type":202,"value":1410},"The optimized image inherits it.",{"type":197,"tag":240,"props":1412,"children":1413},{},[1414,1419,1427],{"type":197,"tag":267,"props":1415,"children":1416},{},[1417],{"type":202,"value":1418},"IPX",{"type":197,"tag":267,"props":1420,"children":1421},{},[1422],{"type":197,"tag":205,"props":1423,"children":1424},{},[1425],{"type":202,"value":1426},"image.ipx.maxAge: 60",{"type":197,"tag":267,"props":1428,"children":1429},{},[1430],{"type":202,"value":1431},"Browsers and CDNs keep a transformed image for one minute.",{"type":197,"tag":198,"props":1433,"children":1434},{},[1435],{"type":202,"value":1436},"Give image folders a long cache time:",{"type":197,"tag":440,"props":1438,"children":1439},{"language":442,"filename":443,"class":444},[1440],{"type":197,"tag":205,"props":1441,"children":1442},{"class":448},[1443,1466,1467,1483,1484,1509,1510,1560,1561,1568,1569,1576,1577,1592,1593,1627,1628,1635,1636],{"type":197,"tag":451,"props":1444,"children":1445},{"class":453,"style":454},[1446,1450,1454,1458,1462],{"type":197,"tag":451,"props":1447,"children":1448},{"style":458},[1449],{"type":202,"value":461},{"type":197,"tag":451,"props":1451,"children":1452},{"style":458},[1453],{"type":202,"value":466},{"type":197,"tag":451,"props":1455,"children":1456},{"style":469},[1457],{"type":202,"value":472},{"type":197,"tag":451,"props":1459,"children":1460},{"style":475},[1461],{"type":202,"value":478},{"type":197,"tag":451,"props":1463,"children":1464},{"style":481},[1465],{"type":202,"value":484},{"type":202,"value":486},{"type":197,"tag":451,"props":1468,"children":1469},{"class":453,"style":454},[1470,1475,1479],{"type":197,"tag":451,"props":1471,"children":1472},{"style":492},[1473],{"type":202,"value":1474},"  routeRules",{"type":197,"tag":451,"props":1476,"children":1477},{"style":481},[1478],{"type":202,"value":500},{"type":197,"tag":451,"props":1480,"children":1481},{"style":481},[1482],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":1485,"children":1486},{"class":453,"style":454},[1487,1492,1497,1501,1505],{"type":197,"tag":451,"props":1488,"children":1489},{"style":481},[1490],{"type":202,"value":1491},"    '",{"type":197,"tag":451,"props":1493,"children":1494},{"style":492},[1495],{"type":202,"value":1496},"\u002Fphotos\u002F**",{"type":197,"tag":451,"props":1498,"children":1499},{"style":481},[1500],{"type":202,"value":510},{"type":197,"tag":451,"props":1502,"children":1503},{"style":481},[1504],{"type":202,"value":500},{"type":197,"tag":451,"props":1506,"children":1507},{"style":481},[1508],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":1511,"children":1512},{"class":453,"style":454},[1513,1518,1522,1526,1530,1535,1539,1543,1547,1552,1556],{"type":197,"tag":451,"props":1514,"children":1515},{"style":492},[1516],{"type":202,"value":1517},"      headers",{"type":197,"tag":451,"props":1519,"children":1520},{"style":481},[1521],{"type":202,"value":500},{"type":197,"tag":451,"props":1523,"children":1524},{"style":481},[1525],{"type":202,"value":565},{"type":197,"tag":451,"props":1527,"children":1528},{"style":481},[1529],{"type":202,"value":529},{"type":197,"tag":451,"props":1531,"children":1532},{"style":492},[1533],{"type":202,"value":1534},"cache-control",{"type":197,"tag":451,"props":1536,"children":1537},{"style":481},[1538],{"type":202,"value":510},{"type":197,"tag":451,"props":1540,"children":1541},{"style":481},[1542],{"type":202,"value":500},{"type":197,"tag":451,"props":1544,"children":1545},{"style":481},[1546],{"type":202,"value":529},{"type":197,"tag":451,"props":1548,"children":1549},{"style":513},[1550],{"type":202,"value":1551},"public, max-age=2592000, stale-while-revalidate=604800",{"type":197,"tag":451,"props":1553,"children":1554},{"style":481},[1555],{"type":202,"value":510},{"type":197,"tag":451,"props":1557,"children":1558},{"style":481},[1559],{"type":202,"value":1310},{"type":202,"value":486},{"type":197,"tag":451,"props":1562,"children":1563},{"class":453,"style":454},[1564],{"type":197,"tag":451,"props":1565,"children":1566},{"style":481},[1567],{"type":202,"value":1128},{"type":202,"value":486},{"type":197,"tag":451,"props":1570,"children":1571},{"class":453,"style":454},[1572],{"type":197,"tag":451,"props":1573,"children":1574},{"style":481},[1575],{"type":202,"value":597},{"type":202,"value":486},{"type":197,"tag":451,"props":1578,"children":1579},{"class":453,"style":454},[1580,1584,1588],{"type":197,"tag":451,"props":1581,"children":1582},{"style":492},[1583],{"type":202,"value":556},{"type":197,"tag":451,"props":1585,"children":1586},{"style":481},[1587],{"type":202,"value":500},{"type":197,"tag":451,"props":1589,"children":1590},{"style":481},[1591],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":1594,"children":1595},{"class":453,"style":454},[1596,1601,1605,1609,1614,1618,1623],{"type":197,"tag":451,"props":1597,"children":1598},{"style":492},[1599],{"type":202,"value":1600},"    ipx",{"type":197,"tag":451,"props":1602,"children":1603},{"style":481},[1604],{"type":202,"value":500},{"type":197,"tag":451,"props":1606,"children":1607},{"style":481},[1608],{"type":202,"value":565},{"type":197,"tag":451,"props":1610,"children":1611},{"style":492},[1612],{"type":202,"value":1613}," maxAge",{"type":197,"tag":451,"props":1615,"children":1616},{"style":481},[1617],{"type":202,"value":500},{"type":197,"tag":451,"props":1619,"children":1620},{"style":581},[1621],{"type":202,"value":1622}," 2592000",{"type":197,"tag":451,"props":1624,"children":1625},{"style":481},[1626],{"type":202,"value":1310},{"type":202,"value":486},{"type":197,"tag":451,"props":1629,"children":1630},{"class":453,"style":454},[1631],{"type":197,"tag":451,"props":1632,"children":1633},{"style":481},[1634],{"type":202,"value":597},{"type":202,"value":486},{"type":197,"tag":451,"props":1637,"children":1638},{"class":453,"style":454},[1639,1643],{"type":197,"tag":451,"props":1640,"children":1641},{"style":481},[1642],{"type":202,"value":606},{"type":197,"tag":451,"props":1644,"children":1645},{"style":475},[1646],{"type":202,"value":611},{"type":197,"tag":198,"props":1648,"children":1649},{},[1650,1652,1657,1659,1663],{"type":202,"value":1651},"Vercel passes the source file's ",{"type":197,"tag":205,"props":1653,"children":1654},{},[1655],{"type":202,"value":1656},"max-age",{"type":202,"value":1658}," on to the optimized image. Use 30\ndays: Vercel keeps an optimized image up to 31 days, and a shorter ",{"type":197,"tag":205,"props":1660,"children":1661},{},[1662],{"type":202,"value":1656},{"type":202,"value":1664},"\nmakes browsers ask again once the cached copy is older than that. When you\nreplace an image, give it a new file name, so browsers do not keep the old\none.",{"type":197,"tag":220,"props":1666,"children":1668},{"id":1667},"generate-a-static-site",[1669],{"type":202,"value":1670},"Generate a static site",{"type":197,"tag":198,"props":1672,"children":1673},{},[1674,1676,1681,1683,1688,1690,1694,1696,1701,1703,1708],{"type":202,"value":1675},"With ",{"type":197,"tag":205,"props":1677,"children":1678},{},[1679],{"type":202,"value":1680},"nuxi generate",{"type":202,"value":1682},", Nuxt Image uses ",{"type":197,"tag":205,"props":1684,"children":1685},{},[1686],{"type":202,"value":1687},"ipxStatic",{"type":202,"value":1689},": every width in every\n",{"type":197,"tag":205,"props":1691,"children":1692},{},[1693],{"type":202,"value":274},{"type":202,"value":1695}," is written to ",{"type":197,"tag":205,"props":1697,"children":1698},{},[1699],{"type":202,"value":1700},".output\u002Fpublic",{"type":202,"value":1702}," at build time, and no image is\ntransformed when a visitor scrolls. The build takes longer with many photos.\nThumbnails and slides that the server renders are included. A gallery that\nrenders only in the browser (inside ",{"type":197,"tag":205,"props":1704,"children":1705},{},[1706],{"type":202,"value":1707},"\u003CClientOnly>",{"type":202,"value":1709},") is not; prerender its\nroute or use a provider that transforms at request time.",{"type":197,"tag":198,"props":1711,"children":1712},{},[1713,1715,1719,1721,1725],{"type":202,"value":1714},"When IPX transforms at request time on your own server, keep ",{"type":197,"tag":205,"props":1716,"children":1717},{},[1718],{"type":202,"value":729},{"type":202,"value":1720}," at\n",{"type":197,"tag":205,"props":1722,"children":1723},{},[1724],{"type":202,"value":745},{"type":202,"value":1726},". AVIF takes much longer to encode, and the first visitor waits for it.",{"type":197,"tag":220,"props":1728,"children":1730},{"id":1729},"use-cloudinary-or-another-provider",[1731],{"type":202,"value":1732},"Use Cloudinary or another provider",{"type":197,"tag":198,"props":1734,"children":1735},{},[1736,1738,1745],{"type":202,"value":1737},"Any ",{"type":197,"tag":1739,"props":1740,"children":1742},"a",{"href":1741},"https:\u002F\u002Fimage.nuxt.com\u002Fproviders\u002Fintroduction",[1743],{"type":202,"value":1744},"Nuxt Image provider",{"type":202,"value":1746},"\nworks. Set it as the default provider, or only for Nuxt Photo:",{"type":197,"tag":440,"props":1748,"children":1749},{"language":442,"filename":443,"class":444},[1750],{"type":197,"tag":205,"props":1751,"children":1752},{"class":448},[1753,1776,1777,1828,1829,1844,1845,1861,1862,1891,1892,1899,1900,1907,1908,1924,1925,1954,1955,1962,1963],{"type":197,"tag":451,"props":1754,"children":1755},{"class":453,"style":454},[1756,1760,1764,1768,1772],{"type":197,"tag":451,"props":1757,"children":1758},{"style":458},[1759],{"type":202,"value":461},{"type":197,"tag":451,"props":1761,"children":1762},{"style":458},[1763],{"type":202,"value":466},{"type":197,"tag":451,"props":1765,"children":1766},{"style":469},[1767],{"type":202,"value":472},{"type":197,"tag":451,"props":1769,"children":1770},{"style":475},[1771],{"type":202,"value":478},{"type":197,"tag":451,"props":1773,"children":1774},{"style":481},[1775],{"type":202,"value":484},{"type":202,"value":486},{"type":197,"tag":451,"props":1778,"children":1779},{"class":453,"style":454},[1780,1784,1788,1792,1796,1800,1804,1808,1812,1816,1820,1824],{"type":197,"tag":451,"props":1781,"children":1782},{"style":492},[1783],{"type":202,"value":495},{"type":197,"tag":451,"props":1785,"children":1786},{"style":481},[1787],{"type":202,"value":500},{"type":197,"tag":451,"props":1789,"children":1790},{"style":475},[1791],{"type":202,"value":505},{"type":197,"tag":451,"props":1793,"children":1794},{"style":481},[1795],{"type":202,"value":510},{"type":197,"tag":451,"props":1797,"children":1798},{"style":513},[1799],{"type":202,"value":209},{"type":197,"tag":451,"props":1801,"children":1802},{"style":481},[1803],{"type":202,"value":510},{"type":197,"tag":451,"props":1805,"children":1806},{"style":481},[1807],{"type":202,"value":524},{"type":197,"tag":451,"props":1809,"children":1810},{"style":481},[1811],{"type":202,"value":529},{"type":197,"tag":451,"props":1813,"children":1814},{"style":513},[1815],{"type":202,"value":534},{"type":197,"tag":451,"props":1817,"children":1818},{"style":481},[1819],{"type":202,"value":510},{"type":197,"tag":451,"props":1821,"children":1822},{"style":475},[1823],{"type":202,"value":543},{"type":197,"tag":451,"props":1825,"children":1826},{"style":481},[1827],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1830,"children":1831},{"class":453,"style":454},[1832,1836,1840],{"type":197,"tag":451,"props":1833,"children":1834},{"style":492},[1835],{"type":202,"value":556},{"type":197,"tag":451,"props":1837,"children":1838},{"style":481},[1839],{"type":202,"value":500},{"type":197,"tag":451,"props":1841,"children":1842},{"style":481},[1843],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":1846,"children":1847},{"class":453,"style":454},[1848,1853,1857],{"type":197,"tag":451,"props":1849,"children":1850},{"style":492},[1851],{"type":202,"value":1852},"    cloudinary",{"type":197,"tag":451,"props":1854,"children":1855},{"style":481},[1856],{"type":202,"value":500},{"type":197,"tag":451,"props":1858,"children":1859},{"style":481},[1860],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":1863,"children":1864},{"class":453,"style":454},[1865,1870,1874,1878,1883,1887],{"type":197,"tag":451,"props":1866,"children":1867},{"style":492},[1868],{"type":202,"value":1869},"      baseURL",{"type":197,"tag":451,"props":1871,"children":1872},{"style":481},[1873],{"type":202,"value":500},{"type":197,"tag":451,"props":1875,"children":1876},{"style":481},[1877],{"type":202,"value":529},{"type":197,"tag":451,"props":1879,"children":1880},{"style":513},[1881],{"type":202,"value":1882},"https:\u002F\u002Fres.cloudinary.com\u002F\u003Cyour-cloud-name>\u002Fimage\u002Fupload\u002F",{"type":197,"tag":451,"props":1884,"children":1885},{"style":481},[1886],{"type":202,"value":510},{"type":197,"tag":451,"props":1888,"children":1889},{"style":481},[1890],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1893,"children":1894},{"class":453,"style":454},[1895],{"type":197,"tag":451,"props":1896,"children":1897},{"style":481},[1898],{"type":202,"value":1128},{"type":202,"value":486},{"type":197,"tag":451,"props":1901,"children":1902},{"class":453,"style":454},[1903],{"type":197,"tag":451,"props":1904,"children":1905},{"style":481},[1906],{"type":202,"value":597},{"type":202,"value":486},{"type":197,"tag":451,"props":1909,"children":1910},{"class":453,"style":454},[1911,1916,1920],{"type":197,"tag":451,"props":1912,"children":1913},{"style":492},[1914],{"type":202,"value":1915},"  nuxtPhoto",{"type":197,"tag":451,"props":1917,"children":1918},{"style":481},[1919],{"type":202,"value":500},{"type":197,"tag":451,"props":1921,"children":1922},{"style":481},[1923],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":1926,"children":1927},{"class":453,"style":454},[1928,1933,1937,1941,1946,1950],{"type":197,"tag":451,"props":1929,"children":1930},{"style":492},[1931],{"type":202,"value":1932},"    provider",{"type":197,"tag":451,"props":1934,"children":1935},{"style":481},[1936],{"type":202,"value":500},{"type":197,"tag":451,"props":1938,"children":1939},{"style":481},[1940],{"type":202,"value":529},{"type":197,"tag":451,"props":1942,"children":1943},{"style":513},[1944],{"type":202,"value":1945},"cloudinary",{"type":197,"tag":451,"props":1947,"children":1948},{"style":481},[1949],{"type":202,"value":510},{"type":197,"tag":451,"props":1951,"children":1952},{"style":481},[1953],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":1956,"children":1957},{"class":453,"style":454},[1958],{"type":197,"tag":451,"props":1959,"children":1960},{"style":481},[1961],{"type":202,"value":597},{"type":202,"value":486},{"type":197,"tag":451,"props":1964,"children":1965},{"class":453,"style":454},[1966,1970],{"type":197,"tag":451,"props":1967,"children":1968},{"style":481},[1969],{"type":202,"value":606},{"type":197,"tag":451,"props":1971,"children":1972},{"style":475},[1973],{"type":202,"value":611},{"type":197,"tag":198,"props":1975,"children":1976},{},[1977,1979,1984,1986,1991],{"type":202,"value":1978},"Set each photo's ",{"type":197,"tag":205,"props":1980,"children":1981},{},[1982],{"type":202,"value":1983},"src",{"type":202,"value":1985}," to the asset path after ",{"type":197,"tag":205,"props":1987,"children":1988},{},[1989],{"type":202,"value":1990},"baseURL",{"type":202,"value":1992},", with its original\nsize:",{"type":197,"tag":440,"props":1994,"children":1995},{"language":442,"class":444},[1996],{"type":197,"tag":205,"props":1997,"children":1998},{"class":448},[1999,2032,2033,2063,2064,2137,2138,2167,2168,2197,2198,2246,2247],{"type":197,"tag":451,"props":2000,"children":2001},{"class":453,"style":454},[2002,2008,2013,2017,2023,2028],{"type":197,"tag":451,"props":2003,"children":2005},{"style":2004},"color:#9C3EDA;--shiki-dark:#C792EA",[2006],{"type":202,"value":2007},"const",{"type":197,"tag":451,"props":2009,"children":2010},{"style":475},[2011],{"type":202,"value":2012}," photo",{"type":197,"tag":451,"props":2014,"children":2015},{"style":481},[2016],{"type":202,"value":500},{"type":197,"tag":451,"props":2018,"children":2020},{"style":2019},"color:#E2931D;--shiki-dark:#FFCB6B",[2021],{"type":202,"value":2022}," PhotoItem",{"type":197,"tag":451,"props":2024,"children":2025},{"style":481},[2026],{"type":202,"value":2027}," =",{"type":197,"tag":451,"props":2029,"children":2030},{"style":481},[2031],{"type":202,"value":565},{"type":202,"value":486},{"type":197,"tag":451,"props":2034,"children":2035},{"class":453,"style":454},[2036,2041,2045,2050,2054,2059],{"type":197,"tag":451,"props":2037,"children":2038},{"style":492},[2039],{"type":202,"value":2040},"  id",{"type":197,"tag":451,"props":2042,"children":2043},{"style":481},[2044],{"type":202,"value":500},{"type":197,"tag":451,"props":2046,"children":2047},{"style":475},[2048],{"type":202,"value":2049}," asset",{"type":197,"tag":451,"props":2051,"children":2052},{"style":481},[2053],{"type":202,"value":363},{"type":197,"tag":451,"props":2055,"children":2056},{"style":475},[2057],{"type":202,"value":2058},"public_id",{"type":197,"tag":451,"props":2060,"children":2061},{"style":481},[2062],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":2065,"children":2066},{"class":453,"style":454},[2067,2072,2076,2081,2086,2091,2096,2100,2104,2108,2112,2116,2120,2124,2128,2133],{"type":197,"tag":451,"props":2068,"children":2069},{"style":492},[2070],{"type":202,"value":2071},"  src",{"type":197,"tag":451,"props":2073,"children":2074},{"style":481},[2075],{"type":202,"value":500},{"type":197,"tag":451,"props":2077,"children":2078},{"style":481},[2079],{"type":202,"value":2080}," `",{"type":197,"tag":451,"props":2082,"children":2083},{"style":513},[2084],{"type":202,"value":2085},"\u002F",{"type":197,"tag":451,"props":2087,"children":2088},{"style":481},[2089],{"type":202,"value":2090},"${",{"type":197,"tag":451,"props":2092,"children":2093},{"style":475},[2094],{"type":202,"value":2095},"asset",{"type":197,"tag":451,"props":2097,"children":2098},{"style":481},[2099],{"type":202,"value":363},{"type":197,"tag":451,"props":2101,"children":2102},{"style":475},[2103],{"type":202,"value":2058},{"type":197,"tag":451,"props":2105,"children":2106},{"style":481},[2107],{"type":202,"value":606},{"type":197,"tag":451,"props":2109,"children":2110},{"style":513},[2111],{"type":202,"value":363},{"type":197,"tag":451,"props":2113,"children":2114},{"style":481},[2115],{"type":202,"value":2090},{"type":197,"tag":451,"props":2117,"children":2118},{"style":475},[2119],{"type":202,"value":2095},{"type":197,"tag":451,"props":2121,"children":2122},{"style":481},[2123],{"type":202,"value":363},{"type":197,"tag":451,"props":2125,"children":2126},{"style":475},[2127],{"type":202,"value":729},{"type":197,"tag":451,"props":2129,"children":2130},{"style":481},[2131],{"type":202,"value":2132},"}`",{"type":197,"tag":451,"props":2134,"children":2135},{"style":481},[2136],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":2139,"children":2140},{"class":453,"style":454},[2141,2146,2150,2154,2158,2163],{"type":197,"tag":451,"props":2142,"children":2143},{"style":492},[2144],{"type":202,"value":2145},"  width",{"type":197,"tag":451,"props":2147,"children":2148},{"style":481},[2149],{"type":202,"value":500},{"type":197,"tag":451,"props":2151,"children":2152},{"style":475},[2153],{"type":202,"value":2049},{"type":197,"tag":451,"props":2155,"children":2156},{"style":481},[2157],{"type":202,"value":363},{"type":197,"tag":451,"props":2159,"children":2160},{"style":475},[2161],{"type":202,"value":2162},"width",{"type":197,"tag":451,"props":2164,"children":2165},{"style":481},[2166],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":2169,"children":2170},{"class":453,"style":454},[2171,2176,2180,2184,2188,2193],{"type":197,"tag":451,"props":2172,"children":2173},{"style":492},[2174],{"type":202,"value":2175},"  height",{"type":197,"tag":451,"props":2177,"children":2178},{"style":481},[2179],{"type":202,"value":500},{"type":197,"tag":451,"props":2181,"children":2182},{"style":475},[2183],{"type":202,"value":2049},{"type":197,"tag":451,"props":2185,"children":2186},{"style":481},[2187],{"type":202,"value":363},{"type":197,"tag":451,"props":2189,"children":2190},{"style":475},[2191],{"type":202,"value":2192},"height",{"type":197,"tag":451,"props":2194,"children":2195},{"style":481},[2196],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":2199,"children":2200},{"class":453,"style":454},[2201,2206,2210,2214,2218,2223,2228,2233,2237,2242],{"type":197,"tag":451,"props":2202,"children":2203},{"style":492},[2204],{"type":202,"value":2205},"  alt",{"type":197,"tag":451,"props":2207,"children":2208},{"style":481},[2209],{"type":202,"value":500},{"type":197,"tag":451,"props":2211,"children":2212},{"style":475},[2213],{"type":202,"value":2049},{"type":197,"tag":451,"props":2215,"children":2216},{"style":481},[2217],{"type":202,"value":363},{"type":197,"tag":451,"props":2219,"children":2220},{"style":475},[2221],{"type":202,"value":2222},"context",{"type":197,"tag":451,"props":2224,"children":2225},{"style":481},[2226],{"type":202,"value":2227},"?.",{"type":197,"tag":451,"props":2229,"children":2230},{"style":475},[2231],{"type":202,"value":2232},"custom",{"type":197,"tag":451,"props":2234,"children":2235},{"style":481},[2236],{"type":202,"value":2227},{"type":197,"tag":451,"props":2238,"children":2239},{"style":475},[2240],{"type":202,"value":2241},"alt",{"type":197,"tag":451,"props":2243,"children":2244},{"style":481},[2245],{"type":202,"value":524},{"type":202,"value":486},{"type":197,"tag":451,"props":2248,"children":2249},{"class":453,"style":454},[2250],{"type":197,"tag":451,"props":2251,"children":2252},{"style":481},[2253],{"type":202,"value":606},{"type":197,"tag":198,"props":2255,"children":2256},{},[2257,2259,2264,2266,2271],{"type":202,"value":2258},"For an image service without a Nuxt Image provider, or in plain Vue, write a\n",{"type":197,"tag":205,"props":2260,"children":2261},{},[2262],{"type":202,"value":2263},"PhotoProvider",{"type":202,"value":2265},": see ",{"type":197,"tag":1739,"props":2267,"children":2268},{"href":84},[2269],{"type":202,"value":2270},"integrate a custom image service",{"type":202,"value":363},{"type":197,"tag":220,"props":2273,"children":2275},{"id":2274},"show-a-placeholder-while-an-image-loads",[2276],{"type":202,"value":2277},"Show a placeholder while an image loads",{"type":197,"tag":198,"props":2279,"children":2280},{},[2281],{"type":202,"value":2282},"Nuxt Photo never shows an empty box. Each photo frame shows, in this order:",{"type":197,"tag":2284,"props":2285,"children":2286},"ol",{},[2287,2297,2344,2349],{"type":197,"tag":332,"props":2288,"children":2289},{},[2290,2295],{"type":197,"tag":205,"props":2291,"children":2292},{},[2293],{"type":202,"value":2294},"placeholderSrc",{"type":202,"value":2296}," from the photo, when you set it.",{"type":197,"tag":332,"props":2298,"children":2299},{},[2300,2302,2306,2308,2313,2315,2319,2321,2325,2327,2335,2337,2342],{"type":202,"value":2301},"For files in ",{"type":197,"tag":205,"props":2303,"children":2304},{},[2305],{"type":202,"value":1177},{"type":202,"value":2307},": a blurred preview at most 32 px wide, made at\nbuild time and inlined as a data URL. Nuxt Photo makes it with ",{"type":197,"tag":205,"props":2309,"children":2310},{},[2311],{"type":202,"value":2312},"sharp",{"type":202,"value":2314},",\nwhich ",{"type":197,"tag":205,"props":2316,"children":2317},{},[2318],{"type":202,"value":209},{"type":202,"value":2320}," already installs for IPX. Without ",{"type":197,"tag":205,"props":2322,"children":2323},{},[2324],{"type":202,"value":2312},{"type":202,"value":2326}," there is no\npreview, and the build logs one warning. Photos from\n",{"type":197,"tag":1739,"props":2328,"children":2329},{"href":59},[2330],{"type":197,"tag":205,"props":2331,"children":2332},{},[2333],{"type":202,"value":2334},"usePhotoFolder",{"type":202,"value":2336}," and, with ",{"type":197,"tag":205,"props":2338,"children":2339},{},[2340],{"type":202,"value":2341},"localImages",{"type":202,"value":2343},",\nhand-written arrays get it.",{"type":197,"tag":332,"props":2345,"children":2346},{},[2347],{"type":202,"value":2348},"For remote images on IPX: a 24 px image from the provider.",{"type":197,"tag":332,"props":2350,"children":2351},{},[2352,2354,2359],{"type":202,"value":2353},"Otherwise the background color ",{"type":197,"tag":205,"props":2355,"children":2356},{},[2357],{"type":202,"value":2358},"--np-placeholder-bg",{"type":202,"value":363},{"type":197,"tag":198,"props":2361,"children":2362},{},[2363],{"type":202,"value":2364},"When an image fails to load, the placeholder stays, so the layout does not\nshow an empty frame.",{"type":197,"tag":220,"props":2366,"children":2368},{"id":2367},"load-the-first-screen-first",[2369],{"type":202,"value":2370},"Load the first screen first",{"type":197,"tag":198,"props":2372,"children":2373},{},[2374],{"type":202,"value":2375},"Images are lazy by default. Mark the images a visitor sees first, so the\nbrowser loads them before anything else:",{"type":197,"tag":440,"props":2377,"children":2380},{"language":2378,"filename":2379,"class":444},"vue","app\u002Fpages\u002Findex.vue",[2381],{"type":197,"tag":205,"props":2382,"children":2384},{"class":2383},"language-vue",[2385,2403,2404,2455,2456,2522,2523],{"type":197,"tag":451,"props":2386,"children":2387},{"class":453,"style":454},[2388,2393,2398],{"type":197,"tag":451,"props":2389,"children":2390},{"style":481},[2391],{"type":202,"value":2392},"\u003C",{"type":197,"tag":451,"props":2394,"children":2395},{"style":492},[2396],{"type":202,"value":2397},"template",{"type":197,"tag":451,"props":2399,"children":2400},{"style":481},[2401],{"type":202,"value":2402},">",{"type":202,"value":486},{"type":197,"tag":451,"props":2405,"children":2406},{"class":453,"style":454},[2407,2412,2416,2421,2426,2431,2436,2441,2445,2450],{"type":197,"tag":451,"props":2408,"children":2409},{"style":481},[2410],{"type":202,"value":2411},"  \u003C",{"type":197,"tag":451,"props":2413,"children":2414},{"style":492},[2415],{"type":202,"value":118},{"type":197,"tag":451,"props":2417,"children":2418},{"style":481},[2419],{"type":202,"value":2420}," :",{"type":197,"tag":451,"props":2422,"children":2423},{"style":2004},[2424],{"type":202,"value":2425},"photo",{"type":197,"tag":451,"props":2427,"children":2428},{"style":481},[2429],{"type":202,"value":2430},"=",{"type":197,"tag":451,"props":2432,"children":2433},{"style":481},[2434],{"type":202,"value":2435},"\"",{"type":197,"tag":451,"props":2437,"children":2438},{"style":475},[2439],{"type":202,"value":2440},"cover",{"type":197,"tag":451,"props":2442,"children":2443},{"style":481},[2444],{"type":202,"value":2435},{"type":197,"tag":451,"props":2446,"children":2447},{"style":2004},[2448],{"type":202,"value":2449}," priority",{"type":197,"tag":451,"props":2451,"children":2452},{"style":481},[2453],{"type":202,"value":2454}," \u002F>",{"type":202,"value":486},{"type":197,"tag":451,"props":2457,"children":2458},{"class":453,"style":454},[2459,2463,2467,2471,2476,2480,2484,2488,2492,2496,2501,2505,2509,2514,2518],{"type":197,"tag":451,"props":2460,"children":2461},{"style":481},[2462],{"type":202,"value":2411},{"type":197,"tag":451,"props":2464,"children":2465},{"style":492},[2466],{"type":202,"value":123},{"type":197,"tag":451,"props":2468,"children":2469},{"style":481},[2470],{"type":202,"value":2420},{"type":197,"tag":451,"props":2472,"children":2473},{"style":2004},[2474],{"type":202,"value":2475},"photos",{"type":197,"tag":451,"props":2477,"children":2478},{"style":481},[2479],{"type":202,"value":2430},{"type":197,"tag":451,"props":2481,"children":2482},{"style":481},[2483],{"type":202,"value":2435},{"type":197,"tag":451,"props":2485,"children":2486},{"style":475},[2487],{"type":202,"value":2475},{"type":197,"tag":451,"props":2489,"children":2490},{"style":481},[2491],{"type":202,"value":2435},{"type":197,"tag":451,"props":2493,"children":2494},{"style":481},[2495],{"type":202,"value":2420},{"type":197,"tag":451,"props":2497,"children":2498},{"style":2004},[2499],{"type":202,"value":2500},"priority",{"type":197,"tag":451,"props":2502,"children":2503},{"style":481},[2504],{"type":202,"value":2430},{"type":197,"tag":451,"props":2506,"children":2507},{"style":481},[2508],{"type":202,"value":2435},{"type":197,"tag":451,"props":2510,"children":2511},{"style":581},[2512],{"type":202,"value":2513},"6",{"type":197,"tag":451,"props":2515,"children":2516},{"style":481},[2517],{"type":202,"value":2435},{"type":197,"tag":451,"props":2519,"children":2520},{"style":481},[2521],{"type":202,"value":2454},{"type":202,"value":486},{"type":197,"tag":451,"props":2524,"children":2525},{"class":453,"style":454},[2526,2531,2535],{"type":197,"tag":451,"props":2527,"children":2528},{"style":481},[2529],{"type":202,"value":2530},"\u003C\u002F",{"type":197,"tag":451,"props":2532,"children":2533},{"style":492},[2534],{"type":202,"value":2397},{"type":197,"tag":451,"props":2536,"children":2537},{"style":481},[2538],{"type":202,"value":2402},{"type":197,"tag":198,"props":2540,"children":2541},{},[2542,2546,2548,2553,2555,2560,2562,2567,2569,2573,2575,2579,2581,2585],{"type":197,"tag":205,"props":2543,"children":2544},{},[2545],{"type":202,"value":2500},{"type":202,"value":2547}," sets ",{"type":197,"tag":205,"props":2549,"children":2550},{},[2551],{"type":202,"value":2552},"loading=\"eager\"",{"type":202,"value":2554}," and ",{"type":197,"tag":205,"props":2556,"children":2557},{},[2558],{"type":202,"value":2559},"fetchpriority=\"high\"",{"type":202,"value":2561},". In Nuxt it\nalso adds a ",{"type":197,"tag":205,"props":2563,"children":2564},{},[2565],{"type":202,"value":2566},"\u003Clink rel=\"preload\">",{"type":202,"value":2568}," for the image to the page head, so the\nbrowser starts the download before it reads the rest of the page. At most six\nimages get a preload. On ",{"type":197,"tag":205,"props":2570,"children":2571},{},[2572],{"type":202,"value":123},{"type":202,"value":2574},", ",{"type":197,"tag":205,"props":2576,"children":2577},{},[2578],{"type":202,"value":2500},{"type":202,"value":2580}," is the number of\nthumbnails, counted from the start. Set it to the number of thumbnails in the\nfirst screen; a higher number delays the rest of the page. The first slide of\n",{"type":197,"tag":205,"props":2582,"children":2583},{},[2584],{"type":202,"value":133},{"type":202,"value":2586}," always has high priority.",{"type":197,"tag":198,"props":2588,"children":2589},{},[2590,2592,2596,2598,2603],{"type":202,"value":2591},"A ",{"type":197,"tag":205,"props":2593,"children":2594},{},[2595],{"type":202,"value":389},{"type":202,"value":2597}," cannot know its width before the page is shown, so it uses\n",{"type":197,"tag":205,"props":2599,"children":2600},{},[2601],{"type":202,"value":2602},"100vw",{"type":202,"value":2604},". When the photo is narrower, say so, or the browser downloads a file\nfor the full screen width:",{"type":197,"tag":440,"props":2606,"children":2607},{"language":2378,"class":444},[2608],{"type":197,"tag":205,"props":2609,"children":2610},{"class":2383},[2611],{"type":197,"tag":451,"props":2612,"children":2613},{"class":453,"style":454},[2614,2618,2622,2626,2630,2634,2638,2642,2646,2650,2655,2659,2663,2668,2672],{"type":197,"tag":451,"props":2615,"children":2616},{"style":481},[2617],{"type":202,"value":2392},{"type":197,"tag":451,"props":2619,"children":2620},{"style":492},[2621],{"type":202,"value":118},{"type":197,"tag":451,"props":2623,"children":2624},{"style":481},[2625],{"type":202,"value":2420},{"type":197,"tag":451,"props":2627,"children":2628},{"style":2004},[2629],{"type":202,"value":2425},{"type":197,"tag":451,"props":2631,"children":2632},{"style":481},[2633],{"type":202,"value":2430},{"type":197,"tag":451,"props":2635,"children":2636},{"style":481},[2637],{"type":202,"value":2435},{"type":197,"tag":451,"props":2639,"children":2640},{"style":475},[2641],{"type":202,"value":2440},{"type":197,"tag":451,"props":2643,"children":2644},{"style":481},[2645],{"type":202,"value":2435},{"type":197,"tag":451,"props":2647,"children":2648},{"style":2004},[2649],{"type":202,"value":2449},{"type":197,"tag":451,"props":2651,"children":2652},{"style":2004},[2653],{"type":202,"value":2654}," sizes",{"type":197,"tag":451,"props":2656,"children":2657},{"style":481},[2658],{"type":202,"value":2430},{"type":197,"tag":451,"props":2660,"children":2661},{"style":481},[2662],{"type":202,"value":2435},{"type":197,"tag":451,"props":2664,"children":2665},{"style":513},[2666],{"type":202,"value":2667},"(min-width: 1024px) 720px, 100vw",{"type":197,"tag":451,"props":2669,"children":2670},{"style":481},[2671],{"type":202,"value":2435},{"type":197,"tag":451,"props":2673,"children":2674},{"style":481},[2675],{"type":202,"value":2454},{"type":197,"tag":198,"props":2677,"children":2678},{},[2679],{"type":202,"value":2680},"Images below the first screen start loading about one and a half screen\nheights before they scroll into view, in every browser. The lightbox requests\na slide only when it opens. After the open photo has loaded, it loads the\nprevious and the next photo in the background, so the next swipe shows a\nready image. With the browser's data saver on, it skips this.",{"type":197,"tag":220,"props":2682,"children":2684},{"id":2683},"check-the-result",[2685],{"type":202,"value":2686},"Check the result",{"type":197,"tag":198,"props":2688,"children":2689},{},[2690],{"type":202,"value":2691},"Open the network panel, disable the cache, and reload:",{"type":197,"tag":328,"props":2693,"children":2694},{},[2695,2700,2725,2730],{"type":197,"tag":332,"props":2696,"children":2697},{},[2698],{"type":202,"value":2699},"Thumbnails request files close to their displayed width times the screen's\npixel density, never wider than the source.",{"type":197,"tag":332,"props":2701,"children":2702},{},[2703,2705,2710,2712,2717,2719,2724],{"type":202,"value":2704},"With Nuxt Image, image URLs go through your provider: ",{"type":197,"tag":205,"props":2706,"children":2707},{},[2708],{"type":202,"value":2709},"\u002F_ipx\u002F…",{"type":202,"value":2711}," for IPX,\n",{"type":197,"tag":205,"props":2713,"children":2714},{},[2715],{"type":202,"value":2716},"\u002F_vercel\u002Fimage?…",{"type":202,"value":2718}," on Vercel. On Vercel, a second load shows\n",{"type":197,"tag":205,"props":2720,"children":2721},{},[2722],{"type":202,"value":2723},"x-vercel-cache: HIT",{"type":202,"value":363},{"type":197,"tag":332,"props":2726,"children":2727},{},[2728],{"type":202,"value":2729},"Images below the first screen are requested as you scroll toward them, and\na placeholder is visible until each one is ready.",{"type":197,"tag":332,"props":2731,"children":2732},{},[2733,2735,2740],{"type":202,"value":2734},"If local images work and remote ones fail, add the host to ",{"type":197,"tag":205,"props":2736,"children":2737},{},[2738],{"type":202,"value":2739},"image.domains",{"type":202,"value":363},{"title":2742,"searchDepth":2743,"depth":2743,"links":2744},"",4,[2745,2747,2748,2749,2750,2751,2752,2753,2754],{"id":222,"depth":2746,"text":225},2,{"id":429,"depth":2746,"text":432},{"id":790,"depth":2746,"text":793},{"id":1350,"depth":2746,"text":1353},{"id":1667,"depth":2746,"text":1670},{"id":1729,"depth":2746,"text":1732},{"id":2274,"depth":2746,"text":2277},{"id":2367,"depth":2746,"text":2370},{"id":2683,"depth":2746,"text":2686},"markdown","docs",{"source":2758,"path":2759,"stem":2760,"dir":2761,"extension":2762},"content","docs\u002F2.guides\u002F5.deliver-images.md","docs\u002F2.guides\u002F5.deliver-images","guides","md",{"requestedPath":79,"resolvedPath":79,"alternates":2764},[],{"requested":2766,"resolved":2767,"usedFallback":6},{},{"locale":8},{"previous":2769,"next":2770},{"title":71,"id":72,"canonicalKey":73,"locale":8,"draft":6,"path":74},{"title":81,"id":82,"canonicalKey":83,"locale":8,"draft":6,"path":84},{"left":2772,"top":2772,"width":2773,"height":2774,"rotate":2772,"vFlip":6,"hFlip":6,"body":2775},0,256,168,"\u003Cpath fill=\"#00dc82\" d=\"M143.618 167.029h95.166c3.023 0 5.992-.771 8.61-2.237a16.96 16.96 0 0 0 6.302-6.115a16.3 16.3 0 0 0 2.304-8.352c0-2.932-.799-5.811-2.312-8.35L189.778 34.6a16.97 16.97 0 0 0-6.301-6.113a17.6 17.6 0 0 0-8.608-2.238c-3.023 0-5.991.772-8.609 2.238a16.96 16.96 0 0 0-6.3 6.113l-16.342 27.473l-31.95-53.724a17 17 0 0 0-6.304-6.112A17.64 17.64 0 0 0 96.754 0c-3.022 0-5.992.772-8.61 2.237a17 17 0 0 0-6.303 6.112L2.31 141.975a16.3 16.3 0 0 0-2.31 8.35c0 2.932.793 5.813 2.304 8.352a16.96 16.96 0 0 0 6.302 6.115a17.6 17.6 0 0 0 8.61 2.237h59.737c23.669 0 41.123-10.084 53.134-29.758l29.159-48.983l15.618-26.215l46.874 78.742h-62.492zm-67.64-26.24l-41.688-.01L96.782 35.796l31.181 52.492l-20.877 35.084c-7.976 12.765-17.037 17.416-31.107 17.416\"\u002F>",{"left":2772,"top":2772,"width":2773,"height":2773,"rotate":2772,"vFlip":6,"hFlip":6,"body":2777},"\u003Cpath fill=\"#3178c6\" d=\"M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0\"\u002F>\u003Cpath fill=\"#fff\" d=\"M150.518 200.475v27.62q6.738 3.453 15.938 5.179T185.849 235q9.934 0 18.874-1.899t15.678-6.257q6.738-4.359 10.669-11.394q3.93-7.033 3.93-17.391q0-7.51-2.246-13.163a30.8 30.8 0 0 0-6.479-10.055q-4.232-4.402-10.149-7.898t-13.347-6.602q-5.442-2.245-9.761-4.359t-7.342-4.316q-3.024-2.2-4.665-4.661t-1.641-5.567q0-2.848 1.468-5.135q1.469-2.288 4.147-3.927t6.565-2.547q3.887-.906 8.638-.906q3.456 0 7.299.518q3.844.517 7.732 1.597a54 54 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807q-6.306-2.417-13.778-3.582T198.633 107q-9.847 0-18.658 2.115q-8.811 2.114-15.506 6.602q-6.694 4.49-10.582 11.437Q150 134.102 150 143.769q0 12.342 7.127 21.06t21.638 14.759a292 292 0 0 1 10.625 4.575q4.924 2.244 8.509 4.66t5.658 5.265t2.073 6.474a9.9 9.9 0 0 1-1.296 4.963q-1.295 2.287-3.93 3.97t-6.565 2.632t-9.2.95q-8.983 0-17.794-3.151t-16.327-9.451m-46.036-68.733H140V109H41v22.742h35.345V233h28.137z\"\u002F>",{"left":2772,"top":2772,"width":2773,"height":2779,"rotate":2772,"vFlip":6,"hFlip":6,"body":2780},221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":2772,"top":2772,"width":2782,"height":2782,"rotate":2772,"vFlip":6,"hFlip":6,"body":2783},24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",1791310386688]