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 進行圖像優化有什麼好的選擇？