瞭解 WordPress 等 CMS 和其他網站產生器,如何打造這項技術 使用回應式圖片更簡單
除了手動儲存每張圖片的替代剪輯,也可以使用如 Squoosh.app,在開發程序中將圖片壓縮自動壓縮納入,有一些限制。第一,您不得 隨時都能完全掌控網站使用的圖片,多數使用者在網路上看到的圖片都是內容疑慮。 是由使用者或編輯者上傳,而非一併儲存在存放區中,而非隨開發資產保存在存放區中 JavaScript 和樣式表。
這通常需要多個圖片管理程序,也就是模型所用圖片素材資源的開發層級工作。 建構及維護網站 (背景、圖示、標誌等) 又擔心使用系統產生的圖片素材資源 例如編輯團隊貼文中內嵌的相片,或使用者上傳的顯示圖片。雖然背景資訊 最終目標都是相同的:根據開發團隊定義的設定自動編碼和壓縮。
幸好,您在本機開發工作流程中學會的影像處理程式庫,可以用任意數量使用 背景資訊。雖然回應式圖片標記無法採用一體適用的做法,但這些系統提供了合理的 預設值、設定選項和 API 掛鉤,讓實作過程更加順利。
靜態網站產生器
相較於工作執行器,Jekyll 或 Eleventy 的圖片產生器等靜態網站產生器的方式也有相似之處。使用 這些工具要製作可供部署的網站,就必須對資產進行管理,包括 CSS 壓縮或轉譯和組合 最基本的 JavaScript如同您可能想的,這意味著這些工具可讓您透過多個程式庫,以相同方式處理圖片素材資源 現有的個別區域
Eleventy 官方圖片外掛程式使用 Sharp,提供調整大小、產生多種來源大小、重新編碼及壓縮功能,就像本課程介紹的一些工作一樣。
不同於工作執行器,靜態網站產生器可直接深入分析這些程式庫的設定和使用方式。 還有為生產網站產生的標記,這代表可以將回應式圖片自動化處理得多了。 標記。例如,當叫用圖片做為顯示圖片的簡碼時,此外掛程式會根據 就會回傳到與 Sharp 之間相關的設定選項
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>
當然,由於無法知道最終大小和位置,因此這個外掛程式無法產生有效的 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 是最早使用的原生回應式圖片標記技術之一,自此之後,API 已逐漸改善。 在 WordPress 4.4 中,可支援 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 的網站加速器 (舊稱「Photon」) 等外掛程式
可提供伺服器端的編碼交涉,確保使用者會收到其最小、最有效率的編碼,
瀏覽器不必依賴 <picture>
和 type
標記模式,就能提供支援。編碼器-解碼器架構
傳遞網路 — 這一種技術,可單獨使用,完全獨立於 CMS。
Shopify 等代管 CMS 解決方案都是如此,但運作方式有些不同:提供類似的功能
產生替代圖片來源和對應srcset
屬性的掛鉤
和<picture>
元素的圖片方向。