[{"data":1,"prerenderedAt":3584},["ShallowReactive",2],{"blog-post-/blog/en/image-optimization-website-speed":3,"related-posts-/blog/image-optimization-website-speed":3253},{"id":4,"title":5,"author":6,"body":7,"category":3236,"date":3237,"description":3238,"extension":3239,"featured":771,"image":3240,"meta":3241,"navigation":771,"path":3242,"readingTime":1153,"seo":3243,"stem":3244,"tags":3245,"tools":3250,"__hash__":3252},"content/blog/en/image-optimization-website-speed.md","Image Optimization for Website Speed: Complete 2026 Guide","Anything Tools Team",{"type":8,"value":9,"toc":3164},"minimark",[10,14,18,23,28,58,62,65,85,89,100,104,108,193,197,358,361,365,368,428,433,437,440,444,485,488,499,503,553,557,618,624,628,632,687,691,696,712,717,728,733,816,820,824,827,924,927,931,934,1045,1049,1052,1346,1350,1354,1399,1402,1408,1412,1432,1436,1547,1551,1627,1631,1634,1741,1745,1826,1830,1833,1837,1897,1901,1927,1931,1960,1964,1967,1998,2002,2039,2043,2046,2052,2055,2059,2063,2066,2096,2100,2103,2149,2153,2156,2255,2363,2367,2370,2440,2444,2448,2497,2501,2528,2532,2538,2542,2546,2676,2679,2693,2697,2804,2808,2813,2824,2829,2840,2844,2928,2932,2936,2939,2943,2946,2950,2953,2957,2960,2964,2967,2971,2974,2978,2981,3088,3092,3095,3121,3124,3128,3131,3151,3154,3160],[11,12,5],"h1",{"id":13},"image-optimization-for-website-speed-complete-2026-guide",[15,16,17],"p",{},"Images are the #1 cause of slow websites. This guide covers everything you need to know about image optimization for better performance, SEO, and user experience.",[19,20,22],"h2",{"id":21},"why-image-optimization-matters","Why Image Optimization Matters",[24,25,27],"h3",{"id":26},"the-numbers","The Numbers",[29,30,31,39,45,52],"ul",{},[32,33,34,35],"li",{},"Images account for ",[36,37,38],"strong",{},"50% of average page weight",[32,40,41,42],{},"A 1-second delay reduces conversions by ",[36,43,44],{},"7%",[32,46,47,48,51],{},"53% of users abandon sites that take ",[36,49,50],{},"3+ seconds"," to load",[32,53,54,55],{},"Google uses page speed as a ",[36,56,57],{},"ranking factor",[24,59,61],{"id":60},"core-web-vitals-impact","Core Web Vitals Impact",[15,63,64],{},"Images directly affect:",[29,66,67,73,79],{},[32,68,69,72],{},[36,70,71],{},"LCP (Largest Contentful Paint):"," The biggest image is often the LCP element",[32,74,75,78],{},[36,76,77],{},"CLS (Cumulative Layout Shift):"," Images without dimensions cause layout shifts",[32,80,81,84],{},[36,82,83],{},"INP (Interaction to Next Paint):"," Large images block the main thread",[19,86,88],{"id":87},"the-complete-optimization-checklist","The Complete Optimization Checklist",[90,91,96],"pre",{"className":92,"code":94,"language":95},[93],"language-text","✅ Choose right format (WebP/AVIF with fallbacks)\n✅ Resize to actual display size\n✅ Compress appropriately (70-85%)\n✅ Use responsive images (srcset)\n✅ Implement lazy loading\n✅ Set width and height attributes\n✅ Use CDN for delivery\n✅ Enable browser caching\n✅ Consider image sprites for icons\n✅ Use SVG for logos/icons\n","text",[97,98,94],"code",{"__ignoreMap":99},"",[19,101,103],{"id":102},"step-1-choose-the-right-format","Step 1: Choose the Right Format",[24,105,107],{"id":106},"format-decision-matrix","Format Decision Matrix",[109,110,111,127],"table",{},[112,113,114],"thead",{},[115,116,117,121,124],"tr",{},[118,119,120],"th",{},"Content Type",[118,122,123],{},"Best Format",[118,125,126],{},"Fallback",[128,129,130,142,153,163,173,184],"tbody",{},[115,131,132,136,139],{},[133,134,135],"td",{},"Photographs",[133,137,138],{},"AVIF → WebP",[133,140,141],{},"JPG",[115,143,144,147,150],{},[133,145,146],{},"Graphics/logos",[133,148,149],{},"SVG",[133,151,152],{},"PNG",[115,154,155,158,161],{},[133,156,157],{},"Screenshots",[133,159,160],{},"WebP lossless",[133,162,152],{},[115,164,165,168,170],{},[133,166,167],{},"Icons",[133,169,149],{},[133,171,172],{},"PNG sprite",[115,174,175,178,181],{},[133,176,177],{},"Animated",[133,179,180],{},"WebP",[133,182,183],{},"GIF",[115,185,186,189,191],{},[133,187,188],{},"Hero images",[133,190,138],{},[133,192,141],{},[24,194,196],{"id":195},"implementing-modern-formats","Implementing Modern Formats",[90,198,202],{"className":199,"code":200,"language":201,"meta":99,"style":99},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cpicture>\n  \u003Csource srcset=\"hero.avif\" type=\"image/avif\">\n  \u003Csource srcset=\"hero.webp\" type=\"image/webp\">\n  \u003Cimg src=\"hero.jpg\" alt=\"Hero image\" width=\"1200\" height=\"600\">\n\u003C/picture>\n","html",[97,203,204,220,259,290,348],{"__ignoreMap":99},[205,206,209,213,217],"span",{"class":207,"line":208},"line",1,[205,210,212],{"class":211},"sMK4o","\u003C",[205,214,216],{"class":215},"swJcz","picture",[205,218,219],{"class":211},">\n",[205,221,223,226,229,233,236,239,243,245,248,250,252,255,257],{"class":207,"line":222},2,[205,224,225],{"class":211},"  \u003C",[205,227,228],{"class":215},"source",[205,230,232],{"class":231},"spNyl"," srcset",[205,234,235],{"class":211},"=",[205,237,238],{"class":211},"\"",[205,240,242],{"class":241},"sfazB","hero.avif",[205,244,238],{"class":211},[205,246,247],{"class":231}," type",[205,249,235],{"class":211},[205,251,238],{"class":211},[205,253,254],{"class":241},"image/avif",[205,256,238],{"class":211},[205,258,219],{"class":211},[205,260,262,264,266,268,270,272,275,277,279,281,283,286,288],{"class":207,"line":261},3,[205,263,225],{"class":211},[205,265,228],{"class":215},[205,267,232],{"class":231},[205,269,235],{"class":211},[205,271,238],{"class":211},[205,273,274],{"class":241},"hero.webp",[205,276,238],{"class":211},[205,278,247],{"class":231},[205,280,235],{"class":211},[205,282,238],{"class":211},[205,284,285],{"class":241},"image/webp",[205,287,238],{"class":211},[205,289,219],{"class":211},[205,291,293,295,298,301,303,305,308,310,313,315,317,320,322,325,327,329,332,334,337,339,341,344,346],{"class":207,"line":292},4,[205,294,225],{"class":211},[205,296,297],{"class":215},"img",[205,299,300],{"class":231}," src",[205,302,235],{"class":211},[205,304,238],{"class":211},[205,306,307],{"class":241},"hero.jpg",[205,309,238],{"class":211},[205,311,312],{"class":231}," alt",[205,314,235],{"class":211},[205,316,238],{"class":211},[205,318,319],{"class":241},"Hero image",[205,321,238],{"class":211},[205,323,324],{"class":231}," width",[205,326,235],{"class":211},[205,328,238],{"class":211},[205,330,331],{"class":241},"1200",[205,333,238],{"class":211},[205,335,336],{"class":231}," height",[205,338,235],{"class":211},[205,340,238],{"class":211},[205,342,343],{"class":241},"600",[205,345,238],{"class":211},[205,347,219],{"class":211},[205,349,351,354,356],{"class":207,"line":350},5,[205,352,353],{"class":211},"\u003C/",[205,355,216],{"class":215},[205,357,219],{"class":211},[15,359,360],{},"Browser picks the first format it supports.",[24,362,364],{"id":363},"file-size-comparison","File Size Comparison",[15,366,367],{},"Same photo at 1200px width:",[109,369,370,383],{},[112,371,372],{},[115,373,374,377,380],{},[118,375,376],{},"Format",[118,378,379],{},"Size",[118,381,382],{},"Savings",[128,384,385,395,406,417],{},[115,386,387,389,392],{},[133,388,152],{},[133,390,391],{},"2.8 MB",[133,393,394],{},"-",[115,396,397,400,403],{},[133,398,399],{},"JPG 85%",[133,401,402],{},"280 KB",[133,404,405],{},"90%",[115,407,408,411,414],{},[133,409,410],{},"WebP 85%",[133,412,413],{},"180 KB",[133,415,416],{},"94%",[115,418,419,422,425],{},[133,420,421],{},"AVIF 75%",[133,423,424],{},"120 KB",[133,426,427],{},"96%",[15,429,430],{},[36,431,432],{},"Always use AVIF or WebP with fallbacks.",[19,434,436],{"id":435},"step-2-resize-to-display-size","Step 2: Resize to Display Size",[15,438,439],{},"Never serve images larger than displayed.",[24,441,443],{"id":442},"common-mistake","Common Mistake",[90,445,447],{"className":199,"code":446,"language":201,"meta":99,"style":99},"\u003C!-- BAD: 4000px image displayed at 400px -->\n\u003Cimg src=\"giant-photo.jpg\" width=\"400\">\n",[97,448,449,455],{"__ignoreMap":99},[205,450,451],{"class":207,"line":208},[205,452,454],{"class":453},"sHwdD","\u003C!-- BAD: 4000px image displayed at 400px -->\n",[205,456,457,459,461,463,465,467,470,472,474,476,478,481,483],{"class":207,"line":222},[205,458,212],{"class":211},[205,460,297],{"class":215},[205,462,300],{"class":231},[205,464,235],{"class":211},[205,466,238],{"class":211},[205,468,469],{"class":241},"giant-photo.jpg",[205,471,238],{"class":211},[205,473,324],{"class":231},[205,475,235],{"class":211},[205,477,238],{"class":211},[205,479,480],{"class":241},"400",[205,482,238],{"class":211},[205,484,219],{"class":211},[15,486,487],{},"Problems:",[29,489,490,493,496],{},[32,491,492],{},"Wastes bandwidth (10x more than needed)",[32,494,495],{},"Slower loading",[32,497,498],{},"More memory usage",[24,500,502],{"id":501},"correct-approach","Correct Approach",[90,504,506],{"className":199,"code":505,"language":201,"meta":99,"style":99},"\u003C!-- GOOD: Appropriately sized image -->\n\u003Cimg src=\"photo-400.jpg\" width=\"400\" height=\"300\">\n",[97,507,508,513],{"__ignoreMap":99},[205,509,510],{"class":207,"line":208},[205,511,512],{"class":453},"\u003C!-- GOOD: Appropriately sized image -->\n",[205,514,515,517,519,521,523,525,528,530,532,534,536,538,540,542,544,546,549,551],{"class":207,"line":222},[205,516,212],{"class":211},[205,518,297],{"class":215},[205,520,300],{"class":231},[205,522,235],{"class":211},[205,524,238],{"class":211},[205,526,527],{"class":241},"photo-400.jpg",[205,529,238],{"class":211},[205,531,324],{"class":231},[205,533,235],{"class":211},[205,535,238],{"class":211},[205,537,480],{"class":241},[205,539,238],{"class":211},[205,541,336],{"class":231},[205,543,235],{"class":211},[205,545,238],{"class":211},[205,547,548],{"class":241},"300",[205,550,238],{"class":211},[205,552,219],{"class":211},[24,554,556],{"id":555},"recommended-sizes","Recommended Sizes",[109,558,559,572],{},[112,560,561],{},[115,562,563,566,569],{},[118,564,565],{},"Use Case",[118,567,568],{},"Width",[118,570,571],{},"For Retina",[128,573,574,585,596,607],{},[115,575,576,579,582],{},[133,577,578],{},"Thumbnail",[133,580,581],{},"150-300px",[133,583,584],{},"300-600px",[115,586,587,590,593],{},[133,588,589],{},"Blog content",[133,591,592],{},"800px",[133,594,595],{},"1600px",[115,597,598,601,604],{},[133,599,600],{},"Featured image",[133,602,603],{},"1200px",[133,605,606],{},"2400px",[115,608,609,612,615],{},[133,610,611],{},"Full-width hero",[133,613,614],{},"1920px",[133,616,617],{},"3840px",[15,619,620,623],{},[36,621,622],{},"Tip:"," Generate 2 sizes - 1x for standard displays, 2x for retina.",[19,625,627],{"id":626},"step-3-compress-effectively","Step 3: Compress Effectively",[24,629,631],{"id":630},"quality-settings-guide","Quality Settings Guide",[109,633,634,645],{},[112,635,636],{},[115,637,638,640,643],{},[118,639,376],{},[118,641,642],{},"Recommended",[118,644,565],{},[128,646,647,657,666,677],{},[115,648,649,651,654],{},[133,650,141],{},[133,652,653],{},"75-85%",[133,655,656],{},"General web use",[115,658,659,661,663],{},[133,660,180],{},[133,662,653],{},[133,664,665],{},"Modern browsers",[115,667,668,671,674],{},[133,669,670],{},"AVIF",[133,672,673],{},"65-80%",[133,675,676],{},"Best compression",[115,678,679,681,684],{},[133,680,152],{},[133,682,683],{},"N/A (lossless)",[133,685,686],{},"Graphics only",[24,688,690],{"id":689},"tools-for-compression","Tools for Compression",[15,692,693],{},[36,694,695],{},"Online:",[29,697,698,706,709],{},[32,699,700,705],{},[701,702,704],"a",{"href":703},"/image/converter","Anything.tools"," - Format conversion + optimization",[32,707,708],{},"Squoosh - Visual quality comparison",[32,710,711],{},"TinyPNG - PNG/JPG optimization",[15,713,714],{},[36,715,716],{},"Build tools:",[29,718,719,722,725],{},[32,720,721],{},"Sharp (Node.js)",[32,723,724],{},"Imagemin (webpack)",[32,726,727],{},"next/image (Next.js)",[15,729,730],{},[36,731,732],{},"Command line:",[90,734,738],{"className":735,"code":736,"language":737,"meta":99,"style":99},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# WebP\ncwebp -q 80 input.jpg -o output.webp\n\n# AVIF\navifenc input.jpg output.avif -q 75\n\n# JPG optimization\njpegoptim --max=80 image.jpg\n","bash",[97,739,740,745,767,773,778,793,798,804],{"__ignoreMap":99},[205,741,742],{"class":207,"line":208},[205,743,744],{"class":453},"# WebP\n",[205,746,747,751,754,758,761,764],{"class":207,"line":222},[205,748,750],{"class":749},"sBMFI","cwebp",[205,752,753],{"class":241}," -q",[205,755,757],{"class":756},"sbssI"," 80",[205,759,760],{"class":241}," input.jpg",[205,762,763],{"class":241}," -o",[205,765,766],{"class":241}," output.webp\n",[205,768,769],{"class":207,"line":261},[205,770,772],{"emptyLinePlaceholder":771},true,"\n",[205,774,775],{"class":207,"line":292},[205,776,777],{"class":453},"# AVIF\n",[205,779,780,783,785,788,790],{"class":207,"line":350},[205,781,782],{"class":749},"avifenc",[205,784,760],{"class":241},[205,786,787],{"class":241}," output.avif",[205,789,753],{"class":241},[205,791,792],{"class":756}," 75\n",[205,794,796],{"class":207,"line":795},6,[205,797,772],{"emptyLinePlaceholder":771},[205,799,801],{"class":207,"line":800},7,[205,802,803],{"class":453},"# JPG optimization\n",[205,805,807,810,813],{"class":207,"line":806},8,[205,808,809],{"class":749},"jpegoptim",[205,811,812],{"class":241}," --max=80",[205,814,815],{"class":241}," image.jpg\n",[19,817,819],{"id":818},"step-4-implement-responsive-images","Step 4: Implement Responsive Images",[24,821,823],{"id":822},"the-srcset-attribute","The srcset Attribute",[15,825,826],{},"Serve different sizes based on screen width:",[90,828,830],{"className":199,"code":829,"language":201,"meta":99,"style":99},"\u003Cimg \n  srcset=\"photo-400.jpg 400w,\n          photo-800.jpg 800w,\n          photo-1200.jpg 1200w\"\n  sizes=\"(max-width: 600px) 400px,\n         (max-width: 1000px) 800px,\n         1200px\"\n  src=\"photo-800.jpg\"\n  alt=\"Description\"\n>\n",[97,831,832,841,853,858,866,878,883,890,904,919],{"__ignoreMap":99},[205,833,834,836,838],{"class":207,"line":208},[205,835,212],{"class":211},[205,837,297],{"class":215},[205,839,840],{"class":211}," \n",[205,842,843,846,848,850],{"class":207,"line":222},[205,844,845],{"class":231},"  srcset",[205,847,235],{"class":211},[205,849,238],{"class":211},[205,851,852],{"class":241},"photo-400.jpg 400w,\n",[205,854,855],{"class":207,"line":261},[205,856,857],{"class":241},"          photo-800.jpg 800w,\n",[205,859,860,863],{"class":207,"line":292},[205,861,862],{"class":241},"          photo-1200.jpg 1200w",[205,864,865],{"class":211},"\"\n",[205,867,868,871,873,875],{"class":207,"line":350},[205,869,870],{"class":231},"  sizes",[205,872,235],{"class":211},[205,874,238],{"class":211},[205,876,877],{"class":241},"(max-width: 600px) 400px,\n",[205,879,880],{"class":207,"line":795},[205,881,882],{"class":241},"         (max-width: 1000px) 800px,\n",[205,884,885,888],{"class":207,"line":800},[205,886,887],{"class":241},"         1200px",[205,889,865],{"class":211},[205,891,892,895,897,899,902],{"class":207,"line":806},[205,893,894],{"class":231},"  src",[205,896,235],{"class":211},[205,898,238],{"class":211},[205,900,901],{"class":241},"photo-800.jpg",[205,903,865],{"class":211},[205,905,907,910,912,914,917],{"class":207,"line":906},9,[205,908,909],{"class":231},"  alt",[205,911,235],{"class":211},[205,913,238],{"class":211},[205,915,916],{"class":241},"Description",[205,918,865],{"class":211},[205,920,922],{"class":207,"line":921},10,[205,923,219],{"class":211},[15,925,926],{},"Browser automatically picks best size.",[24,928,930],{"id":929},"with-art-direction","With Art Direction",[15,932,933],{},"Different crops for different screen sizes:",[90,935,937],{"className":199,"code":936,"language":201,"meta":99,"style":99},"\u003Cpicture>\n  \u003Csource media=\"(max-width: 600px)\" srcset=\"photo-mobile.jpg\">\n  \u003Csource media=\"(max-width: 1000px)\" srcset=\"photo-tablet.jpg\">\n  \u003Cimg src=\"photo-desktop.jpg\" alt=\"Description\">\n\u003C/picture>\n",[97,938,939,947,978,1008,1037],{"__ignoreMap":99},[205,940,941,943,945],{"class":207,"line":208},[205,942,212],{"class":211},[205,944,216],{"class":215},[205,946,219],{"class":211},[205,948,949,951,953,956,958,960,963,965,967,969,971,974,976],{"class":207,"line":222},[205,950,225],{"class":211},[205,952,228],{"class":215},[205,954,955],{"class":231}," media",[205,957,235],{"class":211},[205,959,238],{"class":211},[205,961,962],{"class":241},"(max-width: 600px)",[205,964,238],{"class":211},[205,966,232],{"class":231},[205,968,235],{"class":211},[205,970,238],{"class":211},[205,972,973],{"class":241},"photo-mobile.jpg",[205,975,238],{"class":211},[205,977,219],{"class":211},[205,979,980,982,984,986,988,990,993,995,997,999,1001,1004,1006],{"class":207,"line":261},[205,981,225],{"class":211},[205,983,228],{"class":215},[205,985,955],{"class":231},[205,987,235],{"class":211},[205,989,238],{"class":211},[205,991,992],{"class":241},"(max-width: 1000px)",[205,994,238],{"class":211},[205,996,232],{"class":231},[205,998,235],{"class":211},[205,1000,238],{"class":211},[205,1002,1003],{"class":241},"photo-tablet.jpg",[205,1005,238],{"class":211},[205,1007,219],{"class":211},[205,1009,1010,1012,1014,1016,1018,1020,1023,1025,1027,1029,1031,1033,1035],{"class":207,"line":292},[205,1011,225],{"class":211},[205,1013,297],{"class":215},[205,1015,300],{"class":231},[205,1017,235],{"class":211},[205,1019,238],{"class":211},[205,1021,1022],{"class":241},"photo-desktop.jpg",[205,1024,238],{"class":211},[205,1026,312],{"class":231},[205,1028,235],{"class":211},[205,1030,238],{"class":211},[205,1032,916],{"class":241},[205,1034,238],{"class":211},[205,1036,219],{"class":211},[205,1038,1039,1041,1043],{"class":207,"line":350},[205,1040,353],{"class":211},[205,1042,216],{"class":215},[205,1044,219],{"class":211},[24,1046,1048],{"id":1047},"with-format-size","With Format + Size",[15,1050,1051],{},"Complete example:",[90,1053,1055],{"className":199,"code":1054,"language":201,"meta":99,"style":99},"\u003Cpicture>\n  \u003C!-- AVIF -->\n  \u003Csource \n    type=\"image/avif\"\n    srcset=\"photo-400.avif 400w,\n            photo-800.avif 800w,\n            photo-1200.avif 1200w\"\n    sizes=\"(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px\">\n  \n  \u003C!-- WebP -->\n  \u003Csource \n    type=\"image/webp\"\n    srcset=\"photo-400.webp 400w,\n            photo-800.webp 800w,\n            photo-1200.webp 1200w\"\n    sizes=\"(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px\">\n  \n  \u003C!-- JPG fallback -->\n  \u003Cimg \n    srcset=\"photo-400.jpg 400w,\n            photo-800.jpg 800w,\n            photo-1200.jpg 1200w\"\n    sizes=\"(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px\"\n    src=\"photo-800.jpg\"\n    alt=\"Description\"\n    width=\"1200\"\n    height=\"800\"\n    loading=\"lazy\">\n\u003C/picture>\n",[97,1056,1057,1065,1070,1078,1091,1103,1108,1115,1131,1137,1142,1151,1164,1176,1182,1190,1205,1210,1216,1225,1236,1242,1250,1263,1277,1291,1305,1320,1337],{"__ignoreMap":99},[205,1058,1059,1061,1063],{"class":207,"line":208},[205,1060,212],{"class":211},[205,1062,216],{"class":215},[205,1064,219],{"class":211},[205,1066,1067],{"class":207,"line":222},[205,1068,1069],{"class":453},"  \u003C!-- AVIF -->\n",[205,1071,1072,1074,1076],{"class":207,"line":261},[205,1073,225],{"class":211},[205,1075,228],{"class":215},[205,1077,840],{"class":211},[205,1079,1080,1083,1085,1087,1089],{"class":207,"line":292},[205,1081,1082],{"class":231},"    type",[205,1084,235],{"class":211},[205,1086,238],{"class":211},[205,1088,254],{"class":241},[205,1090,865],{"class":211},[205,1092,1093,1096,1098,1100],{"class":207,"line":350},[205,1094,1095],{"class":231},"    srcset",[205,1097,235],{"class":211},[205,1099,238],{"class":211},[205,1101,1102],{"class":241},"photo-400.avif 400w,\n",[205,1104,1105],{"class":207,"line":795},[205,1106,1107],{"class":241},"            photo-800.avif 800w,\n",[205,1109,1110,1113],{"class":207,"line":800},[205,1111,1112],{"class":241},"            photo-1200.avif 1200w",[205,1114,865],{"class":211},[205,1116,1117,1120,1122,1124,1127,1129],{"class":207,"line":806},[205,1118,1119],{"class":231},"    sizes",[205,1121,235],{"class":211},[205,1123,238],{"class":211},[205,1125,1126],{"class":241},"(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px",[205,1128,238],{"class":211},[205,1130,219],{"class":211},[205,1132,1133],{"class":207,"line":906},[205,1134,1136],{"class":1135},"sTEyZ","  \n",[205,1138,1139],{"class":207,"line":921},[205,1140,1141],{"class":453},"  \u003C!-- WebP -->\n",[205,1143,1145,1147,1149],{"class":207,"line":1144},11,[205,1146,225],{"class":211},[205,1148,228],{"class":215},[205,1150,840],{"class":211},[205,1152,1154,1156,1158,1160,1162],{"class":207,"line":1153},12,[205,1155,1082],{"class":231},[205,1157,235],{"class":211},[205,1159,238],{"class":211},[205,1161,285],{"class":241},[205,1163,865],{"class":211},[205,1165,1167,1169,1171,1173],{"class":207,"line":1166},13,[205,1168,1095],{"class":231},[205,1170,235],{"class":211},[205,1172,238],{"class":211},[205,1174,1175],{"class":241},"photo-400.webp 400w,\n",[205,1177,1179],{"class":207,"line":1178},14,[205,1180,1181],{"class":241},"            photo-800.webp 800w,\n",[205,1183,1185,1188],{"class":207,"line":1184},15,[205,1186,1187],{"class":241},"            photo-1200.webp 1200w",[205,1189,865],{"class":211},[205,1191,1193,1195,1197,1199,1201,1203],{"class":207,"line":1192},16,[205,1194,1119],{"class":231},[205,1196,235],{"class":211},[205,1198,238],{"class":211},[205,1200,1126],{"class":241},[205,1202,238],{"class":211},[205,1204,219],{"class":211},[205,1206,1208],{"class":207,"line":1207},17,[205,1209,1136],{"class":1135},[205,1211,1213],{"class":207,"line":1212},18,[205,1214,1215],{"class":453},"  \u003C!-- JPG fallback -->\n",[205,1217,1219,1221,1223],{"class":207,"line":1218},19,[205,1220,225],{"class":211},[205,1222,297],{"class":215},[205,1224,840],{"class":211},[205,1226,1228,1230,1232,1234],{"class":207,"line":1227},20,[205,1229,1095],{"class":231},[205,1231,235],{"class":211},[205,1233,238],{"class":211},[205,1235,852],{"class":241},[205,1237,1239],{"class":207,"line":1238},21,[205,1240,1241],{"class":241},"            photo-800.jpg 800w,\n",[205,1243,1245,1248],{"class":207,"line":1244},22,[205,1246,1247],{"class":241},"            photo-1200.jpg 1200w",[205,1249,865],{"class":211},[205,1251,1253,1255,1257,1259,1261],{"class":207,"line":1252},23,[205,1254,1119],{"class":231},[205,1256,235],{"class":211},[205,1258,238],{"class":211},[205,1260,1126],{"class":241},[205,1262,865],{"class":211},[205,1264,1266,1269,1271,1273,1275],{"class":207,"line":1265},24,[205,1267,1268],{"class":231},"    src",[205,1270,235],{"class":211},[205,1272,238],{"class":211},[205,1274,901],{"class":241},[205,1276,865],{"class":211},[205,1278,1280,1283,1285,1287,1289],{"class":207,"line":1279},25,[205,1281,1282],{"class":231},"    alt",[205,1284,235],{"class":211},[205,1286,238],{"class":211},[205,1288,916],{"class":241},[205,1290,865],{"class":211},[205,1292,1294,1297,1299,1301,1303],{"class":207,"line":1293},26,[205,1295,1296],{"class":231},"    width",[205,1298,235],{"class":211},[205,1300,238],{"class":211},[205,1302,331],{"class":241},[205,1304,865],{"class":211},[205,1306,1308,1311,1313,1315,1318],{"class":207,"line":1307},27,[205,1309,1310],{"class":231},"    height",[205,1312,235],{"class":211},[205,1314,238],{"class":211},[205,1316,1317],{"class":241},"800",[205,1319,865],{"class":211},[205,1321,1323,1326,1328,1330,1333,1335],{"class":207,"line":1322},28,[205,1324,1325],{"class":231},"    loading",[205,1327,235],{"class":211},[205,1329,238],{"class":211},[205,1331,1332],{"class":241},"lazy",[205,1334,238],{"class":211},[205,1336,219],{"class":211},[205,1338,1340,1342,1344],{"class":207,"line":1339},29,[205,1341,353],{"class":211},[205,1343,216],{"class":215},[205,1345,219],{"class":211},[19,1347,1349],{"id":1348},"step-5-use-lazy-loading","Step 5: Use Lazy Loading",[24,1351,1353],{"id":1352},"native-lazy-loading","Native Lazy Loading",[90,1355,1357],{"className":199,"code":1356,"language":201,"meta":99,"style":99},"\u003Cimg src=\"photo.jpg\" loading=\"lazy\" alt=\"Description\">\n",[97,1358,1359],{"__ignoreMap":99},[205,1360,1361,1363,1365,1367,1369,1371,1374,1376,1379,1381,1383,1385,1387,1389,1391,1393,1395,1397],{"class":207,"line":208},[205,1362,212],{"class":211},[205,1364,297],{"class":215},[205,1366,300],{"class":231},[205,1368,235],{"class":211},[205,1370,238],{"class":211},[205,1372,1373],{"class":241},"photo.jpg",[205,1375,238],{"class":211},[205,1377,1378],{"class":231}," loading",[205,1380,235],{"class":211},[205,1382,238],{"class":211},[205,1384,1332],{"class":241},[205,1386,238],{"class":211},[205,1388,312],{"class":231},[205,1390,235],{"class":211},[205,1392,238],{"class":211},[205,1394,916],{"class":241},[205,1396,238],{"class":211},[205,1398,219],{"class":211},[15,1400,1401],{},"Browser loads image only when near viewport.",[15,1403,1404,1407],{},[36,1405,1406],{},"Supported by:"," All modern browsers (95%+ support)",[24,1409,1411],{"id":1410},"when-to-use","When to Use",[29,1413,1414,1417,1420,1423,1426,1429],{},[32,1415,1416],{},"✅ Images below the fold",[32,1418,1419],{},"✅ Gallery images",[32,1421,1422],{},"✅ Blog post images",[32,1424,1425],{},"❌ Hero images",[32,1427,1428],{},"❌ LCP images",[32,1430,1431],{},"❌ Critical above-fold content",[24,1433,1435],{"id":1434},"eager-loading-for-critical-images","Eager Loading for Critical Images",[90,1437,1439],{"className":199,"code":1438,"language":201,"meta":99,"style":99},"\u003C!-- Hero image - load immediately -->\n\u003Cimg src=\"hero.jpg\" loading=\"eager\" fetchpriority=\"high\" alt=\"Hero\">\n\n\u003C!-- Below fold - lazy load -->\n\u003Cimg src=\"section2.jpg\" loading=\"lazy\" alt=\"Content\">\n",[97,1440,1441,1446,1498,1502,1507],{"__ignoreMap":99},[205,1442,1443],{"class":207,"line":208},[205,1444,1445],{"class":453},"\u003C!-- Hero image - load immediately -->\n",[205,1447,1448,1450,1452,1454,1456,1458,1460,1462,1464,1466,1468,1471,1473,1476,1478,1480,1483,1485,1487,1489,1491,1494,1496],{"class":207,"line":222},[205,1449,212],{"class":211},[205,1451,297],{"class":215},[205,1453,300],{"class":231},[205,1455,235],{"class":211},[205,1457,238],{"class":211},[205,1459,307],{"class":241},[205,1461,238],{"class":211},[205,1463,1378],{"class":231},[205,1465,235],{"class":211},[205,1467,238],{"class":211},[205,1469,1470],{"class":241},"eager",[205,1472,238],{"class":211},[205,1474,1475],{"class":231}," fetchpriority",[205,1477,235],{"class":211},[205,1479,238],{"class":211},[205,1481,1482],{"class":241},"high",[205,1484,238],{"class":211},[205,1486,312],{"class":231},[205,1488,235],{"class":211},[205,1490,238],{"class":211},[205,1492,1493],{"class":241},"Hero",[205,1495,238],{"class":211},[205,1497,219],{"class":211},[205,1499,1500],{"class":207,"line":261},[205,1501,772],{"emptyLinePlaceholder":771},[205,1503,1504],{"class":207,"line":292},[205,1505,1506],{"class":453},"\u003C!-- Below fold - lazy load -->\n",[205,1508,1509,1511,1513,1515,1517,1519,1522,1524,1526,1528,1530,1532,1534,1536,1538,1540,1543,1545],{"class":207,"line":350},[205,1510,212],{"class":211},[205,1512,297],{"class":215},[205,1514,300],{"class":231},[205,1516,235],{"class":211},[205,1518,238],{"class":211},[205,1520,1521],{"class":241},"section2.jpg",[205,1523,238],{"class":211},[205,1525,1378],{"class":231},[205,1527,235],{"class":211},[205,1529,238],{"class":211},[205,1531,1332],{"class":241},[205,1533,238],{"class":211},[205,1535,312],{"class":231},[205,1537,235],{"class":211},[205,1539,238],{"class":211},[205,1541,1542],{"class":241},"Content",[205,1544,238],{"class":211},[205,1546,219],{"class":211},[24,1548,1550],{"id":1549},"preload-lcp-image","Preload LCP Image",[90,1552,1554],{"className":199,"code":1553,"language":201,"meta":99,"style":99},"\u003Chead>\n  \u003Clink rel=\"preload\" as=\"image\" href=\"hero.webp\" type=\"image/webp\">\n\u003C/head>\n",[97,1555,1556,1565,1619],{"__ignoreMap":99},[205,1557,1558,1560,1563],{"class":207,"line":208},[205,1559,212],{"class":211},[205,1561,1562],{"class":215},"head",[205,1564,219],{"class":211},[205,1566,1567,1569,1572,1575,1577,1579,1582,1584,1587,1589,1591,1594,1596,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617],{"class":207,"line":222},[205,1568,225],{"class":211},[205,1570,1571],{"class":215},"link",[205,1573,1574],{"class":231}," rel",[205,1576,235],{"class":211},[205,1578,238],{"class":211},[205,1580,1581],{"class":241},"preload",[205,1583,238],{"class":211},[205,1585,1586],{"class":231}," as",[205,1588,235],{"class":211},[205,1590,238],{"class":211},[205,1592,1593],{"class":241},"image",[205,1595,238],{"class":211},[205,1597,1598],{"class":231}," href",[205,1600,235],{"class":211},[205,1602,238],{"class":211},[205,1604,274],{"class":241},[205,1606,238],{"class":211},[205,1608,247],{"class":231},[205,1610,235],{"class":211},[205,1612,238],{"class":211},[205,1614,285],{"class":241},[205,1616,238],{"class":211},[205,1618,219],{"class":211},[205,1620,1621,1623,1625],{"class":207,"line":261},[205,1622,353],{"class":211},[205,1624,1562],{"class":215},[205,1626,219],{"class":211},[19,1628,1630],{"id":1629},"step-6-prevent-layout-shifts","Step 6: Prevent Layout Shifts",[15,1632,1633],{},"Always specify dimensions:",[90,1635,1637],{"className":199,"code":1636,"language":201,"meta":99,"style":99},"\u003C!-- GOOD: Dimensions specified -->\n\u003Cimg src=\"photo.jpg\" width=\"800\" height=\"600\" alt=\"Description\">\n\n\u003C!-- BETTER: CSS aspect-ratio -->\n\u003Cimg src=\"photo.jpg\" style=\"aspect-ratio: 4/3; width: 100%;\" alt=\"Description\">\n",[97,1638,1639,1644,1692,1696,1701],{"__ignoreMap":99},[205,1640,1641],{"class":207,"line":208},[205,1642,1643],{"class":453},"\u003C!-- GOOD: Dimensions specified -->\n",[205,1645,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690],{"class":207,"line":222},[205,1647,212],{"class":211},[205,1649,297],{"class":215},[205,1651,300],{"class":231},[205,1653,235],{"class":211},[205,1655,238],{"class":211},[205,1657,1373],{"class":241},[205,1659,238],{"class":211},[205,1661,324],{"class":231},[205,1663,235],{"class":211},[205,1665,238],{"class":211},[205,1667,1317],{"class":241},[205,1669,238],{"class":211},[205,1671,336],{"class":231},[205,1673,235],{"class":211},[205,1675,238],{"class":211},[205,1677,343],{"class":241},[205,1679,238],{"class":211},[205,1681,312],{"class":231},[205,1683,235],{"class":211},[205,1685,238],{"class":211},[205,1687,916],{"class":241},[205,1689,238],{"class":211},[205,1691,219],{"class":211},[205,1693,1694],{"class":207,"line":261},[205,1695,772],{"emptyLinePlaceholder":771},[205,1697,1698],{"class":207,"line":292},[205,1699,1700],{"class":453},"\u003C!-- BETTER: CSS aspect-ratio -->\n",[205,1702,1703,1705,1707,1709,1711,1713,1715,1717,1720,1722,1724,1727,1729,1731,1733,1735,1737,1739],{"class":207,"line":350},[205,1704,212],{"class":211},[205,1706,297],{"class":215},[205,1708,300],{"class":231},[205,1710,235],{"class":211},[205,1712,238],{"class":211},[205,1714,1373],{"class":241},[205,1716,238],{"class":211},[205,1718,1719],{"class":231}," style",[205,1721,235],{"class":211},[205,1723,238],{"class":211},[205,1725,1726],{"class":241},"aspect-ratio: 4/3; width: 100%;",[205,1728,238],{"class":211},[205,1730,312],{"class":231},[205,1732,235],{"class":211},[205,1734,238],{"class":211},[205,1736,916],{"class":241},[205,1738,238],{"class":211},[205,1740,219],{"class":211},[24,1742,1744],{"id":1743},"modern-css-approach","Modern CSS Approach",[90,1746,1750],{"className":1747,"code":1748,"language":1749,"meta":99,"style":99},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","img {\n  max-width: 100%;\n  height: auto;\n  aspect-ratio: attr(width) / attr(height);\n}\n","css",[97,1751,1752,1759,1774,1786,1821],{"__ignoreMap":99},[205,1753,1754,1756],{"class":207,"line":208},[205,1755,297],{"class":749},[205,1757,1758],{"class":211}," {\n",[205,1760,1761,1765,1768,1771],{"class":207,"line":222},[205,1762,1764],{"class":1763},"sqsOY","  max-width",[205,1766,1767],{"class":211},":",[205,1769,1770],{"class":756}," 100%",[205,1772,1773],{"class":211},";\n",[205,1775,1776,1779,1781,1784],{"class":207,"line":261},[205,1777,1778],{"class":1763},"  height",[205,1780,1767],{"class":211},[205,1782,1783],{"class":1135}," auto",[205,1785,1773],{"class":211},[205,1787,1788,1791,1793,1797,1800,1804,1807,1810,1813,1815,1818],{"class":207,"line":292},[205,1789,1790],{"class":1763},"  aspect-ratio",[205,1792,1767],{"class":211},[205,1794,1796],{"class":1795},"s2Zo4"," attr",[205,1798,1799],{"class":211},"(",[205,1801,1803],{"class":1802},"sHdIc","width",[205,1805,1806],{"class":211},")",[205,1808,1809],{"class":1135}," / ",[205,1811,1812],{"class":1795},"attr",[205,1814,1799],{"class":211},[205,1816,1817],{"class":1802},"height",[205,1819,1820],{"class":211},");\n",[205,1822,1823],{"class":207,"line":350},[205,1824,1825],{"class":211},"}\n",[19,1827,1829],{"id":1828},"step-7-use-a-cdn","Step 7: Use a CDN",[15,1831,1832],{},"Content Delivery Networks serve images from servers closest to users.",[24,1834,1836],{"id":1835},"popular-image-cdns","Popular Image CDNs",[109,1838,1839,1852],{},[112,1840,1841],{},[115,1842,1843,1846,1849],{},[118,1844,1845],{},"CDN",[118,1847,1848],{},"Features",[118,1850,1851],{},"Pricing",[128,1853,1854,1865,1876,1886],{},[115,1855,1856,1859,1862],{},[133,1857,1858],{},"Cloudflare",[133,1860,1861],{},"Free tier, auto-optimization",[133,1863,1864],{},"Free-$20+/mo",[115,1866,1867,1870,1873],{},[133,1868,1869],{},"Cloudinary",[133,1871,1872],{},"On-the-fly transforms",[133,1874,1875],{},"Free tier",[115,1877,1878,1881,1884],{},[133,1879,1880],{},"ImageKit",[133,1882,1883],{},"Real-time optimization",[133,1885,1875],{},[115,1887,1888,1891,1894],{},[133,1889,1890],{},"Imgix",[133,1892,1893],{},"Advanced transforms",[133,1895,1896],{},"Pay-per-use",[24,1898,1900],{"id":1899},"cdn-benefits","CDN Benefits",[29,1902,1903,1909,1915,1921],{},[32,1904,1905,1908],{},[36,1906,1907],{},"Faster delivery:"," 50-200ms improvement",[32,1910,1911,1914],{},[36,1912,1913],{},"Auto-optimization:"," Format selection, resizing",[32,1916,1917,1920],{},[36,1918,1919],{},"Caching:"," Reduced server load",[32,1922,1923,1926],{},[36,1924,1925],{},"Global:"," Consistent speed worldwide",[24,1928,1930],{"id":1929},"example-cloudinary-url","Example: Cloudinary URL",[90,1932,1934],{"className":199,"code":1933,"language":201,"meta":99,"style":99},"\u003C!-- Auto format, quality, and size -->\n\u003Cimg src=\"https://res.cloudinary.com/demo/image/upload/w_800,q_auto,f_auto/photo.jpg\">\n",[97,1935,1936,1941],{"__ignoreMap":99},[205,1937,1938],{"class":207,"line":208},[205,1939,1940],{"class":453},"\u003C!-- Auto format, quality, and size -->\n",[205,1942,1943,1945,1947,1949,1951,1953,1956,1958],{"class":207,"line":222},[205,1944,212],{"class":211},[205,1946,297],{"class":215},[205,1948,300],{"class":231},[205,1950,235],{"class":211},[205,1952,238],{"class":211},[205,1954,1955],{"class":241},"https://res.cloudinary.com/demo/image/upload/w_800,q_auto,f_auto/photo.jpg",[205,1957,238],{"class":211},[205,1959,219],{"class":211},[19,1961,1963],{"id":1962},"step-8-browser-caching","Step 8: Browser Caching",[15,1965,1966],{},"Set proper cache headers:",[90,1968,1972],{"className":1969,"code":1970,"language":1971,"meta":99,"style":99},"language-nginx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Nginx configuration\nlocation ~* \\.(jpg|jpeg|png|gif|webp|avif|svg)$ {\n    expires 1y;\n    add_header Cache-Control \"public, immutable\";\n}\n","nginx",[97,1973,1974,1979,1984,1989,1994],{"__ignoreMap":99},[205,1975,1976],{"class":207,"line":208},[205,1977,1978],{},"# Nginx configuration\n",[205,1980,1981],{"class":207,"line":222},[205,1982,1983],{},"location ~* \\.(jpg|jpeg|png|gif|webp|avif|svg)$ {\n",[205,1985,1986],{"class":207,"line":261},[205,1987,1988],{},"    expires 1y;\n",[205,1990,1991],{"class":207,"line":292},[205,1992,1993],{},"    add_header Cache-Control \"public, immutable\";\n",[205,1995,1996],{"class":207,"line":350},[205,1997,1825],{},[24,1999,2001],{"id":2000},"cache-strategies","Cache Strategies",[109,2003,2004,2013],{},[112,2005,2006],{},[115,2007,2008,2011],{},[118,2009,2010],{},"Strategy",[118,2012,565],{},[128,2014,2015,2023,2031],{},[115,2016,2017,2020],{},[133,2018,2019],{},"Long cache (1 year)",[133,2021,2022],{},"Static assets with unique names",[115,2024,2025,2028],{},[133,2026,2027],{},"Short cache (1 day)",[133,2029,2030],{},"Frequently updated images",[115,2032,2033,2036],{},[133,2034,2035],{},"No cache",[133,2037,2038],{},"Dynamic/personalized images",[24,2040,2042],{"id":2041},"cache-busting","Cache Busting",[15,2044,2045],{},"Use content hashes in filenames:",[90,2047,2050],{"className":2048,"code":2049,"language":95},[93],"photo.jpg → photo.a8f3e2.jpg\n",[97,2051,2049],{"__ignoreMap":99},[15,2053,2054],{},"When image changes, filename changes, breaking cache.",[19,2056,2058],{"id":2057},"step-9-advanced-techniques","Step 9: Advanced Techniques",[24,2060,2062],{"id":2061},"content-visibility","Content Visibility",[15,2064,2065],{},"Delay offscreen image decoding:",[90,2067,2069],{"className":1747,"code":2068,"language":1749,"meta":99,"style":99},".below-fold-image {\n  content-visibility: auto;\n}\n",[97,2070,2071,2081,2092],{"__ignoreMap":99},[205,2072,2073,2076,2079],{"class":207,"line":208},[205,2074,2075],{"class":211},".",[205,2077,2078],{"class":749},"below-fold-image",[205,2080,1758],{"class":211},[205,2082,2083,2086,2088,2090],{"class":207,"line":222},[205,2084,2085],{"class":1135},"  content-visibility",[205,2087,1767],{"class":211},[205,2089,1783],{"class":1135},[205,2091,1773],{"class":211},[205,2093,2094],{"class":207,"line":261},[205,2095,1825],{"class":211},[24,2097,2099],{"id":2098},"async-decoding","Async Decoding",[15,2101,2102],{},"Prevent main thread blocking:",[90,2104,2106],{"className":199,"code":2105,"language":201,"meta":99,"style":99},"\u003Cimg src=\"large-photo.jpg\" decoding=\"async\" alt=\"Description\">\n",[97,2107,2108],{"__ignoreMap":99},[205,2109,2110,2112,2114,2116,2118,2120,2123,2125,2128,2130,2132,2135,2137,2139,2141,2143,2145,2147],{"class":207,"line":208},[205,2111,212],{"class":211},[205,2113,297],{"class":215},[205,2115,300],{"class":231},[205,2117,235],{"class":211},[205,2119,238],{"class":211},[205,2121,2122],{"class":241},"large-photo.jpg",[205,2124,238],{"class":211},[205,2126,2127],{"class":231}," decoding",[205,2129,235],{"class":211},[205,2131,238],{"class":211},[205,2133,2134],{"class":241},"async",[205,2136,238],{"class":211},[205,2138,312],{"class":231},[205,2140,235],{"class":211},[205,2142,238],{"class":211},[205,2144,916],{"class":241},[205,2146,238],{"class":211},[205,2148,219],{"class":211},[24,2150,2152],{"id":2151},"lqip-low-quality-image-placeholder","LQIP (Low Quality Image Placeholder)",[15,2154,2155],{},"Show blurred preview while loading:",[90,2157,2159],{"className":199,"code":2158,"language":201,"meta":99,"style":99},"\u003Cdiv class=\"image-container\">\n  \u003Cimg \n    src=\"photo-lqip.jpg\" \n    data-src=\"photo-full.jpg\"\n    class=\"blur-up\"\n    alt=\"Description\">\n\u003C/div>\n",[97,2160,2161,2182,2190,2205,2219,2233,2247],{"__ignoreMap":99},[205,2162,2163,2165,2168,2171,2173,2175,2178,2180],{"class":207,"line":208},[205,2164,212],{"class":211},[205,2166,2167],{"class":215},"div",[205,2169,2170],{"class":231}," class",[205,2172,235],{"class":211},[205,2174,238],{"class":211},[205,2176,2177],{"class":241},"image-container",[205,2179,238],{"class":211},[205,2181,219],{"class":211},[205,2183,2184,2186,2188],{"class":207,"line":222},[205,2185,225],{"class":211},[205,2187,297],{"class":215},[205,2189,840],{"class":211},[205,2191,2192,2194,2196,2198,2201,2203],{"class":207,"line":261},[205,2193,1268],{"class":231},[205,2195,235],{"class":211},[205,2197,238],{"class":211},[205,2199,2200],{"class":241},"photo-lqip.jpg",[205,2202,238],{"class":211},[205,2204,840],{"class":211},[205,2206,2207,2210,2212,2214,2217],{"class":207,"line":292},[205,2208,2209],{"class":231},"    data-src",[205,2211,235],{"class":211},[205,2213,238],{"class":211},[205,2215,2216],{"class":241},"photo-full.jpg",[205,2218,865],{"class":211},[205,2220,2221,2224,2226,2228,2231],{"class":207,"line":350},[205,2222,2223],{"class":231},"    class",[205,2225,235],{"class":211},[205,2227,238],{"class":211},[205,2229,2230],{"class":241},"blur-up",[205,2232,865],{"class":211},[205,2234,2235,2237,2239,2241,2243,2245],{"class":207,"line":795},[205,2236,1282],{"class":231},[205,2238,235],{"class":211},[205,2240,238],{"class":211},[205,2242,916],{"class":241},[205,2244,238],{"class":211},[205,2246,219],{"class":211},[205,2248,2249,2251,2253],{"class":207,"line":800},[205,2250,353],{"class":211},[205,2252,2167],{"class":215},[205,2254,219],{"class":211},[90,2256,2260],{"className":2257,"code":2258,"language":2259,"meta":99,"style":99},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Intersection Observer to swap images\nobserver.observe(img => {\n  img.src = img.dataset.src;\n  img.onload = () => img.classList.remove('blur-up');\n});\n","javascript",[97,2261,2262,2267,2286,2313,2354],{"__ignoreMap":99},[205,2263,2264],{"class":207,"line":208},[205,2265,2266],{"class":453},"// Intersection Observer to swap images\n",[205,2268,2269,2272,2274,2277,2279,2281,2284],{"class":207,"line":222},[205,2270,2271],{"class":1135},"observer",[205,2273,2075],{"class":211},[205,2275,2276],{"class":1795},"observe",[205,2278,1799],{"class":1135},[205,2280,297],{"class":1802},[205,2282,2283],{"class":231}," =>",[205,2285,1758],{"class":211},[205,2287,2288,2291,2293,2296,2299,2302,2304,2307,2309,2311],{"class":207,"line":261},[205,2289,2290],{"class":1135},"  img",[205,2292,2075],{"class":211},[205,2294,2295],{"class":1135},"src",[205,2297,2298],{"class":211}," =",[205,2300,2301],{"class":1135}," img",[205,2303,2075],{"class":211},[205,2305,2306],{"class":1135},"dataset",[205,2308,2075],{"class":211},[205,2310,2295],{"class":1135},[205,2312,1773],{"class":211},[205,2314,2315,2317,2319,2322,2324,2327,2329,2331,2333,2336,2338,2341,2343,2346,2348,2350,2352],{"class":207,"line":292},[205,2316,2290],{"class":1135},[205,2318,2075],{"class":211},[205,2320,2321],{"class":1795},"onload",[205,2323,2298],{"class":211},[205,2325,2326],{"class":211}," ()",[205,2328,2283],{"class":231},[205,2330,2301],{"class":1135},[205,2332,2075],{"class":211},[205,2334,2335],{"class":1135},"classList",[205,2337,2075],{"class":211},[205,2339,2340],{"class":1795},"remove",[205,2342,1799],{"class":215},[205,2344,2345],{"class":211},"'",[205,2347,2230],{"class":241},[205,2349,2345],{"class":211},[205,2351,1806],{"class":215},[205,2353,1773],{"class":211},[205,2355,2356,2359,2361],{"class":207,"line":350},[205,2357,2358],{"class":211},"}",[205,2360,1806],{"class":1135},[205,2362,1773],{"class":211},[24,2364,2366],{"id":2365},"dominant-color-placeholder","Dominant Color Placeholder",[15,2368,2369],{},"Show solid color while loading:",[90,2371,2373],{"className":199,"code":2372,"language":201,"meta":99,"style":99},"\u003Cdiv style=\"background: #3a5f7d;\">\n  \u003Cimg src=\"photo.jpg\" loading=\"lazy\" alt=\"Description\">\n\u003C/div>\n",[97,2374,2375,2394,2432],{"__ignoreMap":99},[205,2376,2377,2379,2381,2383,2385,2387,2390,2392],{"class":207,"line":208},[205,2378,212],{"class":211},[205,2380,2167],{"class":215},[205,2382,1719],{"class":231},[205,2384,235],{"class":211},[205,2386,238],{"class":211},[205,2388,2389],{"class":241},"background: #3a5f7d;",[205,2391,238],{"class":211},[205,2393,219],{"class":211},[205,2395,2396,2398,2400,2402,2404,2406,2408,2410,2412,2414,2416,2418,2420,2422,2424,2426,2428,2430],{"class":207,"line":222},[205,2397,225],{"class":211},[205,2399,297],{"class":215},[205,2401,300],{"class":231},[205,2403,235],{"class":211},[205,2405,238],{"class":211},[205,2407,1373],{"class":241},[205,2409,238],{"class":211},[205,2411,1378],{"class":231},[205,2413,235],{"class":211},[205,2415,238],{"class":211},[205,2417,1332],{"class":241},[205,2419,238],{"class":211},[205,2421,312],{"class":231},[205,2423,235],{"class":211},[205,2425,238],{"class":211},[205,2427,916],{"class":241},[205,2429,238],{"class":211},[205,2431,219],{"class":211},[205,2433,2434,2436,2438],{"class":207,"line":261},[205,2435,353],{"class":211},[205,2437,2167],{"class":215},[205,2439,219],{"class":211},[19,2441,2443],{"id":2442},"measuring-performance","Measuring Performance",[24,2445,2447],{"id":2446},"key-metrics","Key Metrics",[109,2449,2450,2463],{},[112,2451,2452],{},[115,2453,2454,2457,2460],{},[118,2455,2456],{},"Metric",[118,2458,2459],{},"Target",[118,2461,2462],{},"Tool",[128,2464,2465,2476,2487],{},[115,2466,2467,2470,2473],{},[133,2468,2469],{},"LCP",[133,2471,2472],{},"\u003C 2.5s",[133,2474,2475],{},"Lighthouse",[115,2477,2478,2481,2484],{},[133,2479,2480],{},"Total image weight",[133,2482,2483],{},"\u003C 1MB",[133,2485,2486],{},"DevTools",[115,2488,2489,2492,2495],{},[133,2490,2491],{},"Image requests",[133,2493,2494],{},"\u003C 20",[133,2496,2486],{},[24,2498,2500],{"id":2499},"testing-tools","Testing Tools",[2502,2503,2504,2510,2516,2522],"ol",{},[32,2505,2506,2509],{},[36,2507,2508],{},"Lighthouse:"," Built into Chrome DevTools",[32,2511,2512,2515],{},[36,2513,2514],{},"WebPageTest:"," Detailed waterfall analysis",[32,2517,2518,2521],{},[36,2519,2520],{},"PageSpeed Insights:"," Google's tool",[32,2523,2524,2527],{},[36,2525,2526],{},"GTmetrix:"," Comprehensive reports",[24,2529,2531],{"id":2530},"chrome-devtools","Chrome DevTools",[90,2533,2536],{"className":2534,"code":2535,"language":95},[93],"DevTools → Network → filter by \"Img\" →\nCheck sizes, load times, coverage\n",[97,2537,2535],{"__ignoreMap":99},[19,2539,2541],{"id":2540},"framework-specific-optimization","Framework-Specific Optimization",[24,2543,2545],{"id":2544},"nextjs","Next.js",[90,2547,2551],{"className":2548,"code":2549,"language":2550,"meta":99,"style":99},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import Image from 'next/image';\n\n\u003CImage\n  src=\"/photo.jpg\"\n  width={800}\n  height={600}\n  alt=\"Description\"\n  priority={isHero}\n  placeholder=\"blur\"\n  blurDataURL={blurDataUrl}\n/>\n","jsx",[97,2552,2553,2575,2579,2586,2599,2611,2621,2633,2645,2659,2671],{"__ignoreMap":99},[205,2554,2555,2559,2562,2565,2568,2571,2573],{"class":207,"line":208},[205,2556,2558],{"class":2557},"s7zQu","import",[205,2560,2561],{"class":1135}," Image ",[205,2563,2564],{"class":2557},"from",[205,2566,2567],{"class":211}," '",[205,2569,2570],{"class":241},"next/image",[205,2572,2345],{"class":211},[205,2574,1773],{"class":211},[205,2576,2577],{"class":207,"line":222},[205,2578,772],{"emptyLinePlaceholder":771},[205,2580,2581,2583],{"class":207,"line":261},[205,2582,212],{"class":211},[205,2584,2585],{"class":749},"Image\n",[205,2587,2588,2590,2592,2594,2597],{"class":207,"line":292},[205,2589,894],{"class":231},[205,2591,235],{"class":211},[205,2593,238],{"class":211},[205,2595,2596],{"class":241},"/photo.jpg",[205,2598,865],{"class":211},[205,2600,2601,2604,2607,2609],{"class":207,"line":350},[205,2602,2603],{"class":231},"  width",[205,2605,2606],{"class":211},"={",[205,2608,1317],{"class":756},[205,2610,1825],{"class":211},[205,2612,2613,2615,2617,2619],{"class":207,"line":795},[205,2614,1778],{"class":231},[205,2616,2606],{"class":211},[205,2618,343],{"class":756},[205,2620,1825],{"class":211},[205,2622,2623,2625,2627,2629,2631],{"class":207,"line":800},[205,2624,909],{"class":231},[205,2626,235],{"class":211},[205,2628,238],{"class":211},[205,2630,916],{"class":241},[205,2632,865],{"class":211},[205,2634,2635,2638,2640,2643],{"class":207,"line":806},[205,2636,2637],{"class":231},"  priority",[205,2639,2606],{"class":211},[205,2641,2642],{"class":1135},"isHero",[205,2644,1825],{"class":211},[205,2646,2647,2650,2652,2654,2657],{"class":207,"line":906},[205,2648,2649],{"class":231},"  placeholder",[205,2651,235],{"class":211},[205,2653,238],{"class":211},[205,2655,2656],{"class":241},"blur",[205,2658,865],{"class":211},[205,2660,2661,2664,2666,2669],{"class":207,"line":921},[205,2662,2663],{"class":231},"  blurDataURL",[205,2665,2606],{"class":211},[205,2667,2668],{"class":1135},"blurDataUrl",[205,2670,1825],{"class":211},[205,2672,2673],{"class":207,"line":1144},[205,2674,2675],{"class":211},"/>\n",[15,2677,2678],{},"Automatically handles:",[29,2680,2681,2684,2687,2690],{},[32,2682,2683],{},"Responsive sizes",[32,2685,2686],{},"WebP/AVIF conversion",[32,2688,2689],{},"Lazy loading",[32,2691,2692],{},"Blur placeholders",[24,2694,2696],{"id":2695},"nuxtjs","Nuxt.js",[90,2698,2702],{"className":2699,"code":2700,"language":2701,"meta":99,"style":99},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtImg\n  src=\"/photo.jpg\"\n  width=\"800\"\n  height=\"600\"\n  format=\"webp\"\n  quality=\"80\"\n  loading=\"lazy\"\n  alt=\"Description\"\n/>\n","vue",[97,2703,2704,2711,2723,2735,2747,2761,2775,2788,2800],{"__ignoreMap":99},[205,2705,2706,2708],{"class":207,"line":208},[205,2707,212],{"class":211},[205,2709,2710],{"class":215},"NuxtImg\n",[205,2712,2713,2715,2717,2719,2721],{"class":207,"line":222},[205,2714,894],{"class":231},[205,2716,235],{"class":211},[205,2718,238],{"class":211},[205,2720,2596],{"class":241},[205,2722,865],{"class":211},[205,2724,2725,2727,2729,2731,2733],{"class":207,"line":261},[205,2726,2603],{"class":231},[205,2728,235],{"class":211},[205,2730,238],{"class":211},[205,2732,1317],{"class":241},[205,2734,865],{"class":211},[205,2736,2737,2739,2741,2743,2745],{"class":207,"line":292},[205,2738,1778],{"class":231},[205,2740,235],{"class":211},[205,2742,238],{"class":211},[205,2744,343],{"class":241},[205,2746,865],{"class":211},[205,2748,2749,2752,2754,2756,2759],{"class":207,"line":350},[205,2750,2751],{"class":231},"  format",[205,2753,235],{"class":211},[205,2755,238],{"class":211},[205,2757,2758],{"class":241},"webp",[205,2760,865],{"class":211},[205,2762,2763,2766,2768,2770,2773],{"class":207,"line":795},[205,2764,2765],{"class":231},"  quality",[205,2767,235],{"class":211},[205,2769,238],{"class":211},[205,2771,2772],{"class":241},"80",[205,2774,865],{"class":211},[205,2776,2777,2780,2782,2784,2786],{"class":207,"line":800},[205,2778,2779],{"class":231},"  loading",[205,2781,235],{"class":211},[205,2783,238],{"class":211},[205,2785,1332],{"class":241},[205,2787,865],{"class":211},[205,2789,2790,2792,2794,2796,2798],{"class":207,"line":806},[205,2791,909],{"class":231},[205,2793,235],{"class":211},[205,2795,238],{"class":211},[205,2797,916],{"class":241},[205,2799,865],{"class":211},[205,2801,2802],{"class":207,"line":906},[205,2803,2675],{"class":1135},[24,2805,2807],{"id":2806},"wordpress","WordPress",[15,2809,2810],{},[36,2811,2812],{},"Plugins:",[29,2814,2815,2818,2821],{},[32,2816,2817],{},"ShortPixel",[32,2819,2820],{},"Imagify",[32,2822,2823],{},"Smush",[15,2825,2826],{},[36,2827,2828],{},"Native features (5.8+):",[29,2830,2831,2834,2837],{},[32,2832,2833],{},"WebP support",[32,2835,2836],{},"Lazy loading by default",[32,2838,2839],{},"Responsive images",[24,2841,2843],{"id":2842},"gatsby","Gatsby",[90,2845,2847],{"className":2548,"code":2846,"language":2550,"meta":99,"style":99},"import { GatsbyImage, getImage } from \"gatsby-plugin-image\";\n\n\u003CGatsbyImage\n  image={getImage(data.photo)}\n  alt=\"Description\"\n/>\n",[97,2848,2849,2881,2885,2892,2912,2924],{"__ignoreMap":99},[205,2850,2851,2853,2856,2859,2862,2865,2868,2871,2874,2877,2879],{"class":207,"line":208},[205,2852,2558],{"class":2557},[205,2854,2855],{"class":211}," {",[205,2857,2858],{"class":1135}," GatsbyImage",[205,2860,2861],{"class":211},",",[205,2863,2864],{"class":1135}," getImage",[205,2866,2867],{"class":211}," }",[205,2869,2870],{"class":2557}," from",[205,2872,2873],{"class":211}," \"",[205,2875,2876],{"class":241},"gatsby-plugin-image",[205,2878,238],{"class":211},[205,2880,1773],{"class":211},[205,2882,2883],{"class":207,"line":222},[205,2884,772],{"emptyLinePlaceholder":771},[205,2886,2887,2889],{"class":207,"line":261},[205,2888,212],{"class":211},[205,2890,2891],{"class":749},"GatsbyImage\n",[205,2893,2894,2897,2899,2902,2905,2907,2910],{"class":207,"line":292},[205,2895,2896],{"class":231},"  image",[205,2898,2606],{"class":211},[205,2900,2901],{"class":1795},"getImage",[205,2903,2904],{"class":1135},"(data",[205,2906,2075],{"class":211},[205,2908,2909],{"class":1135},"photo)",[205,2911,1825],{"class":211},[205,2913,2914,2916,2918,2920,2922],{"class":207,"line":350},[205,2915,909],{"class":231},[205,2917,235],{"class":211},[205,2919,238],{"class":211},[205,2921,916],{"class":241},[205,2923,865],{"class":211},[205,2925,2926],{"class":207,"line":795},[205,2927,2675],{"class":211},[19,2929,2931],{"id":2930},"common-mistakes-to-avoid","Common Mistakes to Avoid",[24,2933,2935],{"id":2934},"oversized-images","❌ Oversized images",[15,2937,2938],{},"Serving 4000px images for 400px containers.",[24,2940,2942],{"id":2941},"poor-format-choice","❌ Poor format choice",[15,2944,2945],{},"Using PNG for photos (10x file size).",[24,2947,2949],{"id":2948},"no-lazy-loading","❌ No lazy loading",[15,2951,2952],{},"Loading all images upfront.",[24,2954,2956],{"id":2955},"missing-dimensions","❌ Missing dimensions",[15,2958,2959],{},"Causing layout shifts during load.",[24,2961,2963],{"id":2962},"no-fallback-formats","❌ No fallback formats",[15,2965,2966],{},"AVIF-only without JPG fallback.",[24,2968,2970],{"id":2969},"ignoring-mobile","❌ Ignoring mobile",[15,2972,2973],{},"Same images for mobile and desktop.",[19,2975,2977],{"id":2976},"quick-wins-checklist","Quick Wins Checklist",[15,2979,2980],{},"Immediate improvements you can make today:",[2502,2982,2983,3003,3018,3033,3082],{},[32,2984,2985,2988,2989],{},[36,2986,2987],{},"Convert to WebP:"," 25-35% instant savings",[29,2990,2991,2997],{},[32,2992,2993],{},[701,2994,2996],{"href":2995},"/image/converter/jpg-to-webp","JPG to WebP →",[32,2998,2999],{},[701,3000,3002],{"href":3001},"/image/converter/png-to-webp","PNG to WebP →",[32,3004,3005,3008,3009],{},[36,3006,3007],{},"Add lazy loading:"," One attribute",[90,3010,3012],{"className":199,"code":3011,"language":201,"meta":99,"style":99},"loading=\"lazy\"\n",[97,3013,3014],{"__ignoreMap":99},[205,3015,3016],{"class":207,"line":208},[205,3017,3011],{"class":1135},[32,3019,3020,3023,3024],{},[36,3021,3022],{},"Add dimensions:"," Prevent CLS",[90,3025,3027],{"className":199,"code":3026,"language":201,"meta":99,"style":99},"width=\"800\" height=\"600\"\n",[97,3028,3029],{"__ignoreMap":99},[205,3030,3031],{"class":207,"line":208},[205,3032,3026],{"class":1135},[32,3034,3035,3038,3039],{},[36,3036,3037],{},"Preload hero image:"," Improve LCP",[90,3040,3042],{"className":199,"code":3041,"language":201,"meta":99,"style":99},"\u003Clink rel=\"preload\" as=\"image\" href=\"hero.webp\">\n",[97,3043,3044],{"__ignoreMap":99},[205,3045,3046,3048,3050,3052,3054,3056,3058,3060,3062,3064,3066,3068,3070,3072,3074,3076,3078,3080],{"class":207,"line":208},[205,3047,212],{"class":211},[205,3049,1571],{"class":215},[205,3051,1574],{"class":231},[205,3053,235],{"class":211},[205,3055,238],{"class":211},[205,3057,1581],{"class":241},[205,3059,238],{"class":211},[205,3061,1586],{"class":231},[205,3063,235],{"class":211},[205,3065,238],{"class":211},[205,3067,1593],{"class":241},[205,3069,238],{"class":211},[205,3071,1598],{"class":231},[205,3073,235],{"class":211},[205,3075,238],{"class":211},[205,3077,274],{"class":241},[205,3079,238],{"class":211},[205,3081,219],{"class":211},[32,3083,3084,3087],{},[36,3085,3086],{},"Resize to actual size:"," Stop serving 4000px images",[19,3089,3091],{"id":3090},"conclusion","Conclusion",[15,3093,3094],{},"Image optimization is the fastest way to improve website performance. Focus on:",[2502,3096,3097,3103,3109,3115],{},[32,3098,3099,3102],{},[36,3100,3101],{},"Right format:"," AVIF/WebP with fallbacks",[32,3104,3105,3108],{},[36,3106,3107],{},"Right size:"," Match display dimensions",[32,3110,3111,3114],{},[36,3112,3113],{},"Right loading:"," Lazy load below fold",[32,3116,3117,3120],{},[36,3118,3119],{},"Right delivery:"," Use CDN, set caching",[15,3122,3123],{},"Start with format conversion - it provides the biggest gains with least effort.",[19,3125,3127],{"id":3126},"convert-your-images","Convert Your Images",[15,3129,3130],{},"Ready to optimize? Start with format conversion:",[29,3132,3133,3139,3145],{},[32,3134,3135,3138],{},[701,3136,3137],{"href":2995},"JPG to WebP"," - Modern format",[32,3140,3141,3144],{},[701,3142,3143],{"href":3001},"PNG to WebP"," - Smaller graphics",[32,3146,3147,3150],{},[701,3148,3149],{"href":703},"All Converters"," - Every format",[3152,3153],"hr",{},[15,3155,3156],{},[3157,3158,3159],"em",{},"Last updated: February 2026",[3161,3162,3163],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":99,"searchDepth":222,"depth":222,"links":3165},[3166,3170,3171,3176,3181,3185,3190,3196,3199,3204,3208,3214,3219,3225,3233,3234,3235],{"id":21,"depth":222,"text":22,"children":3167},[3168,3169],{"id":26,"depth":261,"text":27},{"id":60,"depth":261,"text":61},{"id":87,"depth":222,"text":88},{"id":102,"depth":222,"text":103,"children":3172},[3173,3174,3175],{"id":106,"depth":261,"text":107},{"id":195,"depth":261,"text":196},{"id":363,"depth":261,"text":364},{"id":435,"depth":222,"text":436,"children":3177},[3178,3179,3180],{"id":442,"depth":261,"text":443},{"id":501,"depth":261,"text":502},{"id":555,"depth":261,"text":556},{"id":626,"depth":222,"text":627,"children":3182},[3183,3184],{"id":630,"depth":261,"text":631},{"id":689,"depth":261,"text":690},{"id":818,"depth":222,"text":819,"children":3186},[3187,3188,3189],{"id":822,"depth":261,"text":823},{"id":929,"depth":261,"text":930},{"id":1047,"depth":261,"text":1048},{"id":1348,"depth":222,"text":1349,"children":3191},[3192,3193,3194,3195],{"id":1352,"depth":261,"text":1353},{"id":1410,"depth":261,"text":1411},{"id":1434,"depth":261,"text":1435},{"id":1549,"depth":261,"text":1550},{"id":1629,"depth":222,"text":1630,"children":3197},[3198],{"id":1743,"depth":261,"text":1744},{"id":1828,"depth":222,"text":1829,"children":3200},[3201,3202,3203],{"id":1835,"depth":261,"text":1836},{"id":1899,"depth":261,"text":1900},{"id":1929,"depth":261,"text":1930},{"id":1962,"depth":222,"text":1963,"children":3205},[3206,3207],{"id":2000,"depth":261,"text":2001},{"id":2041,"depth":261,"text":2042},{"id":2057,"depth":222,"text":2058,"children":3209},[3210,3211,3212,3213],{"id":2061,"depth":261,"text":2062},{"id":2098,"depth":261,"text":2099},{"id":2151,"depth":261,"text":2152},{"id":2365,"depth":261,"text":2366},{"id":2442,"depth":222,"text":2443,"children":3215},[3216,3217,3218],{"id":2446,"depth":261,"text":2447},{"id":2499,"depth":261,"text":2500},{"id":2530,"depth":261,"text":2531},{"id":2540,"depth":222,"text":2541,"children":3220},[3221,3222,3223,3224],{"id":2544,"depth":261,"text":2545},{"id":2695,"depth":261,"text":2696},{"id":2806,"depth":261,"text":2807},{"id":2842,"depth":261,"text":2843},{"id":2930,"depth":222,"text":2931,"children":3226},[3227,3228,3229,3230,3231,3232],{"id":2934,"depth":261,"text":2935},{"id":2941,"depth":261,"text":2942},{"id":2948,"depth":261,"text":2949},{"id":2955,"depth":261,"text":2956},{"id":2962,"depth":261,"text":2963},{"id":2969,"depth":261,"text":2970},{"id":2976,"depth":222,"text":2977},{"id":3090,"depth":222,"text":3091},{"id":3126,"depth":222,"text":3127},"Tutorials","2026-01-22T00:00:00.000Z","Learn how to optimize images for faster website loading. Covers formats, compression, lazy loading, responsive images, and Core Web Vitals.","md","/blog/image-optimization-website-speed.jpg",{},"/blog/en/image-optimization-website-speed",{"title":5,"description":3238},"blog/en/image-optimization-website-speed",[3246,3247,3248,3249],"Web Performance","Image Optimization","SEO","Core Web Vitals",[3251,703],"/image/compressor","UtCRXAuaWpToYL9y4udv9n_Wu2Au407QxhATZvPs89k",[3254,3403],{"id":3255,"title":3256,"author":6,"body":3257,"category":3236,"date":3387,"description":3388,"extension":3239,"featured":3389,"image":3390,"meta":3391,"navigation":771,"path":3392,"readingTime":292,"seo":3393,"stem":3394,"tags":3395,"tools":3401,"__hash__":3402},"content/blog/de-DE/how-to-create-qr-codes-for-menus-and-posters.md","So erstellen Sie QR-Codes für Speisekarten und Poster: Ein kompletter Leitfaden",{"type":8,"value":3258,"toc":3377},[3259,3262,3265,3268,3272,3275,3301,3305,3313,3317,3320,3324,3327,3331,3338,3342,3362,3366,3369],[11,3260,3256],{"id":3261},"so-erstellen-sie-qr-codes-für-speisekarten-und-poster-ein-kompletter-leitfaden",[15,3263,3264],{},"Im Jahr 2026 hat sich der QR-Code für Unternehmen vom „Zusatzfeature“ zum „Muss“ entwickelt. Restaurants nutzen sie für kontaktlose Speisekarten, während Veranstaltungsplaner sie auf Plakaten zur sofortigen Ticketbuchung und Standortbestimmung einsetzen. Die Erstellung eines sauberen, funktionierenden QR-Codes ist der erste Schritt, um die Lücke zwischen physischem Marketing und digitaler Interaktion zu schließen.",[15,3266,3267],{},"In diesem Leitfaden zeigen wir Ihnen, wie Sie mit unserem kostenlosen Online-Tool professionelle QR-Codes für Ihre Menüs und Poster erstellen.",[19,3269,3271],{"id":3270},"die-vorteile-von-qr-codes","Die Vorteile von QR-Codes",[15,3273,3274],{},"Warum sollte Ihr Unternehmen oder Ihre Veranstaltung QR-Codes nutzen?",[2502,3276,3277,3283,3289,3295],{},[32,3278,3279,3282],{},[36,3280,3281],{},"Sofortiger Zugriff:"," Kunden müssen keine URLs eintippen; sie richten einfach ihre Kamera auf den Code und klicken.",[32,3284,3285,3288],{},[36,3286,3287],{},"Dynamische Updates:"," Wenn Sie eine Weiterleitungs-URL verwenden, können Sie Ihre Speisekarte oder Veranstaltungsdetails aktualisieren, ohne Ihre Plakate neu drucken zu müssen.",[32,3290,3291,3294],{},[36,3292,3293],{},"Analysen:"," Das Tracking von QR-Code-Scans hilft Ihnen zu verstehen, welche Poster oder Menüstandorte am besten funktionieren.",[32,3296,3297,3300],{},[36,3298,3299],{},"Platzersparnis:"," Halten Sie Ihre Poster minimalistisch; platzieren Sie die umfangreichen Details hinter einem QR-Code.",[19,3302,3304],{"id":3303},"so-generieren-sie-ihren-qr-code","So generieren Sie Ihren QR-Code",[15,3306,3307,3308,3312],{},"Unser ",[701,3309,3311],{"href":3310},"/design/qr-generator","QR-Code-Generator"," ist für den professionellen Einsatz konzipiert. Folgen Sie diesen Schritten:",[24,3314,3316],{"id":3315},"schritt-1-geben-sie-ihr-ziel-ein","Schritt 1: Geben Sie Ihr Ziel ein",[15,3318,3319],{},"Geben Sie die URL Ihrer digitalen Speisekarte (PDF oder Website) oder der Registrierungsseite für Ihre Veranstaltung ein. Sie können auch QR-Codes für WLAN-Zugang, V-Cards oder einfachen Text generieren.",[24,3321,3323],{"id":3322},"schritt-2-qr-code-anpassen-optional","Schritt 2: QR-Code anpassen (Optional)",[15,3325,3326],{},"Achten Sie darauf, dass Ihr QR-Code genügend Kontrast hat. Obwohl Sie die Farben anpassen können, empfehlen wir einen dunklen Vordergrund auf einem hellem Hintergrund, um eine maximale Scanbarkeit über alle Smartphone-Modelle hinweg zu gewährleisten.",[24,3328,3330],{"id":3329},"schritt-3-herunterladen-und-testen","Schritt 3: Herunterladen und Testen",[15,3332,3333,3334,3337],{},"Laden Sie Ihren QR-Code in hoher Auflösung herunter. ",[36,3335,3336],{},"Wichtiger Tipp:"," Testen Sie den gedruckten QR-Code immer mit mehreren Geräten, bevor Sie 500 Exemplare eines Posters oder einer Speisekarte drucken!",[19,3339,3341],{"id":3340},"best-practices-für-speisekarten-und-poster","Best Practices für Speisekarten und Poster",[29,3343,3344,3350,3356],{},[32,3345,3346,3349],{},[36,3347,3348],{},"Auf die Größe kommt es an:"," Für eine Speisekarte reicht in der Regel ein 2,5 cm (1 Zoll) großer QR-Code aus. Für ein Poster, das aus der Ferne betrachtet wird, sollte der QR-Code mindestens 10-12 cm breit sein.",[32,3351,3352,3355],{},[36,3353,3354],{},"Handlungsaufforderung (CTA) hinzufügen:"," Platzieren Sie nicht nur den Code. Fügen Sie einen kurzen Text hinzu wie „Scannen, um Karte zu sehen“ oder „Scannen für Tickets“.",[32,3357,3358,3361],{},[36,3359,3360],{},"Einfach halten:"," Vermeiden Sie es, den Bereich um den QR-Code zu überladen, damit die Kamera leicht fokussieren kann.",[19,3363,3365],{"id":3364},"fazit","Fazit",[15,3367,3368],{},"QR-Codes sind ein leistungsstarkes Werkzeug für modernes Marketing. Egal, ob Sie ein Boutique-Café betreiben oder ein Musikfestival organisieren – die Erstellung eines hochwertigen QR-Codes stellt sicher, dass Ihr Publikum mühelos mit Ihren digitalen Inhalten in Kontakt treten kann.",[15,3370,3371,3372],{},"👉 ",[36,3373,3374],{},[701,3375,3376],{"href":3310},"Generieren Sie jetzt Ihren professionellen QR-Code",{"title":99,"searchDepth":222,"depth":222,"links":3378},[3379,3380,3385,3386],{"id":3270,"depth":222,"text":3271},{"id":3303,"depth":222,"text":3304,"children":3381},[3382,3383,3384],{"id":3315,"depth":261,"text":3316},{"id":3322,"depth":261,"text":3323},{"id":3329,"depth":261,"text":3330},{"id":3340,"depth":222,"text":3341},{"id":3364,"depth":222,"text":3365},"2026-04-20T00:00:00.000Z","Stärken Sie Ihr Geschäft, indem Sie individuelle QR-Codes für Ihre Speisekarten und Veranstaltungsplakate erstellen. Erfahren Sie, wie Sie im Jahr 2026 sichere und hochwertige QR-Codes generieren.",false,"/blog/how-to-create-qr-codes-for-menus-and-posters.png",{},"/blog/de-de/how-to-create-qr-codes-for-menus-and-posters",{"title":3256,"description":3388},"blog/de-DE/how-to-create-qr-codes-for-menus-and-posters",[3396,3397,3398,3399,3400],"qr-codes","speisekarten","poster","marketing","design-werkzeuge",[3310],"RZVg75gmpWV2rzVKYqzmdZIbQ0g0pzXZ7KLingQJ1-Q",{"id":3404,"title":3405,"author":6,"body":3406,"category":3236,"date":3387,"description":3570,"extension":3239,"featured":3389,"image":3571,"meta":3572,"navigation":771,"path":3573,"readingTime":261,"seo":3574,"stem":3575,"tags":3576,"tools":3582,"__hash__":3583},"content/blog/de-DE/how-to-use-text-case-converter.md","So verwenden Sie den Groß-/Kleinschreibung-Konverter für eine bessere Inhaltsformatierung",{"type":8,"value":3407,"toc":3560},[3408,3411,3418,3421,3425,3428,3466,3470,3473,3477,3480,3484,3487,3513,3517,3520,3524,3547,3549,3552],[11,3409,3405],{"id":3410},"so-verwenden-sie-den-groß-kleinschreibung-konverter-für-eine-bessere-inhaltsformatierung",[15,3412,3413,3414,3417],{},"Beim professionellen Schreiben, beim Social-Media-Management oder beim Programmieren ist die Konsistenz der Groß- und Kleinschreibung entscheidend. Das manuelle Ändern von „HELLO WORLD“ in „Hello World“ oder „hello world“ ist mühsam und fehleranfällig. Hier wird ein ",[36,3415,3416],{},"Groß-/Kleinschreibung-Konverter"," zu einem unverzichtbaren Werkzeug in Ihrem digitalen Arsenal.",[15,3419,3420],{},"In diesem Leitfaden untersuchen wir, warum die Groß- und Kleinschreibung wichtig ist und wie Sie unser kostenloses Online-Tool verwenden können, um Ihre Formatierung aufgaben im Jahr 2026 zu rationalisieren.",[19,3422,3424],{"id":3423},"warum-konsistenz-wichtig-ist","Warum Konsistenz wichtig ist",[15,3426,3427],{},"Egal, ob Sie Student, Entwickler oder Marketer sind – die Art und Weise, wie Sie Ihren Text formatieren, beeinflusst die Lesbarkeit und Professionalität:",[2502,3429,3430,3436,3442,3448],{},[32,3431,3432,3435],{},[36,3433,3434],{},"Title Case für Überschriften:"," Die korrekte Großschreibung in Titeln lässt Ihre Blog-Beiträge und Artikel autoritär wirken.",[32,3437,3438,3441],{},[36,3439,3440],{},"Großbuchstaben zur Hervorhebung:"," Die Verwendung von Großbuchstaben kann wichtige Warnungen oder Bezeichnungen hervorheben, aber eine übermäßige Verwendung kann sich wie Schreien anfühlen.",[32,3443,3444,3447],{},[36,3445,3446],{},"Sentence Case für Lesbarkeit:"," Die meisten Webinhalte sollten im Satzformat (nur der Satzanfang groß) verfasst sein, um einen natürlichen Lesefluss zu gewährleisten.",[32,3449,3450,3453,3454,3457,3458,3461,3462,3465],{},[36,3451,3452],{},"Konsistenz im Code:"," Entwickler müssen oft zwischen ",[97,3455,3456],{},"snake_case",", ",[97,3459,3460],{},"camelCase"," oder ",[97,3463,3464],{},"UPPERCASE"," für Konstanten wechseln.",[19,3467,3469],{"id":3468},"so-verwenden-sie-den-konverter","So verwenden Sie den Konverter",[15,3471,3472],{},"Unser Online-Tool ist auf Schnelligkeit und Intuition ausgelegt. So können Sie Ihren Text in drei einfachen Schritten transformieren:",[24,3474,3476],{"id":3475},"schritt-1-geben-sie-ihren-text-ein","Schritt 1: Geben Sie Ihren Text ein",[15,3478,3479],{},"Kopieren Sie den Text, den Sie transformieren möchten, und fügen Sie ihn in den Eingabebereich ein. Sie können auch direkt in das Feld schreiben.",[24,3481,3483],{"id":3482},"schritt-2-wählen-sie-das-gewünschte-format","Schritt 2: Wählen Sie das gewünschte Format",[15,3485,3486],{},"Klicken Sie auf die Schaltfläche, die der von Ihnen benötigten Transformation entspricht:",[29,3488,3489,3495,3501,3507],{},[32,3490,3491,3494],{},[36,3492,3493],{},"UPPER CASE (Großbuchstaben):"," Konvertiert alle Zeichen in Großbuchstaben.",[32,3496,3497,3500],{},[36,3498,3499],{},"lower case (Kleinbuchstaben):"," Konvertiert alle Zeichen in Kleinbuchstaben.",[32,3502,3503,3506],{},[36,3504,3505],{},"Title Case (Titelformat):"," Schreibt den ersten Buchstaben jedes Wortes groß.",[32,3508,3509,3512],{},[36,3510,3511],{},"Sentence case (Satzformat):"," Schreibt nur den ersten Buchstaben jedes Satzes groß.",[24,3514,3516],{"id":3515},"schritt-3-kopieren-und-exportieren","Schritt 3: Kopieren und Exportieren",[15,3518,3519],{},"Sobald die Umwandlung abgeschlossen ist, können Sie auf die Schaltfläche „Kopieren“ klicken, um das Ergebnis sofort in Ihre Zwischenablage zu speichern und überall dort einzufügen, wo Sie es benötigen.",[19,3521,3523],{"id":3522},"profi-tipps-für-content-ersteller","Profi-Tipps für Content-Ersteller",[29,3525,3526,3537],{},[32,3527,3528,3531,3532,3536],{},[36,3529,3530],{},"Überprüfen Sie Ihre Wortanzahl:"," Verwenden Sie nach der Konvertierung unseren ",[701,3533,3535],{"href":3534},"/text/text-counter","Textzähler",", um sicherzustellen, dass Ihre Überschriften innerhalb der SEO-Grenzwerte oder Zeichenbeschränkungen liegen.",[32,3538,3539,3542,3543,2075],{},[36,3540,3541],{},"Reinigen Sie Ihren Text:"," Wenn Sie doppelte Zeilen oder unordentliche Leerzeichen haben, verwenden Sie vor der Formatierung unser Tool ",[701,3544,3546],{"href":3545},"/text/remove-duplicates","Duplikate entfernen",[19,3548,3365],{"id":3364},[15,3550,3551],{},"Die Formatierung sollte kein Engpass in Ihrem kreativen Prozess sein. Durch die Verwendung eines spezialisierten Groß-/Kleinschreibung-Konverters sparen Sie Zeit und stellen sicher, dass Ihr Inhalt auf allen Plattformen professionell und konsistent bleibt.",[15,3553,3371,3554],{},[36,3555,3556],{},[701,3557,3559],{"href":3558},"/text/case-converter","Probieren Sie unseren kostenlosen Groß-/Kleinschreibung-Konverter hier aus",{"title":99,"searchDepth":222,"depth":222,"links":3561},[3562,3563,3568,3569],{"id":3423,"depth":222,"text":3424},{"id":3468,"depth":222,"text":3469,"children":3564},[3565,3566,3567],{"id":3475,"depth":261,"text":3476},{"id":3482,"depth":261,"text":3483},{"id":3515,"depth":261,"text":3516},{"id":3522,"depth":222,"text":3523},{"id":3364,"depth":222,"text":3365},"Erfahren Sie, wie Sie Text sofort zwischen Großbuchstaben, Kleinbuchstaben, Titelformat und mehr umwandeln können. Verbessern Sie Ihren Schreibworkflow mit unserem Online-Textkonverter.","/blog/how-to-use-text-case-converter.png",{},"/blog/de-de/how-to-use-text-case-converter",{"title":3405,"description":3570},"blog/de-DE/how-to-use-text-case-converter",[3577,3578,3579,3580,3581],"Groß-/Kleinschreibung","Großbuchstaben","Kleinbuchstaben","Formatierung","Schreibwerkzeuge",[3558,3534],"7lCCVlep0dLM9pLIp6-eizrGKU0Bs5e65gGsLBWjuyg",1781687043137]