[{"data":1,"prerenderedAt":808},["ShallowReactive",2],{"blog-post-image-optimization-website-performance":3,"blog-post-summaries":767},{"id":4,"title":5,"body":6,"category":746,"date":747,"description":748,"extension":749,"meta":750,"navigation":751,"path":752,"readingMinutes":753,"related":754,"seo":758,"seoDescription":759,"seoTitle":5,"stem":760,"tool":761,"updated":747,"visual":765,"__hash__":766},"blog/blog/image-optimization-website-performance.md","How Image Optimization Improves Website Performance",{"type":7,"value":8,"toc":726},"minimark",[9,13,16,21,136,139,143,153,156,185,188,199,203,211,227,335,338,342,355,358,601,614,618,623,626,630,633,637,645,649,676,680,683,687,691,694,698,701,705,708,712,715,719,722],[10,11,12],"p",{},"Image optimization improves performance when it shortens or avoids work the browser must do: transferring unnecessary bytes, downloading an oversized source, waiting to discover a hero image, or rearranging the page after an image arrives. Compression is part of that work, but it is not a complete performance strategy.",[10,14,15],{},"The useful question is not simply \"Are these images compressed?\" It is \"Is each visitor receiving the right image, at the right dimensions, early enough for its role on the page?\"",[17,18,20],"h2",{"id":19},"how-each-optimization-affects-performance","How each optimization affects performance",[22,23,24,40],"table",{},[25,26,27],"thead",{},[28,29,30,34,37],"tr",{},[31,32,33],"th",{},"Optimization",[31,35,36],{},"What changes",[31,38,39],{},"What to examine",[41,42,43,55,66,85,96,107,118],"tbody",{},[28,44,45,49,52],{},[46,47,48],"td",{},"Compress or re-encode",[46,50,51],{},"Fewer bytes may need to cross the network",[46,53,54],{},"Resource transfer size and load duration",[28,56,57,60,63],{},[46,58,59],{},"Resize the source",[46,61,62],{},"The browser avoids downloading pixels that the layout never displays",[46,64,65],{},"Intrinsic dimensions versus rendered dimensions",[28,67,68,79,82],{},[46,69,70,71,75,76],{},"Add ",[72,73,74],"code",{},"srcset"," and accurate ",[72,77,78],{},"sizes",[46,80,81],{},"The browser can choose a suitable candidate for the viewport and device density",[46,83,84],{},"Selected source in the Network panel",[28,86,87,90,93],{},[46,88,89],{},"Put an important image in initial HTML",[46,91,92],{},"The preload scanner can discover it without waiting for JavaScript",[46,94,95],{},"Resource load delay",[28,97,98,101,104],{},[46,99,100],{},"Give the LCP image appropriate priority",[46,102,103],{},"The browser can schedule a critical visible image ahead of less important images",[46,105,106],{},"Request priority and start time",[28,108,109,112,115],{},[46,110,111],{},"Lazy-load offscreen images",[46,113,114],{},"Initial requests and unused transfers can be deferred",[46,116,117],{},"Requests made before scrolling",[28,119,120,130,133],{},[46,121,122,123,126,127],{},"Set ",[72,124,125],{},"width"," and ",[72,128,129],{},"height",[46,131,132],{},"The browser can reserve the image's aspect ratio before it loads",[46,134,135],{},"Layout shifts",[10,137,138],{},"These actions solve different problems. Converting a hero photograph to a smaller format will not reserve its layout space. Adding dimensions will not reduce its bytes. Lazy-loading every image can make the most important image arrive later.",[17,140,142],{"id":141},"image-bytes-are-only-one-part-of-lcp","Image bytes are only one part of LCP",[10,144,145,152],{},[146,147,151],"a",{"href":148,"rel":149},"https://web.dev/articles/optimize-lcp",[150],"nofollow","Largest Contentful Paint"," measures the time from navigation until the largest image or text block in the viewport is rendered. Google's current guidance defines a good LCP as 2.5 seconds or less for at least 75% of page visits.",[10,154,155],{},"For an image-based LCP element, the total time can be separated into four parts:",[157,158,159,167,173,179],"ol",{},[160,161,162,166],"li",{},[163,164,165],"strong",{},"Time to First Byte:"," waiting for the initial HTML response.",[160,168,169,172],{},[163,170,171],{},"Resource load delay:"," waiting before the browser starts the image request.",[160,174,175,178],{},[163,176,177],{},"Resource load duration:"," transferring the image.",[160,180,181,184],{},[163,182,183],{},"Element render delay:"," waiting after the image arrives before it appears.",[10,186,187],{},"Compression primarily targets resource load duration. If JavaScript hides the hero until hydration completes, a smaller file may finish downloading earlier while the element render delay grows by a similar amount. The file improved, but the measured LCP may not.",[10,189,190,191,194,195,198],{},"That is why the LCP image should normally be discoverable in the initial HTML. Do not hide its URL in a client-side data attribute, and do not apply ",[72,192,193],{},"loading=\"lazy\""," to an image already expected in the initial viewport. ",[72,196,197],{},"fetchpriority=\"high\""," can be useful for a known LCP image, but it should support correct discovery rather than compensate for a late JavaScript insertion.",[17,200,202],{"id":201},"dimensions-prevent-a-different-performance-problem","Dimensions prevent a different performance problem",[10,204,205,206,126,208,210],{},"An image without known proportions can cause content below it to move when the file finishes loading. The browser now uses matching HTML ",[72,207,125],{},[72,209,129],{}," attributes to establish an intrinsic aspect ratio, while responsive CSS can still control the rendered width.",[10,212,213,214,219,220,126,223,226],{},"The ",[146,215,218],{"href":216,"rel":217},"https://web.dev/learn/images/performance-issues",[150],"web.dev image performance guide"," recommends including those attributes and using responsive CSS such as ",[72,221,222],{},"max-width: 100%",[72,224,225],{},"height: auto",". This reserves the correct shape without forcing a fixed visual size:",[228,229,234],"pre",{"className":230,"code":231,"language":232,"meta":233,"style":233},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg\n  src=\"product-1200.jpg\"\n  width=\"1200\"\n  height=\"800\"\n  alt=\"Blue ceramic bowl on a wood table\"\n  style=\"max-width: 100%; height: auto;\"\n>\n","html","",[72,235,236,249,269,284,299,314,329],{"__ignoreMap":233},[237,238,241,245],"span",{"class":239,"line":240},"line",1,[237,242,244],{"class":243},"sMK4o","\u003C",[237,246,248],{"class":247},"swJcz","img\n",[237,250,252,256,259,262,266],{"class":239,"line":251},2,[237,253,255],{"class":254},"spNyl","  src",[237,257,258],{"class":243},"=",[237,260,261],{"class":243},"\"",[237,263,265],{"class":264},"sfazB","product-1200.jpg",[237,267,268],{"class":243},"\"\n",[237,270,272,275,277,279,282],{"class":239,"line":271},3,[237,273,274],{"class":254},"  width",[237,276,258],{"class":243},[237,278,261],{"class":243},[237,280,281],{"class":264},"1200",[237,283,268],{"class":243},[237,285,287,290,292,294,297],{"class":239,"line":286},4,[237,288,289],{"class":254},"  height",[237,291,258],{"class":243},[237,293,261],{"class":243},[237,295,296],{"class":264},"800",[237,298,268],{"class":243},[237,300,302,305,307,309,312],{"class":239,"line":301},5,[237,303,304],{"class":254},"  alt",[237,306,258],{"class":243},[237,308,261],{"class":243},[237,310,311],{"class":264},"Blue ceramic bowl on a wood table",[237,313,268],{"class":243},[237,315,317,320,322,324,327],{"class":239,"line":316},6,[237,318,319],{"class":254},"  style",[237,321,258],{"class":243},[237,323,261],{"class":243},[237,325,326],{"class":264},"max-width: 100%; height: auto;",[237,328,268],{"class":243},[237,330,332],{"class":239,"line":331},7,[237,333,334],{"class":243},">\n",[10,336,337],{},"The attribute values describe the source's aspect ratio. CSS still decides whether the image renders at 420 pixels, 800 pixels, or another responsive size.",[17,339,341],{"id":340},"responsive-delivery-avoids-oversized-downloads","Responsive delivery avoids oversized downloads",[10,343,344,345,354],{},"A 2400-pixel image may be reasonable for a wide, high-density display and wasteful for a narrow content column. The ",[146,346,349,126,351,353],{"href":347,"rel":348},"https://web.dev/learn/images/responsive-images",[150],[72,350,74],{},[72,352,78],{}," model"," lets the browser choose from candidates using information about the current viewport, layout, and display density.",[10,356,357],{},"For a photograph that can appear full-width up to 1200 CSS pixels, a production pattern might look like this:",[228,359,361],{"className":230,"code":360,"language":232,"meta":233,"style":233},"\u003Cpicture>\n  \u003Csource\n    type=\"image/avif\"\n    srcset=\"hero-640.avif 640w, hero-1200.avif 1200w, hero-1800.avif 1800w\"\n    sizes=\"(min-width: 1200px) 1200px, 100vw\"\n  >\n  \u003Csource\n    type=\"image/webp\"\n    srcset=\"hero-640.webp 640w, hero-1200.webp 1200w, hero-1800.webp 1800w\"\n    sizes=\"(min-width: 1200px) 1200px, 100vw\"\n  >\n  \u003Cimg\n    src=\"hero-1200.jpg\"\n    srcset=\"hero-640.jpg 640w, hero-1200.jpg 1200w, hero-1800.jpg 1800w\"\n    sizes=\"(min-width: 1200px) 1200px, 100vw\"\n    width=\"1200\"\n    height=\"800\"\n    fetchpriority=\"high\"\n    alt=\"Workshop team assembling a timber table\"\n  >\n\u003C/picture>\n",[72,362,363,372,380,394,408,422,427,433,447,461,474,479,486,501,515,528,542,556,571,586,591],{"__ignoreMap":233},[237,364,365,367,370],{"class":239,"line":240},[237,366,244],{"class":243},[237,368,369],{"class":247},"picture",[237,371,334],{"class":243},[237,373,374,377],{"class":239,"line":251},[237,375,376],{"class":243},"  \u003C",[237,378,379],{"class":247},"source\n",[237,381,382,385,387,389,392],{"class":239,"line":271},[237,383,384],{"class":254},"    type",[237,386,258],{"class":243},[237,388,261],{"class":243},[237,390,391],{"class":264},"image/avif",[237,393,268],{"class":243},[237,395,396,399,401,403,406],{"class":239,"line":286},[237,397,398],{"class":254},"    srcset",[237,400,258],{"class":243},[237,402,261],{"class":243},[237,404,405],{"class":264},"hero-640.avif 640w, hero-1200.avif 1200w, hero-1800.avif 1800w",[237,407,268],{"class":243},[237,409,410,413,415,417,420],{"class":239,"line":301},[237,411,412],{"class":254},"    sizes",[237,414,258],{"class":243},[237,416,261],{"class":243},[237,418,419],{"class":264},"(min-width: 1200px) 1200px, 100vw",[237,421,268],{"class":243},[237,423,424],{"class":239,"line":316},[237,425,426],{"class":243},"  >\n",[237,428,429,431],{"class":239,"line":331},[237,430,376],{"class":243},[237,432,379],{"class":247},[237,434,436,438,440,442,445],{"class":239,"line":435},8,[237,437,384],{"class":254},[237,439,258],{"class":243},[237,441,261],{"class":243},[237,443,444],{"class":264},"image/webp",[237,446,268],{"class":243},[237,448,450,452,454,456,459],{"class":239,"line":449},9,[237,451,398],{"class":254},[237,453,258],{"class":243},[237,455,261],{"class":243},[237,457,458],{"class":264},"hero-640.webp 640w, hero-1200.webp 1200w, hero-1800.webp 1800w",[237,460,268],{"class":243},[237,462,464,466,468,470,472],{"class":239,"line":463},10,[237,465,412],{"class":254},[237,467,258],{"class":243},[237,469,261],{"class":243},[237,471,419],{"class":264},[237,473,268],{"class":243},[237,475,477],{"class":239,"line":476},11,[237,478,426],{"class":243},[237,480,482,484],{"class":239,"line":481},12,[237,483,376],{"class":243},[237,485,248],{"class":247},[237,487,489,492,494,496,499],{"class":239,"line":488},13,[237,490,491],{"class":254},"    src",[237,493,258],{"class":243},[237,495,261],{"class":243},[237,497,498],{"class":264},"hero-1200.jpg",[237,500,268],{"class":243},[237,502,504,506,508,510,513],{"class":239,"line":503},14,[237,505,398],{"class":254},[237,507,258],{"class":243},[237,509,261],{"class":243},[237,511,512],{"class":264},"hero-640.jpg 640w, hero-1200.jpg 1200w, hero-1800.jpg 1800w",[237,514,268],{"class":243},[237,516,518,520,522,524,526],{"class":239,"line":517},15,[237,519,412],{"class":254},[237,521,258],{"class":243},[237,523,261],{"class":243},[237,525,419],{"class":264},[237,527,268],{"class":243},[237,529,531,534,536,538,540],{"class":239,"line":530},16,[237,532,533],{"class":254},"    width",[237,535,258],{"class":243},[237,537,261],{"class":243},[237,539,281],{"class":264},[237,541,268],{"class":243},[237,543,545,548,550,552,554],{"class":239,"line":544},17,[237,546,547],{"class":254},"    height",[237,549,258],{"class":243},[237,551,261],{"class":243},[237,553,296],{"class":264},[237,555,268],{"class":243},[237,557,559,562,564,566,569],{"class":239,"line":558},18,[237,560,561],{"class":254},"    fetchpriority",[237,563,258],{"class":243},[237,565,261],{"class":243},[237,567,568],{"class":264},"high",[237,570,268],{"class":243},[237,572,574,577,579,581,584],{"class":239,"line":573},19,[237,575,576],{"class":254},"    alt",[237,578,258],{"class":243},[237,580,261],{"class":243},[237,582,583],{"class":264},"Workshop team assembling a timber table",[237,585,268],{"class":243},[237,587,589],{"class":239,"line":588},20,[237,590,426],{"class":243},[237,592,594,597,599],{"class":239,"line":593},21,[237,595,596],{"class":243},"\u003C/",[237,598,369],{"class":247},[237,600,334],{"class":243},[10,602,603,604,606,607,609,610,613],{},"The candidate widths and ",[72,605,78],{}," value must reflect the real layout; they are not universal boilerplate. An image in a 360-pixel sidebar needs a different set. For offscreen cards, keep the responsive sources but add native ",[72,608,193],{}," to their inner ",[72,611,612],{},"\u003Cimg>"," elements.",[17,615,617],{"id":616},"a-measurement-led-workflow","A measurement-led workflow",[619,620,622],"h3",{"id":621},"_1-start-with-field-data-when-it-exists","1. Start with field data when it exists",[10,624,625],{},"PageSpeed Insights can show Chrome User Experience Report data for real visits. A local Lighthouse run is useful for diagnosis, but it cannot reproduce every visitor's device, connection, cache state, and navigation path. Treat lab and field measurements as related evidence, not interchangeable scores.",[619,627,629],{"id":628},"_2-identify-the-affected-image","2. Identify the affected image",[10,631,632],{},"Find the LCP element and inspect the network request for its source. Record its bytes, intrinsic dimensions, request start, and finish time. Separately check for layout shifts and offscreen images requested during initial load.",[619,634,636],{"id":635},"_3-locate-avoidable-work","3. Locate avoidable work",[10,638,639,640,644],{},"TinyImage's ",[146,641,643],{"href":642},"/analyzer","website image analyzer"," can scan a public page and estimate same-format compression opportunities for its raster images. That is an opportunity list, not a Core Web Vitals measurement. Combine it with browser performance tools to decide whether the bottleneck is transfer size, source selection, discovery, priority, or rendering.",[619,646,648],{"id":647},"_4-change-one-layer-deliberately","4. Change one layer deliberately",[650,651,652,660,667,670,673],"ul",{},[160,653,654,655,659],{},"Use the ",[146,656,658],{"href":657},"/compress","image compressor"," when transfer size is excessive.",[160,661,654,662,666],{},[146,663,665],{"href":664},"/tools/resize-image","resize tool"," when intrinsic dimensions greatly exceed the largest useful display size.",[160,668,669],{},"Add responsive variants when the same slot serves substantially different viewport widths.",[160,671,672],{},"Correct priority and discovery when the critical image starts late.",[160,674,675],{},"Add explicit dimensions when images cause layout movement.",[619,677,679],{"id":678},"_5-measure-the-same-page-again","5. Measure the same page again",[10,681,682],{},"Use equivalent lab conditions to compare the diagnostic result, then watch field data after deployment. Field metrics aggregate real visits and need time and traffic before a change becomes visible.",[17,684,686],{"id":685},"common-questions","Common questions",[619,688,690],{"id":689},"does-compressing-images-guarantee-a-better-lcp","Does compressing images guarantee a better LCP?",[10,692,693],{},"No. It can reduce resource load duration, but LCP also includes server response time, resource load delay, and element render delay. Measure which part dominates before deciding what to fix.",[619,695,697],{"id":696},"should-every-image-use-lazy-loading","Should every image use lazy loading?",[10,699,700],{},"No. Lazy loading is intended for images outside the initial viewport. Applying it to the LCP or another immediately visible image can delay an important request.",[619,702,704],{"id":703},"is-avif-automatically-faster-than-jpeg-or-webp","Is AVIF automatically faster than JPEG or WebP?",[10,706,707],{},"Not automatically. The actual encoded bytes, source dimensions, browser support, request timing, and rendering path all matter. Test representative assets and provide an appropriate fallback.",[619,709,711],{"id":710},"why-did-the-image-file-get-smaller-while-the-performance-score-stayed-similar","Why did the image file get smaller while the performance score stayed similar?",[10,713,714],{},"The saved transfer time may be too small to change the rounded score, another LCP subpart may dominate, or the tested image may not be the page's LCP element. Network variability can also obscure a small lab difference.",[619,716,718],{"id":717},"are-width-and-height-attributes-incompatible-with-responsive-images","Are width and height attributes incompatible with responsive images?",[10,720,721],{},"No. Use them to declare the source aspect ratio, then let CSS and responsive markup determine the displayed size and selected file.",[723,724,725],"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);}",{"title":233,"searchDepth":251,"depth":251,"links":727},[728,729,730,731,732,739],{"id":19,"depth":251,"text":20},{"id":141,"depth":251,"text":142},{"id":201,"depth":251,"text":202},{"id":340,"depth":251,"text":341},{"id":616,"depth":251,"text":617,"children":733},[734,735,736,737,738],{"id":621,"depth":271,"text":622},{"id":628,"depth":271,"text":629},{"id":635,"depth":271,"text":636},{"id":647,"depth":271,"text":648},{"id":678,"depth":271,"text":679},{"id":685,"depth":251,"text":686,"children":740},[741,742,743,744,745],{"id":689,"depth":271,"text":690},{"id":696,"depth":271,"text":697},{"id":703,"depth":271,"text":704},{"id":710,"depth":271,"text":711},{"id":717,"depth":271,"text":718},"Web Performance","2026-09-06","See how image size, dimensions, responsive delivery, loading priority, and layout sizing affect real website performance metrics.","md",{},true,"/blog/image-optimization-website-performance","8",[755,756,757],"best-image-format-for-websites","reduce-image-file-size-for-web","best-image-compression-settings",{"title":5,"description":748},"Learn how image optimization affects LCP, layout stability, and bandwidth, plus a practical workflow for measuring improvements without guesswork.","blog/image-optimization-website-performance",{"title":762,"description":763,"label":764,"to":642},"Find image optimization opportunities","Scan a public page and estimate same-format compression savings before changing its image files.","Analyze a webpage","image-performance","9YzmIQ80oXYkQ_a56LFzzOyIfOMi7sv96FBUaTk1ok4",[768,774,781,786,787,793,798,803],{"path":769,"title":770,"description":771,"category":772,"date":747,"readingMinutes":753,"visual":773},"/blog/best-image-compression-settings","Best Image Compression Settings for Websites","Use a repeatable comparison method to choose image compression settings by format, content type and display size instead of trusting one universal quality number.","Compression","compression-settings",{"path":775,"title":776,"description":777,"category":778,"date":747,"readingMinutes":779,"visual":780},"/blog/best-image-format-for-websites","Best Image Format for Websites","Choose the right web image format for photographs, transparent graphics, logos, screenshots, animation, and browser fallbacks.","Formats","9","best-web-format",{"path":782,"title":783,"description":784,"category":772,"date":747,"readingMinutes":753,"visual":785},"/blog/compress-images-without-losing-quality","How to Compress Images Without Losing Quality","A practical workflow for making images smaller while protecting the detail, dimensions, and transparency that matter.","compress-quality",{"path":752,"title":5,"description":748,"category":746,"date":747,"readingMinutes":753,"visual":765},{"path":788,"title":789,"description":790,"category":772,"date":747,"readingMinutes":791,"visual":792},"/blog/lossy-vs-lossless-image-compression","Lossy vs Lossless Image Compression","Understand what lossy and lossless compression change, which formats use each method, and how to choose the right approach for photos, graphics, and web images.","7","lossy-vs-lossless",{"path":794,"title":795,"description":796,"category":778,"date":747,"readingMinutes":753,"visual":797},"/blog/png-vs-jpg","PNG vs JPG: Which Format Should You Use?","Choose between PNG and JPG based on transparency, image content, file size, editing needs, and where the image will be used.","png-vs-jpg",{"path":799,"title":800,"description":801,"category":746,"date":747,"readingMinutes":753,"visual":802},"/blog/reduce-image-file-size-for-web","How to Reduce Image File Size for the Web","A practical workflow for reducing web image size through correct dimensions, format selection, compression, metadata review, and responsive delivery.","reduce-file-size",{"path":804,"title":805,"description":806,"category":778,"date":747,"readingMinutes":779,"visual":807},"/blog/webp-vs-avif","WebP vs AVIF: Which Is Better for the Web?","Compare WebP and AVIF by visual quality, file size, browser delivery, transparency, animation, and production workflow.","webp-vs-avif",1790175605328]