[{"data":1,"prerenderedAt":1063},["ShallowReactive",2],{"navigation_docs":3,"-nuxt-nuxt-image":352,"-nuxt-nuxt-image-surround":1058},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":158,"body":354,"description":1046,"extension":1047,"links":1048,"meta":1049,"navigation":1055,"path":159,"seo":1056,"stem":160,"__hash__":1057},"docs/nuxt/nuxt_image.md",{"type":355,"value":356,"toc":1032},"minimark",[357,389,399,402,407,413,449,456,462,492,506,513,515,521,527,578,584,612,618,620,624,630,650,660,663,665,669,675,680,713,716,718,722,725,747,753,787,790,810,819,821,828,833,861,871,873,877,885,888,890,894,903,905,908,1004,1006,1010,1022,1028],[358,359,360,361,365,366,378,379,384,385,388],"p",{},"在 ",[362,363,364],"strong",{},"Nuxt（特別是 Nuxt 3）"," 裡，使用 ",[362,367,368,369,373,374,377],{},"Nuxt Image（",[370,371,372],"code",{},"\u003CNuxtImg>"," / ",[370,375,376],{},"\u003CNuxtPicture>","）"," 來引入圖片，和直接使用原生 ",[362,380,381],{},[370,382,383],{},"\u003Cimg>"," 相比，差異並不只是語法上的方便，而是一整套",[362,386,387],{},"圖片效能優化與開發體驗（DX）設計","。",[358,390,391,392,395,396,398],{},"這篇文章不從抽象概念談起，而是用「",[362,393,394],{},"實際開發中會遇到的問題","」來對照說明，幫助你判斷：為什麼在 Nuxt 專案中，",[370,397,372],{}," 幾乎是預設選項。",[400,401],"hr",{},[403,404,406],"h2",{"id":405},"一自動圖片最佳化最關鍵的差異","一、自動圖片最佳化：最關鍵的差異",[358,408,409,410,412],{},"在使用 ",[370,411,383],{}," 時，瀏覽器只會忠實下載你指定的圖片檔案，不會主動替你做任何優化。",[414,415,420],"pre",{"className":416,"code":417,"language":418,"meta":419,"style":419},"language-html shiki shiki-themes github-dark","\u003Cimg src=\"/hero.jpg\" />\n","html","",[370,421,422],{"__ignoreMap":419},[423,424,427,431,435,439,442,446],"span",{"class":425,"line":426},"line",1,[423,428,430],{"class":429},"s95oV","\u003C",[423,432,434],{"class":433},"s4JwU","img",[423,436,438],{"class":437},"svObZ"," src",[423,440,441],{"class":429},"=",[423,443,445],{"class":444},"sU2Wk","\"/hero.jpg\"",[423,447,448],{"class":429}," />\n",[358,450,451,452,455],{},"這代表不論使用者是手機、平板或桌機，都會下載",[362,453,454],{},"同一張圖片","；圖片大小多大就載多大，也不會自動轉換成更有效率的格式。",[358,457,458,459,461],{},"相對地，當你改用 ",[370,460,372],{},"：",[414,463,467],{"className":464,"code":465,"language":466,"meta":419,"style":419},"language-vue shiki shiki-themes github-dark","\u003CNuxtImg src=\"/hero.jpg\" width=\"600\" />\n","vue",[370,468,469],{"__ignoreMap":419},[423,470,471,473,476,478,480,482,485,487,490],{"class":425,"line":426},[423,472,430],{"class":429},[423,474,475],{"class":433},"NuxtImg",[423,477,438],{"class":437},[423,479,441],{"class":429},[423,481,445],{"class":444},[423,483,484],{"class":437}," width",[423,486,441],{"class":429},[423,488,489],{"class":444},"\"600\"",[423,491,448],{"class":429},[358,493,494,495,498,499,502,503,388],{},"Nuxt Image 會在背後自動完成多項處理，包括依照裝置尺寸產生不同解析度、只下載實際需要的大小、自動壓縮圖片，並在瀏覽器支援的情況下轉換為 ",[362,496,497],{},"WebP 或 AVIF","。同時也會自動生成 ",[370,500,501],{},"srcset"," 與 ",[370,504,505],{},"sizes",[358,507,508,509,512],{},"在實務專案中，這種做法往往能",[362,510,511],{},"直接減少 30%～ 80% 的圖片流量","，對首頁載入速度的改善尤其明顯。",[400,514],{},[403,516,518,519],{"id":517},"二響應式圖片不再手寫-srcset","二、響應式圖片：不再手寫 ",[370,520,501],{},[358,522,523,524,526],{},"如果使用 ",[370,525,383],{}," 想要做到真正的 responsive image，通常需要自行撰寫冗長又容易出錯的設定：",[414,528,530],{"className":416,"code":529,"language":418,"meta":419,"style":419},"\u003Cimg\n  src=\"/photo-800.jpg\"\n  srcset=\"/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w\"\n  sizes=\"(max-width: 600px) 100vw, 800px\"\n/>\n",[370,531,532,539,550,561,572],{"__ignoreMap":419},[423,533,534,536],{"class":425,"line":426},[423,535,430],{"class":429},[423,537,538],{"class":433},"img\n",[423,540,542,545,547],{"class":425,"line":541},2,[423,543,544],{"class":437},"  src",[423,546,441],{"class":429},[423,548,549],{"class":444},"\"/photo-800.jpg\"\n",[423,551,553,556,558],{"class":425,"line":552},3,[423,554,555],{"class":437},"  srcset",[423,557,441],{"class":429},[423,559,560],{"class":444},"\"/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w\"\n",[423,562,564,567,569],{"class":425,"line":563},4,[423,565,566],{"class":437},"  sizes",[423,568,441],{"class":429},[423,570,571],{"class":444},"\"(max-width: 600px) 100vw, 800px\"\n",[423,573,575],{"class":425,"line":574},5,[423,576,577],{"class":429},"/>\n",[358,579,580,581,583],{},"而在 ",[370,582,372],{}," 中，你只需要描述「版面需求」：",[414,585,587],{"className":464,"code":586,"language":466,"meta":419,"style":419},"\u003CNuxtImg src=\"/photo.jpg\" sizes=\"sm:100vw md:50vw lg:800px\" />\n",[370,588,589],{"__ignoreMap":419},[423,590,591,593,595,597,599,602,605,607,610],{"class":425,"line":426},[423,592,430],{"class":429},[423,594,475],{"class":433},[423,596,438],{"class":437},[423,598,441],{"class":429},[423,600,601],{"class":444},"\"/photo.jpg\"",[423,603,604],{"class":437}," sizes",[423,606,441],{"class":429},[423,608,609],{"class":444},"\"sm:100vw md:50vw lg:800px\"",[423,611,448],{"class":429},[358,613,614,615,617],{},"Nuxt 會依照專案的 breakpoints 自動幫你轉換成正確的 ",[370,616,501],{},"，語意清楚，也幾乎不會寫錯。",[400,619],{},[403,621,623],{"id":622},"三lazy-loading-預設啟用","三、Lazy Loading 預設啟用",[358,625,626,627,629],{},"使用原生 ",[370,628,383],{}," 時，若沒有特別設定，圖片會在頁面載入時一次全部請求，對效能不利。",[414,631,633],{"className":416,"code":632,"language":418,"meta":419,"style":419},"\u003Cimg src=\"/banner.jpg\" />\n",[370,634,635],{"__ignoreMap":419},[423,636,637,639,641,643,645,648],{"class":425,"line":426},[423,638,430],{"class":429},[423,640,434],{"class":433},[423,642,438],{"class":437},[423,644,441],{"class":429},[423,646,647],{"class":444},"\"/banner.jpg\"",[423,649,448],{"class":429},[358,651,652,653,655,656,659],{},"而 ",[370,654,372],{}," 預設就會啟用 lazy loading，只有在圖片即將進入視窗時才載入。這對 ",[362,657,658],{},"LCP、INP、CLS 等 Core Web Vitals 指標","都有實質幫助。",[358,661,662],{},"如果你正在關注網站效能評分，這一點非常關鍵。",[400,664],{},[403,666,668],{"id":667},"四cls版面跳動問題的處理","四、CLS（版面跳動）問題的處理",[358,670,671,672,674],{},"圖片載入前沒有預留空間，是造成 CLS（Cumulative Layout Shift）的常見原因。原生 ",[370,673,383],{}," 很容易出現圖片載入後版面突然下移的情況。",[358,676,360,677,679],{},[370,678,372],{}," 中，只要你提供圖片的寬高：",[414,681,683],{"className":464,"code":682,"language":466,"meta":419,"style":419},"\u003CNuxtImg src=\"/hero.jpg\" width=\"1200\" height=\"600\" />\n",[370,684,685],{"__ignoreMap":419},[423,686,687,689,691,693,695,697,699,701,704,707,709,711],{"class":425,"line":426},[423,688,430],{"class":429},[423,690,475],{"class":433},[423,692,438],{"class":437},[423,694,441],{"class":429},[423,696,445],{"class":444},[423,698,484],{"class":437},[423,700,441],{"class":429},[423,702,703],{"class":444},"\"1200\"",[423,705,706],{"class":437}," height",[423,708,441],{"class":429},[423,710,489],{"class":444},[423,712,448],{"class":429},[358,714,715],{},"Nuxt 就能在圖片尚未載入前先預留正確比例的空間，大幅降低版面跳動的風險。",[400,717],{},[403,719,721],{"id":720},"五多種圖片來源的無痛切換","五、多種圖片來源的無痛切換",[358,723,724],{},"Nuxt Image 內建多種 image provider，可以輕鬆對應不同部署環境，例如：",[726,727,728,735,738,741,744],"ul",{},[729,730,731,732],"li",{},"本地 ",[370,733,734],{},"ipx",[729,736,737],{},"Cloudinary",[729,739,740],{},"Imgix",[729,742,743],{},"Vercel",[729,745,746],{},"Cloudflare R2",[358,748,360,749,752],{},[370,750,751],{},"nuxt.config.ts"," 中設定一次即可：",[414,754,758],{"className":755,"code":756,"language":757,"meta":419,"style":419},"language-ts shiki shiki-themes github-dark","image: {\n  provider: \"cloudflare\";\n}\n","ts",[370,759,760,768,782],{"__ignoreMap":419},[423,761,762,765],{"class":425,"line":426},[423,763,764],{"class":437},"image",[423,766,767],{"class":429},": {\n",[423,769,770,773,776,779],{"class":425,"line":541},[423,771,772],{"class":437},"  provider",[423,774,775],{"class":429},": ",[423,777,778],{"class":444},"\"cloudflare\"",[423,780,781],{"class":429},";\n",[423,783,784],{"class":425,"line":552},[423,785,786],{"class":429},"}\n",[358,788,789],{},"之後在元件中仍然維持：",[414,791,793],{"className":464,"code":792,"language":466,"meta":419,"style":419},"\u003CNuxtImg src=\"/uploads/cover.png\" />\n",[370,794,795],{"__ignoreMap":419},[423,796,797,799,801,803,805,808],{"class":425,"line":426},[423,798,430],{"class":429},[423,800,475],{"class":433},[423,802,438],{"class":437},[423,804,441],{"class":429},[423,806,807],{"class":444},"\"/uploads/cover.png\"",[423,809,448],{"class":429},[358,811,812,813,815,816,818],{},"即使日後從本地改成 ",[362,814,746],{}," 或部署到 ",[362,817,743],{},"，元件本身完全不需要修改。",[400,820],{},[403,822,824,825,827],{"id":823},"六nuxtpicture自動處理多格式-fallback","六、",[370,826,376],{},"：自動處理多格式 fallback",[358,829,830,831,461],{},"若你希望同時支援 AVIF、WebP 與傳統格式，只需使用 ",[370,832,376],{},[414,834,836],{"className":464,"code":835,"language":466,"meta":419,"style":419},"\u003CNuxtPicture src=\"/hero.jpg\" formats=\"avif,webp,jpg\" />\n",[370,837,838],{"__ignoreMap":419},[423,839,840,842,845,847,849,851,854,856,859],{"class":425,"line":426},[423,841,430],{"class":429},[423,843,844],{"class":433},"NuxtPicture",[423,846,438],{"class":437},[423,848,441],{"class":429},[423,850,445],{"class":444},[423,852,853],{"class":437}," formats",[423,855,441],{"class":429},[423,857,858],{"class":444},"\"avif,webp,jpg\"",[423,860,448],{"class":429},[358,862,863,864,867,868,870],{},"Nuxt 會自動輸出對應的 ",[370,865,866],{},"\u003Cpicture>"," 結構，並根據瀏覽器能力選擇最佳格式。這種寫法在實務中幾乎不會有人用 ",[370,869,383],{}," 手動維護。",[400,872],{},[403,874,876],{"id":875},"七開發體驗dx的差距","七、開發體驗（DX）的差距",[358,878,360,879,881,882,884],{},[370,880,383],{}," 的世界中，你需要自己處理圖片尺寸、格式、lazy loading、CLS 與 CDN 整合；而在 ",[370,883,372],{}," 的世界裡，你只需要描述「這裡需要一張什麼樣的圖片」，其餘交給框架處理。",[358,886,887],{},"這正是 Nuxt Image 被設計出來的核心價值。",[400,889],{},[403,891,893],{"id":892},"什麼時候不適合用-nuxt-image","什麼時候不適合用 Nuxt Image？",[358,895,896,897,899,900,902],{},"仍然有少數例外情境不建議使用 ",[370,898,372],{},"，例如 SVG icon（適合 inline 或直接 ",[370,901,383],{},"）、Canvas 或 Three.js 使用的 texture、第三方服務要求完全固定 URL 的圖片，以及純後台管理系統、對效能要求不高的頁面。",[400,904],{},[403,906,907],{"id":907},"快速對照整理",[909,910,911,929],"table",{},[912,913,914],"thead",{},[915,916,917,921,925],"tr",{},[918,919,920],"th",{},"項目",[918,922,923],{},[370,924,383],{},[918,926,927],{},[370,928,372],{},[930,931,932,944,953,964,974,985,995],"tbody",{},[915,933,934,938,941],{},[935,936,937],"td",{},"自動壓縮",[935,939,940],{},"❌",[935,942,943],{},"✅",[915,945,946,949,951],{},[935,947,948],{},"WebP / AVIF",[935,950,940],{},[935,952,943],{},[915,954,955,958,961],{},[935,956,957],{},"Responsive",[935,959,960],{},"手動",[935,962,963],{},"自動",[915,965,966,969,971],{},[935,967,968],{},"Lazy loading",[935,970,960],{},[935,972,973],{},"預設",[915,975,976,979,982],{},[935,977,978],{},"CLS 控制",[935,980,981],{},"容易出問題",[935,983,984],{},"預設安全",[915,986,987,990,992],{},[935,988,989],{},"CDN 整合",[935,991,960],{},[935,993,994],{},"原生",[915,996,997,1000,1002],{},[935,998,999],{},"Core Web Vitals",[935,1001,940],{},[935,1003,943],{},[400,1005],{},[403,1007,1009],{"id":1008},"實務建議以常見-nuxt-技術為例","實務建議（以常見 Nuxt 技術為例）",[358,1011,1012,1013,1018,1019,1021],{},"如果你的專案是 Nuxt + 前台內容展示，並且在意效能與 Web Vitals 指標，那麼",[362,1014,1015,1016],{},"所有內容型圖片一律使用 ",[370,1017,372],{}," 是最保險的做法；只有在 WebGL、Three.js 或特殊 texture 載入場景，才回退使用 ",[370,1020,383],{}," 或 loader。",[358,1023,1024,1025,1027],{},"如果你願意，可以再進一步從你現有的專案結構出發，訂一份「圖片使用規範」，或直接優化 ",[370,1026,751],{}," 的 image 設定，讓整個專案在效能與維護性上一次到位。",[1029,1030,1031],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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);}",{"title":419,"searchDepth":541,"depth":541,"links":1033},[1034,1035,1037,1038,1039,1040,1042,1043,1044,1045],{"id":405,"depth":541,"text":406},{"id":517,"depth":541,"text":1036},"二、響應式圖片：不再手寫 srcset",{"id":622,"depth":541,"text":623},{"id":667,"depth":541,"text":668},{"id":720,"depth":541,"text":721},{"id":823,"depth":541,"text":1041},"六、\u003CNuxtPicture>：自動處理多格式 fallback",{"id":875,"depth":541,"text":876},{"id":892,"depth":541,"text":893},{"id":907,"depth":541,"text":907},{"id":1008,"depth":541,"text":1009},"深入探討 Nuxt Image 的優勢，包括自動優化、縮放、Lazy Loading 以及如何提升 Web Performance 和 Core Web Vitals。","md",null,{"tags":1050,"category":128,"date":1054},[128,1051,1052,1053],"nuxt-image","performance","web-vitals","2026-02-03",true,{"title":158,"description":1046},"Y2miPj4piP6FWermV05wuh4o0EpNfJnro2WvyCUjqmE",[1059,1061],{"title":154,"path":155,"stem":156,"description":1060,"children":-1},"從實際開發與部署流程出發，深入理解 nuxi dev、nuxi build 與 nuxi preview 在 Nuxt 中各自扮演的角色，以及它們背後的 runtime 差異。",{"title":162,"path":163,"stem":164,"description":1062,"children":-1},"從基礎到進階的 Python 開發技巧，涵蓋效能優化、內存管理與自動化腳本。",1776690843390]