[{"data":1,"prerenderedAt":1281},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element":3,"surroundings:\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element":1273},{"id":4,"title":5,"body":6,"description":1253,"extension":1254,"meta":1255,"navigation":1266,"path":1267,"seo":1268,"stem":1271,"__hash__":1272},"content\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element\u002Findex.md","Art Direction with the picture Element",{"type":7,"value":8,"toc":1235},"minimark",[9,14,55,58,171,176,232,236,245,251,264,273,344,348,353,579,583,706,709,713,849,853,858,967,971,974,978,987,991,1000,1004,1019,1023,1053,1057,1063,1074,1083,1092,1096,1119,1137,1160,1172,1184,1193,1197,1220,1225,1228,1231],[10,11,13],"h1",{"id":12},"how-to-do-art-direction-with-the-picture-element-without-hurting-lcp","How to Do Art Direction with the picture Element Without Hurting LCP",[15,16,17,18,23,24,28,29,33,34,37,38,42,43,46,47,50,51,54],"p",{},"This guide builds on ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002F","Responsive Images with srcset and sizes",", within ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". ",[30,31,32],"code",{},"srcset"," and ",[30,35,36],{},"sizes"," let the browser choose among ",[39,40,41],"em",{},"resolutions"," of the same image. Art direction is a different need: showing a ",[39,44,45],{},"different image"," — usually a different crop — at different breakpoints. A wide landscape hero on desktop becomes unreadable when scaled to a phone; a tighter portrait crop focused on the subject works better. The ",[30,48,49],{},"\u003Cpicture>"," element with ",[30,52,53],{},"\u003Csource media=\"…\">"," children expresses exactly that.",[15,56,57],{},"Done right, art direction improves both design and performance: phones download a smaller, purpose-cropped image rather than a scaled-down desktop file. Done wrong, it causes double downloads (when CSS hides one image and shows another), preloads of the wrong file, and layout shift when crops have different aspect ratios but the layout does not reserve the right space.",[15,59,60],{},[61,62,68,69,68,76,68,80,68,83,68,92,68,98,68,107,68,113,68,118,68,123,68,126,68,129,68,132,68,135,68,138,68,141,68,146,68,150,68,152,68,156,68,158,68,161,68,163,68,166,68,168,68],"svg",{"viewBox":63,"width":64,"role":65,"ariaLabel":66,"style":67},"0 0 760 228","100%","img","Comparison of serving a scaled-down desktop hero to mobile versus an art-directed portrait crop.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[70,71],"rect",{"className":72,"x":74,"y":74,"width":64,"height":64,"fill":75},[73],"svg-canvas","0","#ffffff",[77,78,79],"title",{},"Scaled image vs art-directed image on mobile",[81,82,66],"desc",{},[70,84],{"x":85,"y":85,"width":86,"height":87,"rx":88,"fill":89,"stroke":90,"style":91},"1","758","226","10","none","currentColor","stroke-opacity:0.18",[93,94,79],"text",{"x":95,"y":96,"fill":90,"style":97},"28.0","34.0","font-size:16px;font-weight:700",[70,99],{"x":95,"y":100,"width":101,"height":102,"rx":103,"fill":104,"stroke":105,"style":106},"56.0","340.0","150.0","6","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[93,108,112],{"x":109,"y":110,"fill":90,"style":111},"42.0","82.0","font-size:14px;font-weight:700","Scaled desktop crop",[93,114,117],{"x":109,"y":115,"fill":90,"style":116},"108.0","font-size:12.5px;font-weight:700","•",[93,119,122],{"x":100,"y":115,"fill":90,"style":120,"textAnchor":121},"font-size:12.5px","start","16:9 landscape scaled to 390px wide",[93,124,117],{"x":109,"y":125,"fill":90,"style":116},"132.0",[93,127,128],{"x":100,"y":125,"fill":90,"style":120,"textAnchor":121},"Subject tiny, text over busy areas",[93,130,117],{"x":109,"y":131,"fill":90,"style":116},"156.0",[93,133,134],{"x":100,"y":131,"fill":90,"style":120,"textAnchor":121},"Downloads 1200w file (DPR 3)",[93,136,117],{"x":109,"y":137,"fill":90,"style":116},"180.0",[93,139,140],{"x":100,"y":137,"fill":90,"style":120,"textAnchor":121},"~220KB AVIF",[70,142],{"x":143,"y":100,"width":101,"height":102,"rx":103,"fill":144,"stroke":144,"style":145},"392.0","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[93,147,149],{"x":148,"y":110,"fill":90,"style":111},"406.0","Art-directed mobile crop",[93,151,117],{"x":148,"y":115,"fill":90,"style":116},[93,153,155],{"x":154,"y":115,"fill":90,"style":120,"textAnchor":121},"420.0","4:5 portrait crop on the subject",[93,157,117],{"x":148,"y":125,"fill":90,"style":116},[93,159,160],{"x":154,"y":125,"fill":90,"style":120,"textAnchor":121},"Readable composition",[93,162,117],{"x":148,"y":131,"fill":90,"style":116},[93,164,165],{"x":154,"y":131,"fill":90,"style":120,"textAnchor":121},"Downloads 800w mobile crop",[93,167,117],{"x":148,"y":137,"fill":90,"style":116},[93,169,170],{"x":154,"y":137,"fill":90,"style":120,"textAnchor":121},"~85KB AVIF",[172,173,175],"h2",{"id":174},"rapid-diagnosis","Rapid Diagnosis",[177,178,179,195,220,226],"ul",{},[180,181,182,186,187,190,191,194],"li",{},[183,184,185],"strong",{},"Check how mobile and desktop heroes differ today."," Are they separate ",[30,188,189],{},"\u003Cimg>"," elements toggled with CSS ",[30,192,193],{},"display: none","? That downloads both in many cases.",[180,196,197,203,204,33,207,209,210,203,212,215,216,219],{},[183,198,199,200,202],{},"Inspect ",[30,201,49],{}," sources"," for ",[30,205,206],{},"media",[30,208,32],{},", and the fallback ",[30,211,189],{},[30,213,214],{},"width","\u002F",[30,217,218],{},"height",".",[180,221,222,225],{},[183,223,224],{},"Check the preload."," If the hero is preloaded, does the preload match the source each breakpoint chooses?",[180,227,228,231],{},[183,229,230],{},"Check CLS on resize and load."," Different aspect ratios need matching reserved space per breakpoint.",[172,233,235],{"id":234},"root-cause-analysis","Root Cause Analysis",[15,237,238,241,242,244],{},[183,239,240],{},"1. CSS-toggled duplicate images."," Two ",[30,243,189],{}," elements, one hidden per breakpoint — both may be downloaded, and the preload scanner fetches both.",[15,246,247,250],{},[183,248,249],{},"2. Preload mismatch."," A single preload for the desktop file makes mobile download it too, then the correct mobile crop.",[15,252,253,256,257,68,259,215,261,263],{},[183,254,255],{},"3. Aspect-ratio mismatch."," The ",[30,258,189],{},[30,260,214],{},[30,262,218],{}," describe one crop; at other breakpoints the actual image has a different ratio, so the reserved box is wrong.",[15,265,266,269,270,272],{},[183,267,268],{},"4. No srcset within sources."," Art-directed sources without ",[30,271,32],{}," serve one resolution to all densities.",[15,274,275],{},[61,276,68,279,68,282,68,285,68,287,68,290,68,292,68,299,68,306,68,311,68,315,68,319,68,323,68,326,68,331,68,335,68,339,68,342,68],{"viewBox":277,"width":64,"role":65,"ariaLabel":278,"style":67},"0 0 760 194","Bar chart of bytes downloaded for a mobile hero under four implementations of mobile and desktop crops.",[70,280],{"className":281,"x":74,"y":74,"width":64,"height":64,"fill":75},[73],[77,283,284],{},"Mobile hero bytes by implementation",[81,286,278],{},[70,288],{"x":85,"y":85,"width":86,"height":289,"rx":88,"fill":89,"stroke":90,"style":91},"192",[93,291,284],{"x":95,"y":96,"fill":90,"style":97},[93,293,298],{"x":294,"y":295,"fill":90,"style":296,"textAnchor":297},"225.8","70.0","font-size:13px","end","Two imgs toggled with CSS",[70,300],{"x":301,"y":100,"width":302,"height":303,"rx":304,"fill":104,"stroke":105,"style":305},"237.8","430.2","19","3","fill-opacity:0.7;stroke-opacity:0.9",[93,307,310],{"x":308,"y":295,"fill":90,"style":309},"674.0","font-size:12px;font-weight:600","410KB",[93,312,314],{"x":294,"y":313,"fill":90,"style":296,"textAnchor":297},"101.0","picture + desktop-only preload",[70,316],{"x":301,"y":317,"width":318,"height":303,"rx":304,"fill":104,"stroke":105,"style":305},"87.0","320.0",[93,320,322],{"x":321,"y":313,"fill":90,"style":309},"563.8","305KB",[93,324,325],{"x":294,"y":125,"fill":90,"style":296,"textAnchor":297},"picture + matching media preloads",[70,327],{"x":301,"y":328,"width":329,"height":303,"rx":304,"fill":144,"stroke":144,"style":330},"118.0","89.2","fill-opacity:0.55;stroke-opacity:0.9",[93,332,334],{"x":333,"y":125,"fill":90,"style":309},"333.0","85KB",[93,336,338],{"x":294,"y":337,"fill":90,"style":296,"textAnchor":297},"163.0","picture + srcset per source",[70,340],{"x":301,"y":341,"width":329,"height":303,"rx":304,"fill":144,"stroke":144,"style":330},"149.0",[93,343,334],{"x":333,"y":337,"fill":90,"style":309},[172,345,347],{"id":346},"step-by-step-resolution","Step-by-Step Resolution",[349,350,352],"h3",{"id":351},"_1-express-crops-with-picture-and-media-queries","1. Express crops with picture and media queries",[354,355,360],"pre",{"className":356,"code":357,"language":358,"meta":359,"style":359},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Cpicture>\n  \u003Csource media=\"(max-width: 699px)\" type=\"image\u002Favif\"\n          srcset=\"\u002Fimg\u002Fhero-portrait-480.avif 480w, \u002Fimg\u002Fhero-portrait-800.avif 800w\" sizes=\"100vw\"\n          width=\"800\" height=\"1000\">\n  \u003Csource media=\"(min-width: 700px)\" type=\"image\u002Favif\"\n          srcset=\"\u002Fimg\u002Fhero-wide-1200.avif 1200w, \u002Fimg\u002Fhero-wide-2000.avif 2000w\" sizes=\"100vw\"\n          width=\"2000\" height=\"1125\">\n  \u003Cimg src=\"\u002Fimg\u002Fhero-wide-1200.jpg\" width=\"2000\" height=\"1125\" alt=\"Hiker on a ridge at sunrise\"\n       fetchpriority=\"high\">\n\u003C\u002Fpicture>\n\u003C!-- trade-off: width\u002Fheight on \u003Csource> (supported in modern browsers) lets each\n     crop reserve its own aspect ratio; older browsers fall back to the img's\n     dimensions, so CSS aspect-ratio per breakpoint is a useful backup. -->\n","html","",[30,361,362,378,406,425,446,466,482,501,537,550,560,567,573],{"__ignoreMap":359},[363,364,367,371,375],"span",{"class":365,"line":366},"line",1,[363,368,370],{"class":369},"saISM","\u003C",[363,372,374],{"class":373},"sZBmE","picture",[363,376,377],{"class":369},">\n",[363,379,381,384,387,391,394,398,401,403],{"class":365,"line":380},2,[363,382,383],{"class":369},"  \u003C",[363,385,386],{"class":373},"source",[363,388,390],{"class":389},"sPXB4"," media",[363,392,393],{"class":369},"=",[363,395,397],{"class":396},"sZ8jY","\"(max-width: 699px)\"",[363,399,400],{"class":389}," type",[363,402,393],{"class":369},[363,404,405],{"class":396},"\"image\u002Favif\"\n",[363,407,409,412,414,417,420,422],{"class":365,"line":408},3,[363,410,411],{"class":389},"          srcset",[363,413,393],{"class":369},[363,415,416],{"class":396},"\"\u002Fimg\u002Fhero-portrait-480.avif 480w, \u002Fimg\u002Fhero-portrait-800.avif 800w\"",[363,418,419],{"class":389}," sizes",[363,421,393],{"class":369},[363,423,424],{"class":396},"\"100vw\"\n",[363,426,428,431,433,436,439,441,444],{"class":365,"line":427},4,[363,429,430],{"class":389},"          width",[363,432,393],{"class":369},[363,434,435],{"class":396},"\"800\"",[363,437,438],{"class":389}," height",[363,440,393],{"class":369},[363,442,443],{"class":396},"\"1000\"",[363,445,377],{"class":369},[363,447,449,451,453,455,457,460,462,464],{"class":365,"line":448},5,[363,450,383],{"class":369},[363,452,386],{"class":373},[363,454,390],{"class":389},[363,456,393],{"class":369},[363,458,459],{"class":396},"\"(min-width: 700px)\"",[363,461,400],{"class":389},[363,463,393],{"class":369},[363,465,405],{"class":396},[363,467,469,471,473,476,478,480],{"class":365,"line":468},6,[363,470,411],{"class":389},[363,472,393],{"class":369},[363,474,475],{"class":396},"\"\u002Fimg\u002Fhero-wide-1200.avif 1200w, \u002Fimg\u002Fhero-wide-2000.avif 2000w\"",[363,477,419],{"class":389},[363,479,393],{"class":369},[363,481,424],{"class":396},[363,483,485,487,489,492,494,496,499],{"class":365,"line":484},7,[363,486,430],{"class":389},[363,488,393],{"class":369},[363,490,491],{"class":396},"\"2000\"",[363,493,438],{"class":389},[363,495,393],{"class":369},[363,497,498],{"class":396},"\"1125\"",[363,500,377],{"class":369},[363,502,504,506,508,511,513,516,519,521,523,525,527,529,532,534],{"class":365,"line":503},8,[363,505,383],{"class":369},[363,507,65],{"class":373},[363,509,510],{"class":389}," src",[363,512,393],{"class":369},[363,514,515],{"class":396},"\"\u002Fimg\u002Fhero-wide-1200.jpg\"",[363,517,518],{"class":389}," width",[363,520,393],{"class":369},[363,522,491],{"class":396},[363,524,438],{"class":389},[363,526,393],{"class":369},[363,528,498],{"class":396},[363,530,531],{"class":389}," alt",[363,533,393],{"class":369},[363,535,536],{"class":396},"\"Hiker on a ridge at sunrise\"\n",[363,538,540,543,545,548],{"class":365,"line":539},9,[363,541,542],{"class":389},"       fetchpriority",[363,544,393],{"class":369},[363,546,547],{"class":396},"\"high\"",[363,549,377],{"class":369},[363,551,553,556,558],{"class":365,"line":552},10,[363,554,555],{"class":369},"\u003C\u002F",[363,557,374],{"class":373},[363,559,377],{"class":369},[363,561,563],{"class":365,"line":562},11,[363,564,566],{"class":565},"sjfSM","\u003C!-- trade-off: width\u002Fheight on \u003Csource> (supported in modern browsers) lets each\n",[363,568,570],{"class":365,"line":569},12,[363,571,572],{"class":565},"     crop reserve its own aspect ratio; older browsers fall back to the img's\n",[363,574,576],{"class":365,"line":575},13,[363,577,578],{"class":565},"     dimensions, so CSS aspect-ratio per breakpoint is a useful backup. -->\n",[349,580,582],{"id":581},"_2-preload-per-breakpoint-with-matching-media","2. Preload per breakpoint with matching media",[354,584,586],{"className":356,"code":585,"language":358,"meta":359,"style":359},"\u003Clink rel=\"preload\" as=\"image\" fetchpriority=\"high\" media=\"(max-width: 699px)\"\n      imagesrcset=\"\u002Fimg\u002Fhero-portrait-480.avif 480w, \u002Fimg\u002Fhero-portrait-800.avif 800w\" imagesizes=\"100vw\">\n\u003Clink rel=\"preload\" as=\"image\" fetchpriority=\"high\" media=\"(min-width: 700px)\"\n      imagesrcset=\"\u002Fimg\u002Fhero-wide-1200.avif 1200w, \u002Fimg\u002Fhero-wide-2000.avif 2000w\" imagesizes=\"100vw\">\n\u003C!-- trade-off: the preload media queries must match the \u003Csource> media exactly,\n     or the browser preloads one file and renders another. Generate both from one\n     configuration. -->\n",[30,587,588,625,644,675,691,696,701],{"__ignoreMap":359},[363,589,590,592,595,598,600,603,606,608,611,614,616,618,620,622],{"class":365,"line":366},[363,591,370],{"class":369},[363,593,594],{"class":373},"link",[363,596,597],{"class":389}," rel",[363,599,393],{"class":369},[363,601,602],{"class":396},"\"preload\"",[363,604,605],{"class":389}," as",[363,607,393],{"class":369},[363,609,610],{"class":396},"\"image\"",[363,612,613],{"class":389}," fetchpriority",[363,615,393],{"class":369},[363,617,547],{"class":396},[363,619,390],{"class":389},[363,621,393],{"class":369},[363,623,624],{"class":396},"\"(max-width: 699px)\"\n",[363,626,627,630,632,634,637,639,642],{"class":365,"line":380},[363,628,629],{"class":389},"      imagesrcset",[363,631,393],{"class":369},[363,633,416],{"class":396},[363,635,636],{"class":389}," imagesizes",[363,638,393],{"class":369},[363,640,641],{"class":396},"\"100vw\"",[363,643,377],{"class":369},[363,645,646,648,650,652,654,656,658,660,662,664,666,668,670,672],{"class":365,"line":408},[363,647,370],{"class":369},[363,649,594],{"class":373},[363,651,597],{"class":389},[363,653,393],{"class":369},[363,655,602],{"class":396},[363,657,605],{"class":389},[363,659,393],{"class":369},[363,661,610],{"class":396},[363,663,613],{"class":389},[363,665,393],{"class":369},[363,667,547],{"class":396},[363,669,390],{"class":389},[363,671,393],{"class":369},[363,673,674],{"class":396},"\"(min-width: 700px)\"\n",[363,676,677,679,681,683,685,687,689],{"class":365,"line":427},[363,678,629],{"class":389},[363,680,393],{"class":369},[363,682,475],{"class":396},[363,684,636],{"class":389},[363,686,393],{"class":369},[363,688,641],{"class":396},[363,690,377],{"class":369},[363,692,693],{"class":365,"line":448},[363,694,695],{"class":565},"\u003C!-- trade-off: the preload media queries must match the \u003Csource> media exactly,\n",[363,697,698],{"class":365,"line":468},[363,699,700],{"class":565},"     or the browser preloads one file and renders another. Generate both from one\n",[363,702,703],{"class":365,"line":484},[363,704,705],{"class":565},"     configuration. -->\n",[15,707,708],{},"Expected outcome: each device downloads exactly one crop at the right resolution, early.",[349,710,712],{"id":711},"_3-reserve-the-right-box-per-breakpoint","3. Reserve the right box per breakpoint",[354,714,718],{"className":715,"code":716,"language":717,"meta":359,"style":359},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast",".hero img { width: 100%; height: auto; }\n@media (max-width: 699px) { .hero img { aspect-ratio: 4 \u002F 5; } }\n@media (min-width: 700px) { .hero img { aspect-ratio: 16 \u002F 9; } }\n\u002F* trade-off: hard-coded ratios must change when designers change crops; keep\n   them next to the image configuration. *\u002F\n","css",[30,719,720,756,801,839,844],{"__ignoreMap":359},[363,721,722,725,728,731,733,736,739,743,746,748,750,753],{"class":365,"line":366},[363,723,724],{"class":389},".hero",[363,726,727],{"class":373}," img",[363,729,730],{"class":369}," { ",[363,732,214],{"class":389},[363,734,735],{"class":369},": ",[363,737,738],{"class":389},"100",[363,740,742],{"class":741},"sPARh","%",[363,744,745],{"class":369},"; ",[363,747,218],{"class":389},[363,749,735],{"class":369},[363,751,752],{"class":389},"auto",[363,754,755],{"class":369},"; }\n",[363,757,758,761,764,767,769,772,775,778,780,782,784,787,789,792,795,798],{"class":365,"line":380},[363,759,760],{"class":741},"@media",[363,762,763],{"class":369}," (",[363,765,766],{"class":389},"max-width",[363,768,735],{"class":369},[363,770,771],{"class":389},"699",[363,773,774],{"class":741},"px",[363,776,777],{"class":369},") { ",[363,779,724],{"class":389},[363,781,727],{"class":373},[363,783,730],{"class":369},[363,785,786],{"class":389},"aspect-ratio",[363,788,735],{"class":369},[363,790,791],{"class":389},"4",[363,793,794],{"class":369}," \u002F ",[363,796,797],{"class":389},"5",[363,799,800],{"class":369},"; } }\n",[363,802,803,805,807,810,812,815,817,819,821,823,825,827,829,832,834,837],{"class":365,"line":408},[363,804,760],{"class":741},[363,806,763],{"class":369},[363,808,809],{"class":389},"min-width",[363,811,735],{"class":369},[363,813,814],{"class":389},"700",[363,816,774],{"class":741},[363,818,777],{"class":369},[363,820,724],{"class":389},[363,822,727],{"class":373},[363,824,730],{"class":369},[363,826,786],{"class":389},[363,828,735],{"class":369},[363,830,831],{"class":389},"16",[363,833,794],{"class":369},[363,835,836],{"class":389},"9",[363,838,800],{"class":369},[363,840,841],{"class":365,"line":427},[363,842,843],{"class":565},"\u002F* trade-off: hard-coded ratios must change when designers change crops; keep\n",[363,845,846],{"class":365,"line":448},[363,847,848],{"class":565},"   them next to the image configuration. *\u002F\n",[349,850,852],{"id":851},"_4-remove-css-toggled-duplicates","4. Remove CSS-toggled duplicates",[15,854,855,856,219],{},"Replace any pair of hidden\u002Fshown images with a single ",[30,857,49],{},[15,859,860],{},[61,861,68,864,68,867,68,870,68,872,68,875,68,877,68,882,68,888,68,893,68,896,68,900,68,904,68,907,68,911,68,915,68,918,68,922,68,926,68,933,68,937,68,941,68,946,68,949,68,952,68,955,68,958,68,961,68,964,68],{"viewBox":862,"width":64,"role":65,"ariaLabel":863,"style":67},"0 0 760 318","Four checks for an art-directed image that downloads once and stays stable.",[70,865],{"className":866,"x":74,"y":74,"width":64,"height":64,"fill":75},[73],[77,868,869],{},"Art direction checklist",[81,871,863],{},[70,873],{"x":85,"y":85,"width":86,"height":874,"rx":88,"fill":89,"stroke":90,"style":91},"316",[93,876,869],{"x":95,"y":96,"fill":90,"style":97},[70,878],{"x":879,"y":100,"width":880,"height":881,"rx":103,"fill":144,"stroke":144,"style":145},"72.0","660.0","51.0",[93,883,887],{"x":884,"y":885,"fill":90,"style":886,"textAnchor":121},"86.0","77.0","font-size:13px;font-weight:700","One picture element",[93,889,892],{"x":884,"y":890,"fill":90,"style":891,"textAnchor":121},"94.0","font-size:12px","No CSS-toggled duplicate images",[70,894],{"x":879,"y":895,"width":880,"height":881,"rx":103,"fill":144,"stroke":144,"style":145},"119.0",[93,897,899],{"x":884,"y":898,"fill":90,"style":886,"textAnchor":121},"140.0","srcset + sizes inside each source",[93,901,903],{"x":884,"y":902,"fill":90,"style":891,"textAnchor":121},"157.0","Resolution choice within each crop",[70,905],{"x":879,"y":906,"width":880,"height":881,"rx":103,"fill":144,"stroke":144,"style":145},"182.0",[93,908,910],{"x":884,"y":909,"fill":90,"style":886,"textAnchor":121},"203.0","Media-matched preloads for the LCP image",[93,912,914],{"x":884,"y":913,"fill":90,"style":891,"textAnchor":121},"220.0","Same media queries as the sources",[70,916],{"x":879,"y":917,"width":880,"height":881,"rx":103,"fill":144,"stroke":144,"style":145},"245.0",[93,919,921],{"x":884,"y":920,"fill":90,"style":886,"textAnchor":121},"266.0","Per-breakpoint aspect ratio",[93,923,925],{"x":884,"y":924,"fill":90,"style":891,"textAnchor":121},"283.0","width\u002Fheight on sources or CSS aspect-ratio",[365,927],{"x1":928,"y1":929,"x2":928,"y2":930,"stroke":90,"strokeWidth":931,"style":932},"43.0","95.5","130.5","1.5","stroke-opacity:0.3",[365,934],{"x1":928,"y1":935,"x2":928,"y2":936,"stroke":90,"strokeWidth":931,"style":932},"158.5","193.5",[365,938],{"x1":928,"y1":939,"x2":928,"y2":940,"stroke":90,"strokeWidth":931,"style":932},"221.5","256.5",[942,943],"circle",{"cx":928,"cy":944,"r":945,"fill":144},"81.5","13",[93,947,85],{"x":928,"y":884,"fill":75,"style":886,"textAnchor":948},"middle",[942,950],{"cx":928,"cy":951,"r":945,"fill":144},"144.5",[93,953,954],{"x":928,"y":341,"fill":75,"style":886,"textAnchor":948},"2",[942,956],{"cx":928,"cy":957,"r":945,"fill":144},"207.5",[93,959,304],{"x":928,"y":960,"fill":75,"style":886,"textAnchor":948},"212.0",[942,962],{"cx":928,"cy":963,"r":945,"fill":144},"270.5",[93,965,791],{"x":928,"y":966,"fill":75,"style":886,"textAnchor":948},"275.0",[172,968,970],{"id":969},"verification","Verification",[15,972,973],{},"At mobile and desktop widths, the Network panel should show a single hero request each, for the expected crop and resolution, initiated by the preload or parser at High priority. Layout Shift Regions should show no shifts when the image loads. LCP on mobile should improve if mobile previously downloaded desktop or duplicate files.",[172,975,977],{"id":976},"worked-example-a-fashion-campaign-page","Worked Example: A Fashion Campaign Page",[15,979,980,981,983,984,986],{},"A campaign page used two ",[30,982,189],{}," elements — a landscape desktop hero and a portrait mobile hero — hiding one with CSS. Mobile devices downloaded both (the preload scanner fetched both before CSS applied), 520KB in total, and LCP p75 on mobile was 3.3s. Replacing them with one ",[30,985,49],{},", adding media-matched preloads and per-breakpoint aspect ratios cut mobile hero bytes to 95KB and LCP p75 to 2.2s, with a single layout-stable image at every width.",[172,988,990],{"id":989},"when-not-to-art-direct","When Not to Art-Direct",[15,992,993,994,33,996,999],{},"Art direction adds assets to produce and maintain, so use it where composition genuinely fails at small sizes: wide scenes with small subjects, images with embedded text, banners with important details at the edges. For most product and article images, a single crop with ",[30,995,32],{},[30,997,998],{},"object-position"," focal points is enough. Image CDNs with automatic smart cropping can also generate breakpoint crops from one master on request, which reduces manual work when art direction is needed at scale.",[172,1001,1003],{"id":1002},"testing-art-directed-images-across-breakpoints","Testing Art-Directed Images Across Breakpoints",[15,1005,1006,1007,1010,1011,1014,1015,1018],{},"Art direction multiplies the states you must check. Automate it: a Playwright script that loads the page at each breakpoint you define (and one pixel either side of each media query boundary), records the hero request URL, the ",[30,1008,1009],{},"currentSrc",", the rendered box and any layout shifts, and fails if a viewport downloads more than one hero file or if the rendered aspect ratio differs from the declared one. Boundary widths are where mismatches between preload media and source media most often hide — a preload for ",[30,1012,1013],{},"max-width: 699px"," and a source for ",[30,1016,1017],{},"max-width: 700px"," disagree at exactly 700 pixels, and someone's tablet will be that width.",[172,1020,1022],{"id":1021},"common-mistakes","Common Mistakes",[177,1024,1025,1035,1041,1047],{},[180,1026,1027,1034],{},[183,1028,1029,1030,1033],{},"Forgetting ",[30,1031,1032],{},"type"," on sources."," Without it, browsers may pick formats they cannot decode.",[180,1036,1037,1040],{},[183,1038,1039],{},"Ordering sources wrong."," The first matching source wins; put the most specific media queries first.",[180,1042,1043,1046],{},[183,1044,1045],{},"Preloading without media."," Forces every device to download one crop.",[180,1048,1049,1052],{},[183,1050,1051],{},"Changing crops without changing dimensions."," Reserved space no longer matches.",[172,1054,1056],{"id":1055},"edge-cases","Edge Cases",[15,1058,1059,1062],{},[183,1060,1061],{},"Combining format and art direction."," Each crop needs its own sources per format (AVIF, WebP), multiplying entries; order by media first, then type.",[15,1064,1065,68,1068,1070,1071,1073],{},[183,1066,1067],{},"Container-based layouts.",[30,1069,206],{}," queries respond to the viewport, not the container; for components whose size depends on their container, ",[30,1072,36],{}," (and future container-aware features) are the only lever.",[15,1075,1076,68,1079,1082],{},[183,1077,1078],{},"Dark mode crops.",[30,1080,1081],{},"\u003Csource media=\"(prefers-color-scheme: dark)\">"," can serve dark-optimised images, with the same preload caveats.",[15,1084,1085,68,1088,1091],{},[183,1086,1087],{},"Print.",[30,1089,1090],{},"media=\"print\""," sources let you serve print-friendly images without affecting screen performance.",[172,1093,1095],{"id":1094},"faq","FAQ",[1097,1098,1101,1105],"details",{"className":1099},[1100],"faq-item",[1102,1103,1104],"summary",{},"Does picture slow down image discovery?",[15,1106,1107,1108,1110,1111,33,1113,1115,1116,219],{},"No — the preload scanner understands ",[30,1109,49],{}," and evaluates ",[30,1112,206],{},[30,1114,1032],{}," to pick a source during HTML parsing, just as with ",[30,1117,1118],{},"\u003Cimg srcset>",[1097,1120,1122,1125],{"className":1121},[1100],[1102,1123,1124],{},"Can I use sizes inside each source?",[15,1126,1127,1128,1131,1132,33,1134,1136],{},"Yes, and you should: each ",[30,1129,1130],{},"\u003Csource>"," can have its own ",[30,1133,32],{},[30,1135,36],{},", so the browser picks the right resolution within the selected crop.",[1097,1138,1140,1143],{"className":1139},[1100],[1102,1141,1142],{},"Is width\u002Fheight on source elements supported?",[15,1144,1145,1146,33,1148,1150,1151,1153,1154,1156,1157,1159],{},"Modern browsers support ",[30,1147,214],{},[30,1149,218],{}," on ",[30,1152,1130],{}," within ",[30,1155,49],{}," to describe each candidate's aspect ratio. For older browsers, CSS ",[30,1158,786],{}," per breakpoint provides the same protection.",[1097,1161,1163,1166],{"className":1162},[1100],[1102,1164,1165],{},"Should the fallback img be the mobile or desktop crop?",[15,1167,1168,1169,1171],{},"The fallback is used when no source matches or ",[30,1170,49],{}," is unsupported. Make it the most broadly appropriate crop (often desktop, in JPEG) and ensure its dimensions match.",[1097,1173,1175,1178],{"className":1174},[1100],[1102,1176,1177],{},"How do I preload an art-directed hero in Next.js or Nuxt?",[15,1179,1180,1181,1183],{},"Framework image components may not handle art direction preloads automatically; add media-matched preload links in the document head yourself, generated from the same configuration as the ",[30,1182,49],{}," sources.",[1097,1185,1187,1190],{"className":1186},[1100],[1102,1188,1189],{},"Does art direction affect CLS on resize?",[15,1191,1192],{},"Resizing across a breakpoint swaps crops and may change layout, but CLS only counts unexpected shifts during normal page use, and window resizes are user-initiated. The important case is reserving the right box at load.",[172,1194,1196],{"id":1195},"related","Related",[177,1198,1199,1206,1213],{},[180,1200,1201,1205],{},[19,1202,1204],{"href":1203},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Ffixing-blurry-images-on-high-dpi-displays\u002F","Fixing blurry images on high-DPI displays"," — resolution choices within each crop.",[180,1207,1208,1212],{},[19,1209,1211],{"href":1210},"\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements\u002F","CSS background images as LCP elements"," — moving heroes into picture.",[180,1214,1215,1219],{},[19,1216,1218],{"href":1217},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Fusing-fetchpriority-to-prioritize-the-lcp-image\u002F","Using fetchpriority to prioritize the LCP image"," — prioritising the chosen crop.",[1221,1222,1224],"script",{"type":1223},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Do Art Direction with the picture Element Without Hurting LCP\",\n  \"description\": \"How to use the picture element for art-directed images — different crops for mobile and desktop — while keeping LCP fast and layout stable.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Express crops with picture and media queries\",\n      \"text\": \"Express crops with picture and media queries\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Preload per breakpoint with matching media\",\n      \"text\": \"Expected outcome: each device downloads exactly one crop at the right resolution, early.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Reserve the right box per breakpoint\",\n      \"text\": \"Reserve the right box per breakpoint\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Remove CSS-toggled duplicates\",\n      \"text\": \"Replace any pair of hidden\u002Fshown images with a single .\"\n    }\n  ]\n}\n",[1221,1226,1227],{"type":1223},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Do Art Direction with the picture Element Without Hurting LCP\",\n  \"description\": \"How to use the picture element for art-directed images — different crops for mobile and desktop — while keeping LCP fast and layout stable.\",\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\u002Fart-direction-with-the-picture-element\u002F\"\n  }\n}\n",[1221,1229,1230],{"type":1223},"\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\": \"Art Direction with the picture Element\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element\u002F\"\n    }\n  ]\n}\n",[1232,1233,1234],"style",{},"html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}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 .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}",{"title":359,"searchDepth":380,"depth":380,"links":1236},[1237,1238,1239,1245,1246,1247,1248,1249,1250,1251,1252],{"id":174,"depth":380,"text":175},{"id":234,"depth":380,"text":235},{"id":346,"depth":380,"text":347,"children":1240},[1241,1242,1243,1244],{"id":351,"depth":408,"text":352},{"id":581,"depth":408,"text":582},{"id":711,"depth":408,"text":712},{"id":851,"depth":408,"text":852},{"id":969,"depth":380,"text":970},{"id":976,"depth":380,"text":977},{"id":989,"depth":380,"text":990},{"id":1002,"depth":380,"text":1003},{"id":1021,"depth":380,"text":1022},{"id":1055,"depth":380,"text":1056},{"id":1094,"depth":380,"text":1095},{"id":1195,"depth":380,"text":1196},"How to use the picture element for art-directed images — different crops for mobile and desktop — while keeping LCP fast and layout stable.","md",{"slug":1256,"type":1257,"breadcrumb":1258,"datePublished":1265,"dateModified":1265},"art-direction-with-the-picture-element","article",[1259,1261,1262,1263],{"name":1260,"url":215},"Home",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1264},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element",{"title":1269,"description":1270},"Art Direction with the picture Element Without Hurting LCP","Serve different crops per breakpoint with picture and source media queries, keep the preload scanner happy, preload the right candidate and avoid CLS.","image-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element\u002Findex","wWNDyAFfH6GDn9AHp3uFSrHHv1_dEng5-e7yj62xV0U",[1274,1277],{"title":22,"path":1275,"stem":1276,"children":-1},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes","image-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Findex",{"title":1278,"path":1279,"stem":1280,"children":-1},"Fixing Blurry Images on High-DPI Displays","\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Ffixing-blurry-images-on-high-dpi-displays","image-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Ffixing-blurry-images-on-high-dpi-displays\u002Findex",1791308075383]