響應式圖像在 WordPress 核心中的重要性

響應式圖像的流行度正在增加，這是任何人都不能忽視的。 然而，在流行的 CMS（如 WordPress）中使用相同的功能可能是一種具有挑戰性的體驗。 即使用戶可以自己在主題中編寫功能，該任務也可能是一項耗時的任務。 但是自從引入 WordPress 4.4 以來，情況發生了巨大變化，這使得開發人員和管理員可以更輕鬆地將響應式圖像功能嵌入到他們的主題中。

主要亮點包括 WordPress 核心中響應式圖像插件的可用性。 這意味著用戶現在可以享受響應式圖像支持，這是 WordPress 中的默認功能。 讓我們仔細看看這個功能是如何工作的，以及如何謹慎使用它以利用 WordPress 網站的潛力。

功能的運作

所有的內容和圖片將包括srcset和大小屬性，一旦你更新到WordPress 4.4。 這主要是為了保證每個圖像尺寸的可用性，以保持實際請求的圖像尺寸。 在縱橫比與原始請求圖像相比發生變化的情況下，自定義裁剪將被排除在srcset屬性之外。 同時，通過 wp-get-attachment-image 函數調用圖像時，會返迴響應式圖像。

響應式圖像在 WordPress 4.4 中充當背景功能，因為每當通過媒體上傳器在 WordPress 中上傳圖像時，它都會自動執行此功能。 在srcset和尺寸本自動後台進程的結果，每當圖像顯示在頁屬性被顯示。 這意味著新的響應式圖像功能中沒有可見的界面。 由於缺乏可見的界面，沒有任何選項可用，例如用於填寫目的的表格或用於檢查目的的框和用於切換目的的選項。

主題開發人員必須通過編輯主題的functions.php 文件來確保在圖像中提供準確的尺寸屬性。 考慮它，因為srcset和大小屬性存在於圖像標籤是實際代表在WordPress的響應圖像是非常重要的。 最難預測的是尺寸屬性，儘管 WordPress 在srcset屬性中包含所有可用尺寸時表現良好。 尺寸屬性有責任向瀏覽器解釋圖像在每個可用視口處的寬度。 然而，結果可能會因用戶主題可用的樣式而異，提供合理的默認值，即 'sizes=” (max width: {{image-width}}) 100 vw, {{image-width}}”

使用 size 屬性，用戶可以完成兩件事。 首先，它確保圖像中有效尺寸屬性的可用性，就規格而言，這現在已成為先決條件。 其次，它可以防止瀏覽器提供與請求的原始寬度相比更大的圖像源。 然而，當任何 CSS 以完全不同的視口寬度操作圖像大小時，默認尺寸屬性的好處就會變小。

主題開發者可以藉助過濾器鉤子調整每個圖像對應的尺寸屬性，以確保在每個斷點期間交付完美的尺寸屬性。 因此，在提供準確的響應式圖像支持時，需要確保主題不依賴於默認尺寸屬性。 主要原因是在視口的大小與原始請求的圖像大小相比較小的情況下，不允許瀏覽器通過默認大小屬性修改或更改圖像源。 但是，如果圖像已經在斷點處用 CSS 更改過，那麼源也不能更改。

如果您是可以訪問 WordPress 代碼庫的個人，或者您是主題開發人員，則更有必要過濾主題中的圖像以提供準確的尺寸屬性。 這應該是新版本發布後最重要的事情。

為您的主題配置響應式圖像

引入了許多新的鉤子以及新的功能，這些功能可用於提供一定程度的響應式圖像支持，這些支持是根據您的主題量身定制的。 必須包含在srcset屬性中的圖像的最大寬度可以由主題開發人員通過 max_srcset_image_width 鉤子過濾。 圖像的srcset屬性可以通過掛鉤 wp_calculate_image_srcset 來過濾，而尺寸屬性可以由主題開發人員自定義，以便通過過濾 wp_calculate_image_sizes 來適應他們主題中的圖像斷點。

可以使用 wp_calculate_image_sizes 過濾內容圖像，而可以使用 wp_get_attachment_image_attributes 函數過濾帖子縮略圖/特色圖像。 需要兩種不同的功能是必需的，因為在不同斷點處顯示特色圖像的方式會改變主題，並且與在相同情況下顯示內容圖像的方式完全不同。 因此，WordPress 4.4 為主題開發人員提供了以各種方式過濾圖像的增強機會，從而盡可能具體。

所有這些都凸顯了用戶和主題開發人員將能夠通過 WordPress 4.4 更新通過響應式圖像支持實現的即時好處。 它還允許主題開發人員在不考慮視口大小和像素密度的情況下包含清晰明快的圖像，從而提高網站的性能，因為網頁可以避免加載更大圖像所需的額外時間。 儘管對於用戶來說這是一個自動過程，但主題開發人員負責通過在主題內的functions.php 文件中花費時間來調整圖像大小屬性。 此外，必須記住，響應式圖像插件的創建和合併更多的是團隊的努力。