【學習圖片】14.網站生成器、框架和內容管理系統

前端小智發表於2023-03-14
網站框架
本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。

瞭解內容管理系統（CMS），如WordPress和其他站點生成器如何使響應式影像的使用更加容易。

雖然比起手動儲存每張圖片的交替剪輯並透過Squoosh.app這樣的工具進行手工最佳化肯定是一種進步，但將圖片壓縮作為開發過程中的一個步驟也有一些限制。首先，你不一定能完全控制整個網站所使用的圖片--網路上大多數面向使用者的圖片更多的是內容問題，而不是開發問題，它們由使用者或編輯上傳，而不是與JavaScript和樣式表等開發資產一起存在於資源庫中。

這通常需要一個以上的影像管理過程：一個開發層面的任務，用於建設和維護網站的影像資產--背景、圖示、標誌等等；另一個任務是關於透過使用網站產生的影像資產，如編輯團隊在帖子中嵌入的照片，或使用者上傳的頭像。雖然上下文可能不同，但最終目標是相同的：根據開發團隊定義的設定自動編碼和壓縮。

幸運的是，你從本地開發工作流程中瞭解到的影像處理庫可以在任何情況下使用。雖然對你的響應式影像標記不可能有一個放之四海而皆準的方法，但這些系統提供了合理的預設值、配置選項和API掛鉤，以以便簡化其實現。

靜態站點生成器

與任務執行器相比，靜態網站生成器（如Jekyll或Eleventy）處理影像的方式有一些相似之處。使用這些工具來製作一個可以部署的網站，需要對資產進行管理，包括CSS最小化或轉碼和捆綁JavaScript。正如你可能想象的那樣，這意味著這些工具使你能夠以同樣的方式處理影像資產，使用你已經瞭解過的許多庫。

Eleventy的官方影像外掛使用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>元素、型別屬性和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>

當然，這個外掛無法生成一個可行的尺寸屬性，因為它無法知道圖片在渲染的佈局中的最終尺寸和位置，但它在生成你的標記時確實接受一個輸入--這是RespImageLint的另一項工作。

框架

客戶端渲染框架將需要一個任務執行器或像Webpack這樣的捆綁器來編輯、編碼和壓縮影像資產本身。例如，Responsive-loader也使用Sharp庫來重新儲存影像資產。然後，它允許你將你的影像作為物件匯入。

  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中引入了對WebP的支援和對輸出mime型別的控制後，該API已經被逐步改進。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值。

到此為止，你可能已經猜到了，使用尺寸屬性的工作就有點麻煩了。在沒有任何關於圖片在佈局中如何使用的資訊的情況下，WordPress目前預設的尺寸值實際上是說 "這個圖片應該佔據100%的可用視口，直到最大的源的固有尺寸"--這是一個可預測的預設值，但對於任何真實世界的應用來說，這不是一個正確的預設值。請確保使用wp_calculate_image_sizes()來在你的模板中設定適合上下文的尺寸屬性。

當然，有無數的WordPress外掛致力於使現代影像工作流程對開發團隊和使用者都更快。也許最令人興奮的是，像Jetpack的網站加速器（以前的 "Photon"）這樣的外掛可以為編碼提供伺服器端的協商，確保使用者將收到他們的瀏覽器能夠支援的最小、最有效的編碼，而不需要<picture>和型別標記模式。它透過使用影像內容交付網路來做到這一點--這是一項你可以自己利用的技術，與你的CMS無關。

所有這些也適用於像Shopify這樣的託管CMS解決方案，儘管機制本身會有些不同：透過<picture>元素提供類似的鉤子來生成備用的影像源和相應的srcset屬性和藝術指導。

原文：https://web.dev/learn/images/automating/

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章