確保生成高成效的圖片來源，在 開發流程
從圖片資料編碼到資訊密集型，本課程介紹的所有語法都包含在內
支援回應式圖片，都是讓機器與機器通訊的方法。您
已經發現，用戶端瀏覽器可以運用多種方式向伺服器通訊，伺服器則能處理回應。
回應式圖片標記 (尤其是 srcset 和 sizes) 原本用來描述大量資訊，
字元。簡單或更糟的是，簡潔的設計就是縮減這些語法的難度，開發人員也能輕鬆瞭解這些語法。
因而提高瀏覽器的剖析難度。字串中越複雜，字串就越高
都有可能會發生剖析錯誤，或是瀏覽器間行為的差異。
然而，能讓這些主題感覺如此恐懼的特徵，也能為您提供解決方案：語法簡單 由機器「讀取」是一種更容易由機器「寫入」的語法。您幾乎可以確定 許多自動化功能的範例 圖片編碼和壓縮等圖片：任何透過社群媒體平台上傳到網路的圖片、內容 管理系統 (CMS)，甚至是電子郵件用戶端，幾乎都是透過不著痕跡地傳遞的系統，可調整規模、重新編碼 並進行壓縮
同樣地，無論是透過外掛程式、外部程式庫、獨立的建構程序工具，還是負責任的用戶端指令碼， 回應式圖片標記非常適合用於自動化作業。
這些是自動化圖片效能的兩個主要考量：管理圖像的建立—其編碼、
和可用來填入 srcset 屬性的替代來源，並產生面向使用者的標記。
在本單元中，您將瞭解在現代工作流程中管理圖片的一些常見方法。
開發流程自動化階段，透過網站採用的架構或內容管理系統，或
並採用專屬的內容傳遞網路
自動壓縮和編碼
很少有時間自行手動決定理想的編碼和等級 對目標專案使用的每張圖片壓縮，或您可能會想使用。阿斯 務必盡可能縮小圖片傳輸大小， 對製作網站所需的每個圖片素材資源儲存壓縮設定，以及重新儲存替代來源後，可能會 在日常工作中潛藏著巨大的瓶頸。
正如您所學，對於各種圖片格式和壓縮類型所學，圖片的最有效編碼方式一律取決於 如同回應式圖片所介紹，圖片來源需要的替代大小將 決定這些圖片在網頁版面配置中佔用的位置。在現代化的工作流程中 整體而非單獨 - 決定一組合理的圖片預設值，以最適當的方式 哪些是正常現象
在選擇相片目錄的編碼時，AVIF 會是更符合品質和傳輸大小的選擇 但僅支援有限度，因此 WebP 提供經過最佳化調整的現代化備用方案，而 JPEG 是最可靠的預設值。替代 我們必須為圖片採用在頁面版面配置中放置側欄的圖片，因此所需的大小與原本要顯示的圖片不同 填滿整個瀏覽器可視區域。壓縮設定需要特別注意模糊處理 並將多個結果檔案壓縮成多個檔案，這樣能減少佔用空間，從每張圖片中採納所有可能的位元組 如要享有更靈活可靠的工作流程總之，這個決策過程與之前的決策程序相同 變得十分龐大
至於處理本身，開放原始碼的影像處理程式庫提供 批次轉換、修改及編輯圖片，兼顧速度、效率和可靠性。處理資料 程式庫可讓您一次將編碼和壓縮設定套用至圖片的整個目錄，不使用 ，而當這些設定需要開啟圖片編輯軟體時，應保存原始圖片來源。 可以即時調整這類軟體旨在在各種環境中執行，從本機開發環境到 或網路伺服器本身—例如，以壓縮為主的 ImageMin， 開發人員可以利用多種外掛程式，擴充 Node.js，符合特定應用程式的需求。 跨平台 ImageMagick 和以 Node.js 為基礎的 Sharp 為基礎 而且內建數項功能，而且功能相當驚人。
這些影像處理程式庫可讓開發人員打造能順暢最佳化圖片的工具 作為標準開發程序的一部分，確保專案一律會參照可用於正式環境的映像檔 盡可能減少資源浪費
本機開發工具和工作流程
Grunt、Gulp 或 Webpack 等工作執行器和套件套件可用於 最佳化圖片素材資源和其他常見的效能相關任務，例如壓縮 CSS 和 JavaScript。目的地： 現在再來一個簡單的用途：專案中的目錄含有十二張圖片 建立公開網站
首先，您必須確保這些圖片的編碼方式一致且有效。如先前單元所述
無論相片的品質和檔案大小為何，WebP 都是相當有效的預設圖片來源。支援 WebP，
但不支援「全面」，因此建議您一併採用漸進式 JPEG 形式的備用素材資源。接著：
如要使用 srcset 屬性有效率地提供這些素材資源，您需要建立多個
每種編碼的替代大小
雖然使用影像編輯軟體就可重複進行這項例行作業且耗時，
Gulp 的用途是將這類重複作業自動化。gulp 回應
外掛程式使用了 Sharp，是許多遵循類似模式的其中一個選項：
收集來源目錄中的所有檔案、對這些檔案重新編碼，並根據相同的標準化「品質」壓縮檔案
圖片格式和壓縮中學到的簡短知識。接著產生的檔案會輸出到您定義的路徑
且可在使用者看到的 img 元素的 src 屬性中參照，同時保留原始檔案。
const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');
exports.webp = function() {
return src('./src-img/*')
.pipe(respimg({
'*': [{
quality: 70,
format: ['webp', 'jpeg'],
progressive: true
}]
}))
.pipe(dest('./img/'));
}
完成這樣的流程後，只要專案成員無意間加入，就不會對生產環境造成任何傷害 在包含原始圖片來源的目錄中加入了已編碼為大量真實色彩 PNG 的相片 (不論 這項任務就會產生高效率的 WebP 格式、可靠的漸進式 JPEG 遞補，以及 且能隨時輕鬆調整。而且也能確保原始圖片 檔案會保留在專案的開發環境中，也就是說，這些設定可隨時 但只覆寫自動輸出內容
為了輸出多個檔案，您必須傳遞多個設定物件 (除了新增
width 鍵和值 (以像素為單位)：
const { src, dest } = require('gulp');
const respimg = require('gulp-responsive');
exports.default = function() {
return src('./src-img/*')
.pipe(respimg({
'*': [{
width: 1000,
format: ['jpeg', 'webp'],
progressive: true,
rename: { suffix: '-1000' }
},
{
width: 800,
format: ['jpeg', 'webp'],
progressive: true,
rename: { suffix: '-800' }
},
{
width: 400,
format: ['jpeg', 'webp'],
progressive: true,
rename: { suffix: '-400' },
}]
})
)
.pipe(dest('./img/'));
}
就上述範例而言，原始圖片 (monarch.png) 大小超過 3.3 MB。所產生的最大檔案 這個任務 (monarch-1000.jpeg) 大小約為 150 KB。最小的 monarch-400.web 只有 32 KB。
[10:30:54] Starting 'default'...
[10:30:54] gulp-responsive: monarch.png -> monarch-400.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-800.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.jpeg
[10:30:54] gulp-responsive: monarch.png -> monarch-400.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-800.webp
[10:30:54] gulp-responsive: monarch.png -> monarch-1000.webp
[10:30:54] gulp-responsive: Created 6 images (matched 1 of 1 image)
[10:30:54] Finished 'default' after 374 ms
當然，建議你仔細檢查結果，確認是否有可見的壓縮構件，或可能增加壓縮 省下更多費用由於這項工作沒有破壞性，因此您可以輕鬆變更這些設定。
總之，在謹慎地手動進行微最佳化時，能夠得到的處理量為 KB 並具備彈性。有了這項工具，就能順暢運用您對高成效圖片素材資源的瞭解 完全不需要人工介入
回應式圖片標記的實際應用方式
填入 srcset 屬性通常非常簡單，因為屬性實際上只會擷取
有關您在產生來源時已完成的設定。在上述工作中
屬性即為其檔案名稱和寬度資訊：
srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w"
請注意，srcset 屬性的內容是描述性的，而非處方藥。對
srcset 屬性，只要每個來源的顯示比例一致。srcset 屬性可包含 URI
和寬度、數量都和寬鬆
這些來源所提供的圖片，可讓瀏覽器更有效率地自訂要求。
如同「回應式圖片」一文所述，建議您使用 <picture> 元素來流暢處理 WebP
或 JPEG 備用模式在這種情況下，您將使用 type 屬性和 srcset 搭配使用。
<picture>
<source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
<img srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>
如您所知，支援 WebP 的瀏覽器會辨識 type 屬性的內容，然後選取該 <source>
元素的 srcset 屬性做為候選圖片清單。瀏覽器無法辨識 image/webp 為有效媒體的瀏覽器
類型會忽略這個 <source>，而是改用內部 <img> 元素的 srcset 屬性。
瀏覽器支援還有另一個考量重點：如果瀏覽器不支援任何回應式圖片標記，就會
仍然需要備用，或是在使用舊的瀏覽環境下，我們也可能面臨圖片毀損的風險。因為 <picture>，
在這些瀏覽器中，<source> 和 srcset 都遭到忽略，我們需要在內部 <img> 的
src 屬性。
將圖片向下縮小為「視覺效果」無縫接軌，且普遍受到支援 JPEG 編碼，因此最大的 JPEG 是 合理選擇
<picture>
<source type="image/webp" srcset="filename-1000.webp 1000w, filename-800.webp 800w, filename-400.webp 400w">
<img src="filename-1000.jpg" srcset="filename-1000.jpg 1000w, filename-800.jpg 800w, filename-400.jpg 400w" sizes="…" alt="…">
</picture>
處理 sizes 可能較為困難。如您所學，sizes 會是符合情境的情境，您
就無法填入屬性中的屬性，因為如果不知道圖片預計在轉譯版面配置中佔用多少空間，就無法填入屬性。適用對象
是最有效率的要求，傳送這些要求時，標記必須包含正確的 sizes 屬性
是由使用者所建立，且在網頁版面配置的樣式要求之前。正在完全省略 sizes
不僅違反 HTML 規格，預設行為也等同於 sizes="100vw"，表示
這項圖片受限於可視區域本身，因此這個圖片來源的候選廣告來源最大
正在選取
如同所有特別繁瑣的網站開發工作，我們建立了各式各樣的工具為您簡化處理工作
手寫 sizes 屬性的程序。respImageLint 是
用來檢查 sizes 屬性的基本程式碼，並提供改善建議。
它是以書籤小程式的形式運作 (在瀏覽器中執行的工具)，指向完整轉譯的網頁包含您的圖片
元素。在瀏覽器充分瞭解網頁版面配置的情況下， 也可以近乎完美的像素。
圖片是為了在各種可能的可視區域大小的情況下，佔滿該版面配置的空間。
程式碼檢查 sizes 屬性雖然特別實用，但其做為進行批發的工具具有更大價值。
如您所知，srcset 和 sizes 語法可以用視覺化的方式流暢地最佳化圖片素材資源請求。儘管
不應在實際工作環境中使用，預設的 sizes 預留位置值 100vw 是相當合理的
並在本機開發環境中處理頁面的版面配置。設定好版面配置樣式後，執行 respImageLint
能取得量身打造的 sizes 屬性，您可以複製這些屬性並貼到標記中，詳細介紹
多手動撰寫：
雖然伺服器算繪標記發出圖片要求的速度過快，JavaScript 無法產生用戶端 sizes 屬性。
如果這類要求是在用戶端「發出」，也不適用相同的原因。Lazysizes 專案
例如，您可以將圖片要求完全延後到建立版面配置之後，允許 JavaScript 產生
sizes 的屬性值。這對我們有很大的用處，並且保證使用者提出最有效率的要求。
不過請注意，這麼做並不等於降低伺服器算繪標記的可靠性和速度
廣告最佳化功能，而且只有在網頁轉譯完畢之後才啟動這些要求
會對 LCP 分數造成負面影響
當然，如果您已採用 React 或 Vue 等用戶端轉譯架構，對吧！
在可能的情況下，而在上述情況下，使用 Lazysize 代表 sizes 屬性幾乎可以完全擷取。
更流暢：因為延遲載入圖片上的 sizes="auto" 可提升共識，
對新標準化瀏覽器行為而言，Lazysizes 將有效成為 polyfill。