[{"data":1,"prerenderedAt":1196},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro":3,"surroundings:\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro":1187},{"id":4,"title":5,"body":6,"description":1168,"extension":1169,"meta":1170,"navigation":1181,"path":1182,"seo":1183,"stem":1185,"__hash__":1186},"content\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro\u002Findex.md","Responsive Images with Nuxt Image and Astro",{"type":7,"value":8,"toc":1149},"minimark",[9,14,50,64,177,182,236,240,249,261,267,273,366,370,375,520,648,652,703,710,720,724,727,833,837,847,851,877,881,888,892,917,921,949,953,959,969,989,995,999,1014,1028,1053,1069,1078,1087,1107,1111,1134,1139,1142,1145],[10,11,13],"h1",{"id":12},"how-to-get-responsive-images-right-with-nuxt-image-and-astro","How to Get Responsive Images Right with Nuxt Image and Astro",[15,16,17,18,23,24,28,29,33,34,37,38,41,42,45,46,49],"p",{},"This guide applies ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002F","Responsive Images with srcset and sizes"," to two popular frameworks, within ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". Both Nuxt Image (",[30,31,32],"code",{},"@nuxt\u002Fimage",") and Astro's built-in ",[30,35,36],{},"\u003CImage>"," and ",[30,39,40],{},"\u003CPicture>"," components generate ",[30,43,44],{},"srcset",", convert formats and set dimensions for you. That removes most of the manual work — but their defaults are tuned for the common case (below-the-fold images), and the one image that matters most, the LCP hero, needs explicit settings to avoid being lazy-loaded, deprioritised or given the wrong ",[30,47,48],{},"sizes",".",[15,51,52,53,56,57,59,60,63],{},"The recurring failure pattern on Nuxt and Astro sites is a correctly generated, beautifully responsive hero that loads late because it inherited ",[30,54,55],{},"loading=\"lazy\"",", or loads too large because ",[30,58,48],{}," defaulted to ",[30,61,62],{},"100vw"," in a layout where it renders at half the width.",[15,65,66],{},[67,68,74,75,74,82,74,86,74,89,74,98,74,104,74,113,74,119,74,124,74,129,74,132,74,135,74,138,74,141,74,144,74,147,74,152,74,156,74,158,74,162,74,164,74,167,74,169,74,172,74,174,74],"svg",{"viewBox":69,"width":70,"role":71,"ariaLabel":72,"style":73},"0 0 760 228","100%","img","Comparison of a hero image using framework component defaults versus explicitly tuned settings.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[76,77],"rect",{"className":78,"x":80,"y":80,"width":70,"height":70,"fill":81},[79],"svg-canvas","0","#ffffff",[83,84,85],"title",{},"Default vs tuned hero image component",[87,88,72],"desc",{},[76,90],{"x":91,"y":91,"width":92,"height":93,"rx":94,"fill":95,"stroke":96,"style":97},"1","758","226","10","none","currentColor","stroke-opacity:0.18",[99,100,85],"text",{"x":101,"y":102,"fill":96,"style":103},"28.0","34.0","font-size:16px;font-weight:700",[76,105],{"x":101,"y":106,"width":107,"height":108,"rx":109,"fill":110,"stroke":111,"style":112},"56.0","340.0","150.0","6","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[99,114,118],{"x":115,"y":116,"fill":96,"style":117},"42.0","82.0","font-size:14px;font-weight:700","Defaults on the hero",[99,120,123],{"x":115,"y":121,"fill":96,"style":122},"108.0","font-size:12.5px;font-weight:700","•",[99,125,128],{"x":106,"y":121,"fill":96,"style":126,"textAnchor":127},"font-size:12.5px","start","loading=lazy (inherited preset)",[99,130,123],{"x":115,"y":131,"fill":96,"style":122},"132.0",[99,133,134],{"x":106,"y":131,"fill":96,"style":126,"textAnchor":127},"sizes missing or 100vw",[99,136,123],{"x":115,"y":137,"fill":96,"style":122},"156.0",[99,139,140],{"x":106,"y":137,"fill":96,"style":126,"textAnchor":127},"No preload or fetchpriority",[99,142,123],{"x":115,"y":143,"fill":96,"style":122},"180.0",[99,145,146],{"x":106,"y":143,"fill":96,"style":126,"textAnchor":127},"LCP waits for layout + low priority",[76,148],{"x":149,"y":106,"width":107,"height":108,"rx":109,"fill":150,"stroke":150,"style":151},"392.0","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[99,153,155],{"x":154,"y":116,"fill":96,"style":117},"406.0","Tuned hero",[99,157,123],{"x":154,"y":121,"fill":96,"style":122},[99,159,161],{"x":160,"y":121,"fill":96,"style":126,"textAnchor":127},"420.0","loading=eager",[99,163,123],{"x":154,"y":131,"fill":96,"style":122},[99,165,166],{"x":160,"y":131,"fill":96,"style":126,"textAnchor":127},"sizes matching the layout",[99,168,123],{"x":154,"y":137,"fill":96,"style":122},[99,170,171],{"x":160,"y":137,"fill":96,"style":126,"textAnchor":127},"preload + fetchpriority=high",[99,173,123],{"x":154,"y":143,"fill":96,"style":122},[99,175,176],{"x":160,"y":143,"fill":96,"style":126,"textAnchor":127},"Requested during HTML parsing",[178,179,181],"h2",{"id":180},"rapid-diagnosis","Rapid Diagnosis",[183,184,185,207,217,230],"ul",{},[186,187,188,192,193,196,197,196,200,202,203,206],"li",{},[189,190,191],"strong",{},"Inspect the rendered hero markup."," Check ",[30,194,195],{},"loading",", ",[30,198,199],{},"fetchpriority",[30,201,48],{}," and whether a ",[30,204,205],{},"\u003Clink rel=\"preload\">"," exists in the head.",[186,208,209,216],{},[189,210,211,212,215],{},"Check ",[30,213,214],{},"currentSrc"," at mobile and desktop widths."," Is the chosen variant close to rendered width × DPR?",[186,218,219,222,223,226,227,229],{},[189,220,221],{},"Check global presets."," Nuxt Image ",[30,224,225],{},"presets"," or Astro defaults may apply ",[30,228,55],{}," everywhere.",[186,231,232,235],{},[189,233,234],{},"Check the provider."," Nuxt Image's IPX provider transforms on request in development and at build or runtime in production; a misconfigured provider can serve originals.",[178,237,239],{"id":238},"root-cause-analysis","Root Cause Analysis",[15,241,242,245,246,248],{},[189,243,244],{},"1. Lazy loading on the LCP image."," Global presets or component defaults apply ",[30,247,55],{}," to every image.",[15,250,251,254,255,257,258,260],{},[189,252,253],{},"2. Wrong sizes."," Without a correct ",[30,256,48],{},", the browser assumes ",[30,259,62],{}," and over-fetches for images in grids or columns.",[15,262,263,266],{},[189,264,265],{},"3. No priority signal."," Neither framework knows which image is the LCP unless you tell it.",[15,268,269,272],{},[189,270,271],{},"4. Formats not configured."," AVIF may be disabled by default in some setups for build-time reasons.",[15,274,275],{},[67,276,74,279,74,282,74,285,74,287,74,290,74,292,74,302,74,309,74,317,74,322,74,326,74,331,74,335,74,339,74,343,74,347,74,351,74,355,74,359,74],{"viewBox":277,"width":70,"role":71,"ariaLabel":278,"style":73},"0 0 760 216","Bar chart of LCP for a hero rendered by a framework image component with default and tuned settings.",[76,280],{"className":281,"x":80,"y":80,"width":70,"height":70,"fill":81},[79],[83,283,284],{},"Hero LCP with default vs tuned component settings (mobile)",[87,286,278],{},[76,288],{"x":91,"y":91,"width":92,"height":289,"rx":94,"fill":95,"stroke":96,"style":97},"214",[99,291,284],{"x":101,"y":102,"fill":96,"style":103},[293,294],"line",{"x1":295,"y1":296,"x2":295,"y2":297,"stroke":111,"strokeWidth":298,"strokeDashArray":299,"style":301},"552.3","72.0","194.0","1.5",[300,300],"4","stroke-opacity:0.9",[99,303,308],{"x":304,"y":305,"fill":96,"style":306,"textAnchor":307},"219.1","92.0","font-size:13px","end","Nuxt Image defaults (lazy preset)",[76,310],{"x":311,"y":312,"width":313,"height":314,"rx":315,"fill":110,"stroke":111,"style":316},"231.1","78.0","436.9","19","3","fill-opacity:0.7;stroke-opacity:0.9",[99,318,321],{"x":319,"y":305,"fill":96,"style":320},"674.0","font-size:12px;font-weight:600","3400ms",[99,323,325],{"x":304,"y":324,"fill":96,"style":306,"textAnchor":307},"123.0","Nuxt Image tuned",[76,327],{"x":311,"y":328,"width":329,"height":314,"rx":315,"fill":150,"stroke":150,"style":330},"109.0","263.4","fill-opacity:0.55;stroke-opacity:0.9",[99,332,334],{"x":333,"y":324,"fill":96,"style":320},"500.5","2050ms",[99,336,338],{"x":304,"y":337,"fill":96,"style":306,"textAnchor":307},"154.0","Astro Image defaults",[76,340],{"x":311,"y":341,"width":342,"height":314,"rx":315,"fill":110,"stroke":111,"style":316},"140.0","372.7",[99,344,346],{"x":345,"y":337,"fill":96,"style":320},"609.7","2900ms",[99,348,350],{"x":304,"y":349,"fill":96,"style":306,"textAnchor":307},"185.0","Astro Picture tuned",[76,352],{"x":311,"y":353,"width":354,"height":314,"rx":315,"fill":150,"stroke":150,"style":330},"171.0","250.6",[99,356,358],{"x":357,"y":349,"fill":96,"style":320},"487.7","1950ms",[99,360,365],{"x":295,"y":361,"fill":362,"style":363,"textAnchor":364},"68.0","#8a6608","font-size:12px;font-weight:700","middle","2.5s",[178,367,369],{"id":368},"step-by-step-resolution","Step-by-Step Resolution",[371,372,374],"h3",{"id":373},"_1-nuxt-image-mark-the-hero-explicitly","1. Nuxt Image: mark the hero explicitly",[376,377,382],"pre",{"className":378,"code":379,"language":380,"meta":381,"style":381},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Ctemplate>\n  \u003CNuxtPicture\n    src=\"\u002Fimages\u002Fhero.jpg\"\n    :img-attrs=\"{ fetchpriority: 'high', alt: 'Trail runner on a ridge' }\"\n    sizes=\"100vw md:100vw lg:1200px\"\n    format=\"avif,webp\"\n    width=\"1200\" height=\"675\"\n    loading=\"eager\"\n    preload\n  \u002F>\n\u003C\u002Ftemplate>\n\u003C!-- trade-off: the preload prop adds a \u003Clink rel=\"preload\"> per instance; use it\n     on the single LCP image per page only. -->\n","vue","",[30,383,384,399,408,422,433,444,455,474,485,491,497,507,514],{"__ignoreMap":381},[385,386,388,392,396],"span",{"class":293,"line":387},1,[385,389,391],{"class":390},"saISM","\u003C",[385,393,395],{"class":394},"sZBmE","template",[385,397,398],{"class":390},">\n",[385,400,402,405],{"class":293,"line":401},2,[385,403,404],{"class":390},"  \u003C",[385,406,407],{"class":394},"NuxtPicture\n",[385,409,411,415,418],{"class":293,"line":410},3,[385,412,414],{"class":413},"sPXB4","    src",[385,416,417],{"class":390},"=",[385,419,421],{"class":420},"sZ8jY","\"\u002Fimages\u002Fhero.jpg\"\n",[385,423,425,428,430],{"class":293,"line":424},4,[385,426,427],{"class":413},"    :img-attrs",[385,429,417],{"class":390},[385,431,432],{"class":420},"\"{ fetchpriority: 'high', alt: 'Trail runner on a ridge' }\"\n",[385,434,436,439,441],{"class":293,"line":435},5,[385,437,438],{"class":413},"    sizes",[385,440,417],{"class":390},[385,442,443],{"class":420},"\"100vw md:100vw lg:1200px\"\n",[385,445,447,450,452],{"class":293,"line":446},6,[385,448,449],{"class":413},"    format",[385,451,417],{"class":390},[385,453,454],{"class":420},"\"avif,webp\"\n",[385,456,458,461,463,466,469,471],{"class":293,"line":457},7,[385,459,460],{"class":413},"    width",[385,462,417],{"class":390},[385,464,465],{"class":420},"\"1200\"",[385,467,468],{"class":413}," height",[385,470,417],{"class":390},[385,472,473],{"class":420},"\"675\"\n",[385,475,477,480,482],{"class":293,"line":476},8,[385,478,479],{"class":413},"    loading",[385,481,417],{"class":390},[385,483,484],{"class":420},"\"eager\"\n",[385,486,488],{"class":293,"line":487},9,[385,489,490],{"class":413},"    preload\n",[385,492,494],{"class":293,"line":493},10,[385,495,496],{"class":390},"  \u002F>\n",[385,498,500,503,505],{"class":293,"line":499},11,[385,501,502],{"class":390},"\u003C\u002F",[385,504,395],{"class":394},[385,506,398],{"class":390},[385,508,510],{"class":293,"line":509},12,[385,511,513],{"class":512},"sjfSM","\u003C!-- trade-off: the preload prop adds a \u003Clink rel=\"preload\"> per instance; use it\n",[385,515,517],{"class":293,"line":516},13,[385,518,519],{"class":512},"     on the single LCP image per page only. -->\n",[376,521,525],{"className":522,"code":523,"language":524,"meta":381,"style":381},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F nuxt.config.ts — sensible defaults for everything else.\nexport default defineNuxtConfig({\n  image: {\n    format: ['avif', 'webp'],\n    screens: { sm: 480, md: 768, lg: 1200, xl: 1600 },\n    presets: { card: { modifiers: { fit: 'cover', quality: 70 }, loading: 'lazy' } },\n  },\n});\n\u002F\u002F trade-off: AVIF generation increases build or first-request transform time;\n\u002F\u002F cache transformed images at the CDN.\n","javascript",[30,526,527,532,549,554,570,599,622,630,638,643],{"__ignoreMap":381},[385,528,529],{"class":293,"line":387},[385,530,531],{"class":512},"\u002F\u002F nuxt.config.ts — sensible defaults for everything else.\n",[385,533,534,538,541,545],{"class":293,"line":401},[385,535,537],{"class":536},"sPARh","export",[385,539,540],{"class":536}," default",[385,542,544],{"class":543},"smZ65"," defineNuxtConfig",[385,546,548],{"class":547},"sQw3B","({\n",[385,550,551],{"class":293,"line":410},[385,552,553],{"class":390},"  image: {\n",[385,555,556,559,562,564,567],{"class":293,"line":424},[385,557,558],{"class":390},"    format: [",[385,560,561],{"class":420},"'avif'",[385,563,196],{"class":390},[385,565,566],{"class":420},"'webp'",[385,568,569],{"class":390},"],\n",[385,571,572,575,578,581,584,587,590,593,596],{"class":293,"line":435},[385,573,574],{"class":390},"    screens: { sm: ",[385,576,577],{"class":413},"480",[385,579,580],{"class":390},", md: ",[385,582,583],{"class":413},"768",[385,585,586],{"class":390},", lg: ",[385,588,589],{"class":413},"1200",[385,591,592],{"class":390},", xl: ",[385,594,595],{"class":413},"1600",[385,597,598],{"class":390}," },\n",[385,600,601,604,607,610,613,616,619],{"class":293,"line":446},[385,602,603],{"class":390},"    presets: { card: { modifiers: { fit: ",[385,605,606],{"class":420},"'cover'",[385,608,609],{"class":390},", quality: ",[385,611,612],{"class":413},"70",[385,614,615],{"class":390}," }, loading: ",[385,617,618],{"class":420},"'lazy'",[385,620,621],{"class":390}," } },\n",[385,623,624,627],{"class":293,"line":457},[385,625,626],{"class":390},"  }",[385,628,629],{"class":547},",\n",[385,631,632,635],{"class":293,"line":476},[385,633,634],{"class":547},"})",[385,636,637],{"class":390},";\n",[385,639,640],{"class":293,"line":487},[385,641,642],{"class":512},"\u002F\u002F trade-off: AVIF generation increases build or first-request transform time;\n",[385,644,645],{"class":293,"line":493},[385,646,647],{"class":512},"\u002F\u002F cache transformed images at the CDN.\n",[371,649,651],{"id":650},"_2-astro-use-picture-with-explicit-priority","2. Astro: use Picture with explicit priority",[376,653,657],{"className":654,"code":655,"language":656,"meta":381,"style":381},"language-astro shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","---\nimport { Picture } from 'astro:assets';\nimport hero from '..\u002Fassets\u002Fhero.jpg';\n---\n\u003CPicture src={hero} formats={['avif', 'webp']} widths={[480, 800, 1200, 1600]}\n         sizes=\"(max-width: 800px) 100vw, 1200px\" alt=\"Trail runner on a ridge\"\n         loading=\"eager\" fetchpriority=\"high\" \u002F>\n\u003C!-- trade-off: Astro generates every width × format at build; large widths lists\n     on many images increase build time. -->\n","astro",[30,658,659,664,669,674,678,683,688,693,698],{"__ignoreMap":381},[385,660,661],{"class":293,"line":387},[385,662,663],{},"---\n",[385,665,666],{"class":293,"line":401},[385,667,668],{},"import { Picture } from 'astro:assets';\n",[385,670,671],{"class":293,"line":410},[385,672,673],{},"import hero from '..\u002Fassets\u002Fhero.jpg';\n",[385,675,676],{"class":293,"line":424},[385,677,663],{},[385,679,680],{"class":293,"line":435},[385,681,682],{},"\u003CPicture src={hero} formats={['avif', 'webp']} widths={[480, 800, 1200, 1600]}\n",[385,684,685],{"class":293,"line":446},[385,686,687],{},"         sizes=\"(max-width: 800px) 100vw, 1200px\" alt=\"Trail runner on a ridge\"\n",[385,689,690],{"class":293,"line":457},[385,691,692],{},"         loading=\"eager\" fetchpriority=\"high\" \u002F>\n",[385,694,695],{"class":293,"line":476},[385,696,697],{},"\u003C!-- trade-off: Astro generates every width × format at build; large widths lists\n",[385,699,700],{"class":293,"line":487},[385,701,702],{},"     on many images increase build time. -->\n",[371,704,706,707,709],{"id":705},"_3-set-sizes-from-the-layout-per-usage","3. Set ",[30,708,48],{}," from the layout, per usage",[15,711,712,713,716,717,719],{},"For grid cards: ",[30,714,715],{},"sizes=\"(max-width: 600px) 50vw, (max-width: 1200px) 33vw, 300px\"",". Each component usage should pass the ",[30,718,48],{}," matching where it renders.",[371,721,723],{"id":722},"_4-keep-below-the-fold-images-lazy-with-dimensions","4. Keep below-the-fold images lazy with dimensions",[15,725,726],{},"Let the default lazy behaviour apply to everything else, and make sure width and height (or aspect ratio) are always set so nothing shifts.",[15,728,729],{},[67,730,74,733,74,736,74,739,74,741,74,744,74,746,74,750,74,756,74,761,74,764,74,767,74,771,74,774,74,778,74,782,74,785,74,789,74,793,74,799,74,803,74,807,74,812,74,814,74,817,74,821,74,824,74,827,74,830,74],{"viewBox":731,"width":70,"role":71,"ariaLabel":732,"style":73},"0 0 760 318","Four settings to get right when using Nuxt Image or Astro image components.",[76,734],{"className":735,"x":80,"y":80,"width":70,"height":70,"fill":81},[79],[83,737,738],{},"Framework image component checklist",[87,740,732],{},[76,742],{"x":91,"y":91,"width":92,"height":743,"rx":94,"fill":95,"stroke":96,"style":97},"316",[99,745,738],{"x":101,"y":102,"fill":96,"style":103},[76,747],{"x":296,"y":106,"width":748,"height":749,"rx":109,"fill":150,"stroke":150,"style":151},"660.0","51.0",[99,751,755],{"x":752,"y":753,"fill":96,"style":754,"textAnchor":127},"86.0","77.0","font-size:13px;font-weight:700","Hero: loading=eager, fetchpriority=high, preload",[99,757,760],{"x":752,"y":758,"fill":96,"style":759,"textAnchor":127},"94.0","font-size:12px","Exactly one per page",[76,762],{"x":296,"y":763,"width":748,"height":749,"rx":109,"fill":150,"stroke":150,"style":151},"119.0",[99,765,766],{"x":752,"y":341,"fill":96,"style":754,"textAnchor":127},"sizes matched to the layout",[99,768,770],{"x":752,"y":769,"fill":96,"style":759,"textAnchor":127},"157.0","Per usage, not a global 100vw",[76,772],{"x":296,"y":773,"width":748,"height":749,"rx":109,"fill":150,"stroke":150,"style":151},"182.0",[99,775,777],{"x":752,"y":776,"fill":96,"style":754,"textAnchor":127},"203.0","Formats: avif, webp",[99,779,781],{"x":752,"y":780,"fill":96,"style":759,"textAnchor":127},"220.0","With CDN caching of transforms",[76,783],{"x":296,"y":784,"width":748,"height":749,"rx":109,"fill":150,"stroke":150,"style":151},"245.0",[99,786,788],{"x":752,"y":787,"fill":96,"style":754,"textAnchor":127},"266.0","Dimensions always set",[99,790,792],{"x":752,"y":791,"fill":96,"style":759,"textAnchor":127},"283.0","No layout shift on load",[293,794],{"x1":795,"y1":796,"x2":795,"y2":797,"stroke":96,"strokeWidth":298,"style":798},"43.0","95.5","130.5","stroke-opacity:0.3",[293,800],{"x1":795,"y1":801,"x2":795,"y2":802,"stroke":96,"strokeWidth":298,"style":798},"158.5","193.5",[293,804],{"x1":795,"y1":805,"x2":795,"y2":806,"stroke":96,"strokeWidth":298,"style":798},"221.5","256.5",[808,809],"circle",{"cx":795,"cy":810,"r":811,"fill":150},"81.5","13",[99,813,91],{"x":795,"y":752,"fill":81,"style":754,"textAnchor":364},[808,815],{"cx":795,"cy":816,"r":811,"fill":150},"144.5",[99,818,820],{"x":795,"y":819,"fill":81,"style":754,"textAnchor":364},"149.0","2",[808,822],{"cx":795,"cy":823,"r":811,"fill":150},"207.5",[99,825,315],{"x":795,"y":826,"fill":81,"style":754,"textAnchor":364},"212.0",[808,828],{"cx":795,"cy":829,"r":811,"fill":150},"270.5",[99,831,300],{"x":795,"y":832,"fill":81,"style":754,"textAnchor":364},"275.0",[178,834,836],{"id":835},"verification","Verification",[15,838,839,840,842,843,846],{},"At mobile and desktop widths, the hero request should start during HTML parsing at High priority, initiated by the preload, and ",[30,841,214],{}," should be a sensibly sized AVIF. Lighthouse's LCP image audits (\"Largest Contentful Paint image was lazily loaded\", \"Preload LCP image\") should pass. In RUM, ",[30,844,845],{},"resourceLoadDelay"," for the hero should be small.",[178,848,850],{"id":849},"worked-example-a-nuxt-content-site","Worked Example: A Nuxt Content Site",[15,852,853,854,857,858,860,861,196,864,37,867,870,871,873,874,876],{},"A documentation site on Nuxt used ",[30,855,856],{},"\u003CNuxtImg>"," everywhere with a global preset setting ",[30,859,55],{},", including on the landing page's hero illustration. LCP p75 on mobile was 3.2s, with 1.1s of load delay. Adding ",[30,862,863],{},"loading=\"eager\"",[30,865,866],{},"fetchpriority=\"high\"",[30,868,869],{},"preload"," to the hero, and correcting ",[30,872,48],{}," for the two-column layout (it had defaulted to ",[30,875,62],{},", over-fetching 2x on desktop), brought LCP p75 to 2.0s and cut hero bytes by 45% on desktop.",[178,878,880],{"id":879},"providers-and-production-caching","Providers and Production Caching",[15,882,883,884,887],{},"Both frameworks can transform images at build time (static) or on request (server or CDN provider). For static Astro builds, images are generated during the build and served as files. Nuxt Image's default IPX provider transforms on request in server deployments; in production, put a CDN in front with long caching for transformed URLs, or switch to an image CDN provider (Cloudflare, Cloudinary, imgix, Vercel) so transforms happen at the edge. Whichever you use, confirm production responses carry ",[30,885,886],{},"Cache-Control: public, max-age=31536000, immutable"," and that the first request for a new size is not slow for every user — a common cause of slow LCP after deploys on server-transformed setups.",[178,889,891],{"id":890},"auditing-every-image-component-usage","Auditing Every Image Component Usage",[15,893,894,895,897,898,196,900,902,903,905,906,909,910,913,914,916],{},"Framework components make it easy to get one image right and hard to see whether all of them are. Add a lint or test step that scans templates for image component usages and flags: usages without ",[30,896,48],{},", more than one usage per page with ",[30,899,869],{},[30,901,55],{}," on components inside hero or above-the-fold layout slots, and remote images without explicit dimensions. A small script over the built HTML can do the same at the output level: for each page, list images with ",[30,904,866],{}," (should be at most one), images without ",[30,907,908],{},"width","\u002F",[30,911,912],{},"height",", and the LCP candidate's ",[30,915,195],{}," attribute. Run it in CI so a new template cannot silently regress the hero.",[178,918,920],{"id":919},"common-mistakes","Common Mistakes",[183,922,923,928,937,943],{},[186,924,925],{},[189,926,927],{},"Global lazy presets applied to the hero.",[186,929,930],{},[189,931,932,933,936],{},"Copying ",[30,934,935],{},"sizes=\"100vw\""," into every usage.",[186,938,939,942],{},[189,940,941],{},"Preloading several images."," Bandwidth contention delays the real LCP image.",[186,944,945,948],{},[189,946,947],{},"Serving IPX transforms without CDN caching."," Every visitor pays transform latency.",[178,950,952],{"id":951},"edge-cases","Edge Cases",[15,954,955,958],{},[189,956,957],{},"Remote images."," Both frameworks require allow-listing remote domains for transformation; otherwise they pass URLs through untransformed.",[15,960,961,964,965,968],{},[189,962,963],{},"SVG images."," Framework components usually pass SVGs through; use ",[30,966,967],{},"\u003Cimg>"," with dimensions directly.",[15,970,971,974,975,977,978,981,982,985,986,49],{},[189,972,973],{},"Art direction."," Astro's ",[30,976,40],{}," and Nuxt's ",[30,979,980],{},"\u003CNuxtPicture>"," focus on formats and widths; art-directed crops still need manual ",[30,983,984],{},"\u003Cpicture>"," with ",[30,987,988],{},"\u003Csource media>",[15,990,991,994],{},[189,992,993],{},"Content collections and Markdown."," Configure Markdown image handling so content images get the same treatment as template images.",[178,996,998],{"id":997},"faq","FAQ",[1000,1001,1004,1008],"details",{"className":1002},[1003],"faq-item",[1005,1006,1007],"summary",{},"Does Nuxt Image add a preload automatically?",[15,1009,1010,1011,1013],{},"Only when you set the ",[30,1012,869],{}," prop. Add it to the LCP image only.",[1000,1015,1017,1020],{"className":1016},[1003],[1005,1018,1019],{},"Does Astro lazy-load by default?",[15,1021,1022,1023,37,1025,1027],{},"Astro's image components default to lazy loading for images, so set ",[30,1024,863],{},[30,1026,866],{}," on the hero.",[1000,1029,1031,1034],{"className":1030},[1003],[1005,1032,1033],{},"Should I use Picture or Image?",[15,1035,1036,1039,1040,1042,1043,1046,1047,1049,1050,1052],{},[30,1037,1038],{},"Picture"," emits ",[30,1041,984],{}," with multiple formats (AVIF and WebP with fallback); ",[30,1044,1045],{},"Image"," emits a single ",[30,1048,967],{}," in one format. For heroes and important images, ",[30,1051,1038],{}," gives the best format coverage.",[1000,1054,1056,1059],{"className":1055},[1003],[1005,1057,1058],{},"How do I pick widths?",[15,1060,1061,1062,909,1065,1068],{},"Cover the rendered sizes at DPR 1–3 for each usage. Framework ",[30,1063,1064],{},"screens",[30,1066,1067],{},"widths"," settings let you define a ladder once; override per usage when an image renders much smaller.",[1000,1070,1072,1075],{"className":1071},[1003],[1005,1073,1074],{},"Do these components prevent CLS?",[15,1076,1077],{},"They emit width and height when they know the image's dimensions (local images, or remote images with explicit dimensions), which prevents CLS. For remote images without dimensions, pass them explicitly.",[1000,1079,1081,1084],{"className":1080},[1003],[1005,1082,1083],{},"Can I use an external image CDN with these components?",[15,1085,1086],{},"Yes — both support providers or custom loaders for image CDNs, letting the CDN do transforms while the component generates markup.",[1000,1088,1090,1093],{"className":1089},[1003],[1005,1091,1092],{},"What about images in Nuxt Content Markdown?",[15,1094,1095,1096,1099,1100,1103,1104,1106],{},"Nuxt Content can render Markdown images through a ",[30,1097,1098],{},"ProseImg"," component; override it to use ",[30,1101,1102],{},"NuxtImg"," with lazy loading, dimensions and sensible ",[30,1105,48],{},", so content images get the same optimisation as template images.",[178,1108,1110],{"id":1109},"related","Related",[183,1112,1113,1120,1127],{},[186,1114,1115,1119],{},[19,1116,1118],{"href":1117},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fgenerating-responsive-images-at-build-time\u002F","Generating responsive images at build time"," — the underlying pipeline.",[186,1121,1122,1126],{},[19,1123,1125],{"href":1124},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Ffixing-slow-lcp-in-vue-and-nuxt-apps\u002F","Fixing slow LCP in Vue and Nuxt apps"," — the wider Nuxt LCP picture.",[186,1128,1129,1133],{},[19,1130,1132],{"href":1131},"\u002Fframework-performance\u002Fastro-and-sveltekit-performance\u002Fchoosing-astro-client-directives\u002F","Choosing Astro client directives"," — Astro performance beyond images.",[1135,1136,1138],"script",{"type":1137},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Get Responsive Images Right with Nuxt Image and Astro\",\n  \"description\": \"How the image components in Nuxt and Astro generate responsive markup, and the settings that make them fast for both hero and below-the-fold images.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Nuxt Image: mark the hero explicitly\",\n      \"text\": \"Nuxt Image: mark the hero explicitly\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Astro: use Picture with explicit priority\",\n      \"text\": \"Astro: use Picture with explicit priority\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Set sizes from the layout, per usage\",\n      \"text\": \"For grid cards: sizes=\\\"(max-width: 600px) 50vw, (max-width: 1200px) 33vw, 300px\\\".\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Keep below-the-fold images lazy with dimensions\",\n      \"text\": \"Let the default lazy behaviour apply to everything else, and make sure width and height (or aspect ratio) are always set so nothing shifts.\"\n    }\n  ]\n}\n",[1135,1140,1141],{"type":1137},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Get Responsive Images Right with Nuxt Image and Astro\",\n  \"description\": \"How the image components in Nuxt and Astro generate responsive markup, and the settings that make them fast for both hero and below-the-fold images.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro\u002F\"\n  }\n}\n",[1135,1143,1144],{"type":1137},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Image & Media Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Responsive Images with srcset and sizes\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Responsive Images with Nuxt Image and Astro\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro\u002F\"\n    }\n  ]\n}\n",[1146,1147,1148],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}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 .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 pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}",{"title":381,"searchDepth":401,"depth":401,"links":1150},[1151,1152,1153,1160,1161,1162,1163,1164,1165,1166,1167],{"id":180,"depth":401,"text":181},{"id":238,"depth":401,"text":239},{"id":368,"depth":401,"text":369,"children":1154},[1155,1156,1157,1159],{"id":373,"depth":410,"text":374},{"id":650,"depth":410,"text":651},{"id":705,"depth":410,"text":1158},"3. Set sizes from the layout, per usage",{"id":722,"depth":410,"text":723},{"id":835,"depth":401,"text":836},{"id":849,"depth":401,"text":850},{"id":879,"depth":401,"text":880},{"id":890,"depth":401,"text":891},{"id":919,"depth":401,"text":920},{"id":951,"depth":401,"text":952},{"id":997,"depth":401,"text":998},{"id":1109,"depth":401,"text":1110},"How the image components in Nuxt and Astro generate responsive markup, and the settings that make them fast for both hero and below-the-fold images.","md",{"slug":1171,"type":1172,"breadcrumb":1173,"datePublished":1180,"dateModified":1180},"responsive-images-with-nuxt-image-and-astro","article",[1174,1176,1177,1178],{"name":1175,"url":909},"Home",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1179},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro",{"title":5,"description":1184},"Configure Nuxt Image and Astro's Image and Picture components for correct srcset, sizes, formats, priority and placeholders — and avoid the defaults that hurt LCP.","image-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fresponsive-images-with-nuxt-image-and-astro\u002Findex","8uEqhl9itNm8TBy5-K47dMDVznhpS-X0jen359FobtA",[1188,1192],{"title":1189,"path":1190,"stem":1191},"Generating Responsive Images at Build Time","\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fgenerating-responsive-images-at-build-time","image-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fgenerating-responsive-images-at-build-time\u002Findex",{"title":1193,"path":1194,"stem":1195},"sizes=auto vs Manual sizes for Lazy Images","\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fsizes-auto-vs-manual-sizes-for-lazy-images","image-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fsizes-auto-vs-manual-sizes-for-lazy-images\u002Findex",1791308076707]