WordPress 圖像大小解釋

已發表: 2020-10-21

WordPress 圖像大小有時可能有點神秘！您是否曾在管理區域中看到此媒體設置頁面並想知道它是什麼？

在本文中，我們將介紹 WordPress 圖像大小、它們的全部內容以及這會如何影響上傳時間等內容。此外，我們還將了解 WordPress 如何在網站佈局中利用這些不同的圖像大小。最後，我們將看看如何刪除不必要的圖像尺寸或添加您自己的自定義尺寸。

圖像大小在 WordPress 中的作用是什麼？

您網站上的圖像看起來漂亮、清晰且質量高，這一點非常重要。有幾個因素決定了這一點，包括圖像的物理大小（尺寸和文件大小）和圖像的分辨率。如果您的圖像太大（例如 10,000 像素寬）並且文件太大（即超過 1mb 左右），您將開始減慢網站的加載速度。相反，如果圖像尺寸太小，那麼您可能會看到圖像質量下降......換句話說，它可能開始看起來模糊或有顆粒感。

WordPress 試圖通過根據圖像位置提供最佳圖像大小來達到平衡。每次您將圖像上傳到 WordPress 媒體庫時，它都會創建 3 種不同的圖像大小。這些是“縮略圖尺寸”、“中尺寸”和“大尺寸”，尺寸分別為 150×150 像素、300×300 像素（最大）和 1024×1024 像素（最大）。最後，它還將存儲一個“全尺寸”圖像，這是上傳圖像的原始尺寸。

WordPress 在前端佈局中的不同位置使用這些尺寸以及我們稍後將看到的其他尺寸。這樣做是為了使圖像既 a) 看起來不錯，又 b) 加載速度很快。

更詳細地檢查 WordPress 圖像大小

讓我們通過一個示例來了解當您將圖像上傳到 WordPress 時，“幕後”究竟發生了什麼。出於本示例的目的，我們將上傳一個名為“post1-feature-image”的圖像。它的大小為 294KB，尺寸為 2089×1175 像素，我們將使用默認的 WordPress 二十二十主題來執行此操作（其他主題可能會改變 WordPress 處理圖像的方式）。

通過 WordPress 媒體庫上傳此圖片後，我們可以使用 FTP 客戶端連接到我們的網站，如果我們前往 Upload 文件夾，我們將看到已創建了多個版本的圖片。

以紅色突出顯示，您將看到我們的默認圖像尺寸。縮略圖已被裁剪，因為這是通過媒體設置設置為默認值的。

“中號”和“大號”已調整大小，以避免改變圖像的實際比例。所以，這就是為什麼例如“中等尺寸”是 300×169 而不是 300×300。生成的其餘圖像是一些 WordPress 核心文件和二十二十主題代碼的結果。

獲得技術！

如果您對創建其他圖像尺寸時發生的事情背後的代碼感興趣，那麼本文的這一部分適合您。如果沒有，請隨意跳到下一章！

WordPress 正在從位於 wp-includes/ 文件夾內的名為 media.php 的文件中提取指令。前往第 4861 行，您將看到以下內容：

 /** * Add additional default image sub-sizes. * * These sizes are meant to enhance the way WordPress displays images on the front-end on larger, * high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes * when the users upload large images. * * The sizes can be changed or removed by themes and plugins but that is not recommended. * The size "names" reflect the image dimensions, so changing the sizes would be quite misleading. * * @since 5.3.0 * @access private */ function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 ); }

post1-feature-image-768x432.jpg是由於 WordPress 4.4 版中添加的“medium_large”大小而創建的，以提供更好的響應式圖像支持，並且可以在各種便攜式設備上看到。它在文件 schema.php 第 522 行的“wp-admin/includes”文件夾中定義

// 4.4.0 'medium_large_size_w' => 768, 'medium_large_size_h' => 0,

