瞭解 WordPress 等 CMS 和其他網站產生器如何讓您輕鬆使用回應式圖片。
比起手動儲存每張圖片的替代剪裁切割，以及透過 Squoosh.app 等工具手動將圖片壓縮效果提升，這是更好的做法，但在開發過程中，以自動化處理圖片的方式有一些限制。因此，您不一定能完全掌控整個網站使用的圖片，比起開發資產，網路上向使用者顯示的圖片通常比開發問題 (由使用者或編輯者上傳)，而不是與 JavaScript 和樣式表等開發資源一同放在存放區中。
這通常需要進行多項圖片管理程序：這是建構及維護網站所用的圖片素材資源 (包括背景、圖示、標誌等) 的開發層級的工作，又會擔心透過網站使用所產生的圖片素材資源 (例如編輯團隊文章中嵌入的相片，或是使用者上傳的顯示圖片)。雖然背景資訊可能不同，但最終目標都相同，也就是根據開發團隊定義的設定自動編碼和壓縮。
幸運的是，您從本機開發工作流程學到的影像處理程式庫可用於任何數量的情境。雖然無法以一體適用的方式處理回應式圖片標記，但這些系統提供合理的預設值、設定選項和 API 掛鉤，可簡化導入作業。
靜態站點產生器
與工作執行者相比，靜態網站產生器 (例如 Jekyll 或 Eleventy 的策略圖片) 的方式之間存在一些相似之處。要使用這些工具建立可部署的網站，需要管理資產，包括 CSS 壓縮或轉譯和套裝 JavaScript 等。正如您所想，這類工具可讓您以相同的方式處理圖片素材資源，使用您所學到的眾多程式庫。
Eleventy 的官方圖片外掛程式使用 Sharp 來調整大小、產生多種來源大小、重新編碼及壓縮，就像您學到的部分工作一樣。
與工作執行器不同的是，靜態網站產生器能直接深入分析這些程式庫的設定與使用情形，以及為生產網站產生的標記。也就是說，我們可以更大量地自動處理回應式圖片標記。舉例來說，為了顯示圖片的簡碼而叫用時，此外掛程式會根據傳送至 Sharp 的設定選項，輸出 HTML。
const Image = require("@11ty/eleventy-img");
module.exports = function(eleventyConfig) {
async function imageShortcode(src, alt, sizes="100vw") {
let metadata = await Image(src, {
formats: ["avif", "webp", "jpeg"],
widths: [1000, 800, 400],
outputDir: "_dist/img/",
filenameFormat: function( id, src, width, format, options ) {
const ext = path.extname( src ),
name = path.basename( src, ext );
return `${name}-${width}.${format}`
}
});
let imageAttributes = {
alt,
sizes,
loading: "lazy"
};
return Image.generateHTML(metadata, imageAttributes);
}
eleventyConfig.addAsyncShortcode("respimg", imageShortcode);
};
這個短碼可用來取代預設圖片語法：
{% respimg "img/butterfly.jpg", "Alt attribute.", "(min-width: 30em) 800px, 80vw" %}
如果設為輸出多個編碼 (如上所述)，產生的標記會是 <picture> 元素，內含對應的 <source> 元素、type 屬性和 srcset 屬性，並已填入產生的候選尺寸清單。
<picture><source type="image/avif" srcset="/img/butterfly-400.avif 400w, /img/butterfly-800.avif 800w, /img/butterfly-1000.avif 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/webp" srcset="/img/butterfly-400.webp 400w, /img/butterfly-800.webp 800w, /img/butterfly-1000.webp 1000w" sizes="(min-width: 30em) 800px, 80vw"><source type="image/jpeg" srcset="/img/butterfly-400.jpeg 400w, /img/butterfly-800.jpeg 800w, /img/butterfly-1000.jpeg 1000w" sizes="(min-width: 30em) 800px, 80vw"><img alt="Alt attribute." loading="lazy" src="/img/butterfly-400.jpeg" width="1000" height="846"></picture>
當然，這個外掛程式無法generate可行的 sizes 屬性，因為其無法得知轉譯版面配置中圖片的最終大小和位置，但會在產生標記時接受輸入內容，這是 RespImageLint 的另一項工作。
架構
用戶端轉譯架構需要工作執行器或 Webpack 等套件，才能自行編輯、編碼和壓縮圖片素材資源。舉例來說，回應式載入器也會使用 Sharp 程式庫重新儲存圖片素材資源。進而將圖片做為物件 import：
import imageAVIF from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=avif';
import imageWebP from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000&format=webp';
import imageDefault from 'img/butterfly.jpg?sizes[]=400,sizes[]=800,sizes[]=1000';
接著，您可以透過 React 圖片元件等抽象化圖片使用這些匯入的圖片，或是直接填入回應式圖片標記：
<picture>
<source type='image/avif' srcSet={imageAVIF.srcSet} sizes='…' />
<source type='image/webp' srcSet={imageWebp.srcSet} sizes='…' />
<img
src={imageDefault.src}
srcSet={imageDefault.srcSet}
width={imageDefault.width}
height={imageDefault.height}
sizes='…'
loading="lazy"
/>
要進行用戶端算繪的架構是 Lazysizes 和 sizes="auto" 的理想選擇，能夠為你提供幾乎全自動的回應式圖片。
內容管理系統
WordPress 是最早的原生回應式圖片標記採用者之一，自 WordPress 4.4 版推出以來，這個 API 已逐步改善，並支援 WebP 及控制輸出 MIME 類型。WordPress 核心專為使用 ImageMagick PHP 擴充功能 (或 GD 程式庫除外) 而設計。
透過 WordPress 管理員介面上傳圖片時，該來源映像檔會用於在伺服器上產生面向使用者的檔案，做法與使用本機電腦相同。根據預設，WordPress 輸出的任何圖片都會根據主題中設定的圖片大小產生產生的 srcset 屬性。
可供針對產生的圖片設定的兩項重要設定是壓縮品質和輸出 MIME 類型。
例如，如要將所有產生的圖片的預設壓縮品質設為 70，請使用下列指令：
add_filter( 'wp_editor_set_quality', function() { return 70; } );
如要提升壓縮效率，使用下列指令將已上傳 JPEG 圖片的輸出格式切換為 WebP：
add_filter( 'image_editor_output_format', function( $mappings ) {
$mappings[ 'image/jpeg' ] = 'image/webp';
return $mappings;
} );
由於 WordPress 能完全瞭解上傳圖片產生的所有替代剪輯與編碼，因此可以提供 wp_get_attachment_image_srcset() 等輔助函式，擷取圖片附件產生的完整 srcset 值。
您很可能已經猜出了 sizes 屬性的使用方法。如未提供圖片在版面配置中的使用方式，WordPress 目前預設為 sizes 值，該值有效表示「這張圖片應佔據可用可視區域的 100%，最大可視區域的內建函式大小」。這是可預測的預設值，但對任何實際應用程式而言不是正確的選項。請務必使用 wp_calculate_image_sizes()，在範本中設定符合情境的 sizes 屬性。
當然，市面上還有許多專門的 WordPress 外掛程式，可讓開發團隊和使用者加快現代圖片工作流程。值得一提的是，Jetpack 的 Site Accelerator (先前稱為「Photon」) 等外掛程式能提供「伺服器端」交涉，讓使用者不必使用 <picture> 和 type 標記模式，即可透過瀏覽器支援最小且效率最高的編碼。方法是使用圖片內容傳遞聯播網，您就可以自行運用，不必使用 CMS。
上述所有方法也適用於 Shopify 等代管 CMS 解決方案，但機製本身略有不同：針對產生替代圖片來源和對應的 srcset 屬性和透過 <picture> 元素產生對應 srcset 屬性提供類似的掛鉤。