網站產生器、架構和 CMS

瞭解 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"
  />

能進行用戶端轉譯的架構是 Lazysizessizes="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> 元素的圖片方向