並要求在第 86 行中的 image.php 文件：

 } elseif ( 'medium_large' === $size ) { $max_width = intval( get_option( 'medium_large_size_w' ) ); $max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg和post1-feature-image-1980x1114.jpg是從第 53 行的 functions.php 文件中的“二十二十”主題生成的：

 /* * Enable support for Post Thumbnails on posts and pages. * * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/ */ add_theme_support( 'post-thumbnails' ); // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

這樣做是因為二十二十主題使用 1200 像素作為特色圖像的圖像大小。如果我們創建一個測試帖子並添加一個特色圖像，然後在前端的單個帖子頁面中，我們可以通過右鍵單擊特色圖像並查看瀏覽器的檢查器來查看這個大小是如何使用的。

最後，1980px 圖像是用於其他帖子模板的特色圖像的大小。您可以通過將測試帖子模板更改為“封面模板”來查看這一點。然後，在封面圖片的 HTML 元素的檢查器 CSS 中，我們可以看到這個尺寸是如何使用的：

始終值得確保您上傳的任何圖像都比精選圖像和封面圖像寬度更寬，以使它們看起來清晰。 WordPress 可以有效地減小圖像大小，但它不能放大小圖像並使其看起來不錯。

刪除不必要的 WordPress 圖像大小

正如我們所見，每當我們將圖像上傳到媒體庫時，WordPress 都會忙於生成一系列圖像大小。但是我們真的需要所有這些圖像嗎？實際上，不，我們沒有。它不僅減慢了圖像上傳的速度，因為 WordPress 不得不在後台創建這些不同大小的圖像，而且它還佔用了我們不需要在服務器上使用的存儲空間。那麼，我們如何阻止 WordPress 創建我們不需要的圖像大小？請仔細閱讀，找出答案！

注意：除非您在演示網站上遵循這些說明，否則我們建議您在子主題的 functions.php 文件中實施下面概述的更改。 對父主題中的 functions.php 文件所做的更改將在下次更新主題時被擦除。

刪除 WordPress 默認圖像大小

這可以通過編輯主題的functions.php並添加以下代碼輕鬆完成：

 add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' ); // Remove default image sizes here. function prefix_remove_default_images( $sizes ) { unset( $sizes['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

為了進行測試，讓我們將新圖像（在我們的示例中稱為 post2-featured-image）上傳到媒體庫並刷新上傳文件夾的 FTP 視圖。

如您所見，通過我們的 functions.php 文件告訴 WordPress 刪除 4 個默認圖像大小，我們已經停止 WordPress 在我們的媒體文件夾中創建這些。展望未來，對我們主題代碼的這個簡單更新意味著我們不會用不需要的圖像大小堵塞我們的服務器。這將節省空間並加快圖像上傳過程。

從媒體庫中刪除舊圖像尺寸

您可能已經註意到，雖然沒有為我們上傳的新圖像創建 4 個默認圖像大小，但之前上傳的圖像仍然在媒體庫中保存了所有 8 個變體。很有可能，除非這是一個全新的網站，否則您將上傳數十甚至數百張圖像，並且在所有情況下都會創建這些“額外”尺寸。那麼該怎麼辦？

首先要確定的是您需要這些圖像嗎？在繼續刪除 WordPress 生成的圖像之前，您必須確認這些尺寸不再使用。檢查您的博客文章、特色圖片和網站的任何其他部分，以確保沒有舊尺寸仍在使用。

處理這些不需要的舊圖像文件的好方法是使用 Force Regenerate Thumbnail 插件，該插件將通過並自動刪除它們。安裝並激活插件，然後點擊插件菜單中的“重新生成所有縮略圖”按鈕（工具->強制重新生成縮略圖）。

刷新您的 FTP 媒體文件夾視圖，您會看到默認的 WordPress 圖像已經消失。好的！

為默認尺寸實現相同結果的另一種簡單方法是在 wp-admin 的 Settings > Media 中將它們的尺寸值更改為“0”。然後你會看到這樣的東西：

另一種方法是更改 update_option( 'SIZE_w/h', 0 ); 在functions.php中。請記住對子主題 functions.php 文件執行此操作，以便以後更新主題時您的更改不會丟失。

 update_option( 'thumbnail_size_h', 0 ); update_option( 'thumbnail_size_w', 0 ); update_option( 'medium_size_h', 0 ); update_option( 'medium_size_w', 0 ); update_option( 'large_size_h', 0 ); update_option( 'large_size_w', 0 );

進行此更新後，您會看到將反映媒體設置中的尺寸值（來自 WP Admin）現在已更新為 0。

刪除其他主題圖像尺寸

我們現在已經成功處理了 WordPress 核心生成的默認圖像。我們現在可以繼續處理由主題創建的圖像（在本例中為二十二十）。如果像我們的默認圖像尺寸一樣，您認為這些不是必需的，那麼您可以對您的主題代碼進行一些更改，以阻止 WordPress 將來生成這些尺寸。

為此，我們將使用 init 鉤子和 remove_image_size 核心函數。複製下面的代碼並將其粘貼到您的 functions.php 文件中。如果您沒有像我們在這裡一樣使用二十二十個主題，那麼將“post-thumbnail”和“twentytwenty-fullscreen”名稱替換為您的活動主題的名稱。

 function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } } } add_action('init', 'remove_extra_image_sizes');

