WordPress 使用 $content_width 進行影像最佳化有什麼好的選擇？

問題描述

WordPress 中的 $content_width GLOBAL 透過限制影像的大小和嵌入到帖子中來實現許多主題甚至一些外掛，這是向 wordpress.org 提交的主題的要求。

它是透過使用：

$content_width = 584; // Twenty Twelve example

如果您將大影像 (預設 1024×1024) 插入到一個帖子中，則會導致：

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

如果相反，您刪除此全域性設定並插入實際的影像大小，請使用 add_image_size 設定它導致：

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328"

刪除全域性和插入大影像，這是非常常見的，通常會導致超過 2x 的儲存，在具有多個影像的頁面中，我看到頁面載入時儲存了數百 KB 。

使用 add_image_size，並刪除插入全尺寸影像的能力不是更好的選擇？

PS 。我寫了關於 it here 與更準確的資料

最佳解決方案

請記住，$content_width 全域性不僅用於影像，還用於嵌入式物件，如影片。因此，任何解決方案不僅僅是使用/支援 $content_width 本身的一個例子。

通常，主題將以幾種方式限制 content-area 影像：

大影像尺寸：定義適合主題設計的 $content_width
原始/完整影像大小：為 #content img { max-width: XXX; height: auto; }定義 CSS 規則，以確保插入的 full-size 影像不會破壞佈局
縮圖影像大小：呼叫 set_post_thumbnail_size()來定義精選影像/Post Thumbnail 預設 thumbnail 大小。 (注意：我個人建議不要使用此方法。為特徵影像定義特定位置的自定義影像尺寸，然後透過 the_post_thumbnail( $size )在特定模板位置呼叫該自定義尺寸。)

如您所發現的那樣，由於 WordPress 選擇具有中間影像大小的方式用於任何給定的影像請求，因此該請求可能會導致 browser-scaled 影像。

Theme-Defined 大影像的值

一個選擇是重新定義大影像尺寸的設定。 (請謹慎行事，對於您自己的網站來說，這是一個很好的選擇，但公開分發的主題與使用者配置設定混淆是最好的灰色區域。)

大影像尺寸設定儲存為：

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

因此，您可以根據 $content_width 值設定這些值：

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(當然，你想在這個周圍放置一些故障保護/error-checking) 。

刪除選項插入 Full-Sized 影像

如果你只是想阻止使用者插入 full-size 影像 (再次：請謹慎行事; 這可能是外掛區域)，可以過濾'image_size_names_choose'：

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

再次：您可能想在這裡新增一些合理的失敗，因為這個過濾器在多個地方使用。

為 full-post-width 影像定義自定義影像大小

與上一個選項相關，您可以定義'full-post-width'影像大小：

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

然後，將其新增到可用選項列表中：

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

參考文獻

What is a good alternative to using $content_width for image optimization?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

WordPress 使用 $content_width 進行影像最佳化有什麼好的選擇？