如果我們現在上傳一張新圖片並通過我們的 FTP 客戶端檢查我們的上傳文件夾，我們將看到除了“post-thumbnail”和“twentytwenty-fullscreen”之外的所有尺寸都已生成。

添加您自己的自定義圖像大小

現在我們學習瞭如何在 WordPress 中刪除多餘的圖像大小，讓我們看看如何根據模板的需要添加自己的自定義圖像大小。

我們如何決定我們需要什麼樣的圖像尺寸？

假設您有一個網站，其主列的寬度為 960 像素，其中特色圖片位於頂部，帖子內容位於下方。您想要的圖像大小將是 960 像素。如果有的話，不要忘記計算 CSS 填充。例如，如果父元素的內邊距總和為 20 像素，則圖像的正確寬度將為 920 像素。左邊距為 960 像素減去 20 像素，右邊距為 20 像素。

註冊新的圖像尺寸

註冊新尺寸的一種簡單方法是使用 WordPress 提供的內置 add_image_size() 函數。函數結構為：

 add_image_size( name, width, height, crop )

這些選項中的大多數都是不言自明的。最後一個選項（裁剪）決定了 WordPress 在調整大小時是否尊重我們圖像的比例，或者是否裁剪我們的圖像。如果裁剪選項設置為“真”，則圖像將被裁剪並且比例將不被考慮。如果裁剪選項被跳過或設置為 false，那麼我們的圖像比例將受到尊重。

讓我們嘗試一下，並使用 2089×1175 像素的測試圖像監控結果。

首先讓我們添加這段代碼：

 add_image_size( 'new-post-thumb', 220, 180 );

這將在我們的上傳文件夾中生成一個post2-feature-image-220x124.jpg而不是 220×180，因為沒有設置裁剪 (false)。如果您插入以下內容，也會發生同樣的情況：

 add_image_size( 'new-post-thumb', 220, 180, false );

但是，如果您像這樣將裁剪設置為 true，則將保存圖像post2-feature-image-220x180.jpg 。

 add_image_size( 'new-post-thumb', 220, 180, true );

最後，您可以指定作物的定位方式。而不是 'true' 只使用像 'left' 或 'top' 或兩者的選項：

 add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

該數組指定裁剪位置。可以使用的值是：

對於 x_crop_position：“左”、“中心”或“右”。
對於 y_crop_position：“頂部”、“中心”或“底部”。

每種情況下的輸出都將是原始圖像的不同部分。這裡有些例子：

通過向我們的主題添加代碼來手動執行此操作的替代方法是使用插件，例如 Simple Image Sizes。儘管如此，即使您確實使用了這樣的插件，了解幕後發生的事情也是有幫助的。

結論

在 WordPress 中使用正確的圖像尺寸很重要——它不僅可以通過向網站查看者呈現清晰、高分辨率的圖像來確保高質量的用戶體驗，而且還會顯著影響加載時間和服務器使用率。希望本文能幫助您了解圖像大小在 WordPress 中的重要性，以及您可以覆蓋、刪除或擴展圖像大小以滿足您網站需求的方法，以及如何通過停止 WordPress 來節省大量服務器空間為您上傳的每張圖片生成不必要的尺寸。