[WordPress] 外掛分享： Better image sizes

前言介紹

• 這款 WordPress 外掛「Better image sizes」是 2022-11-17 上架。
• 目前有 2000 個安裝啟用數。
• 上一次更新是 2025-12-01，距離現在已有 86 天。
• 外掛最低要求 WordPress 3.0.1 以上版本才可以安裝。
• 外掛要求網站主機運作至少需要 PHP 版本 5.6 以上。
• 有 5 人給過評分。
• 論壇上目前有 1 個提問，問題解答率 0%

外掛協作開發者

kubiq |

外掛標籤

media | retina | Optimize | responsive | thumbnails |

內容簡介

此外掛受Fly Dynamic Image Resizer啟發，但它提供更複雜的功能，例如為每個圖像提供焦點選擇器、輸出響應性<picture>大小等。

此外掛主要面向開發人員。您需要在您的佈景主題或外掛中使用其功能才能使其運作。

使用此外掛的原因

WordPress會自動為每個上傳的圖像創建許多較小的圖像。
通常您只需要其中的1或2個，這樣會浪費您的服務器空間和資源。
此外，預設情況下從中心生成裁剪的圖像，這在許多情況下可能是問題。

此外掛允許您：

禁用自動生成的圖像尺寸
只動態生成所需的圖像尺寸以及所需的圖像
逐個或全部從此外掛中刪除已生成的圖像尺寸
指定不同的焦點，它在創建圖像的裁剪版本時將處於焦點
禁用大型圖像尺寸閾值，因此大於2560x2560px的圖像不會縮小

其運作方式

如果您禁用現有的自動生成的圖像尺寸，則新上傳的圖像將不會創建其尺寸
您需要在您的代碼中指定圖像所需的尺寸
圖像在首次訪問頁面時動態創建，並存儲在上傳的文件夾中
接下來每次訪問該頁面時都會加載已生成的圖像

功能

bis_get_attachment_image_src( $attachment_id, $size, $crop )

這個功能是參考預設的wp_get_attachment_image_src而來。
如果您以前使用過Fly動態圖像調整大小，則不需要在您的代碼中更改fly_get_attachment_image_src的功能 - 這是一個後備，因此您可以停用Fly動態圖像調整大小，它仍然可以運作。

參數：

attachment_id (integer)(必要)
圖像附件的ID
例如：123 或 get_post_thumbnail_id() 或 get_field('my_image')

size (array)(必要)
一個有寬度和高度的陣列
例如：[ 1920, 1080 ]

crop (boolean/array)(選用)
如果您不想裁剪，只需縮放，請跳過這一步或傳遞 false 或 0，
否則傳遞true或1以使用在管理媒體中選擇的焦點裁剪（預設情況下中心），
或傳遞具有字符串x軸和y軸參數的數組，例如[ 'right', 'bottom' ]
或傳遞具有數字x軸和y軸參數的數組，例如[ 0.5, 0.8 ]

返回值：

array(
'src' => (string) 圖像url,
'width' => (integer) 寬度（像素）,
'height' => (integer) 高度（像素）
)

 

bis_get_attachment_image( $attachment_id, $size, $crop, $attr )

這個功能是參考預設的wp_get_attachment_image而來。
如果您以前使用過Fly動態圖像調整大小，則不需要在您的代碼中更改fly_get_attachment_image的功能 - 這是一個後備，因此您可以停用Fly動態圖像調整大小，它仍然可以運作。

參數：

attachment_id (integer)(必要)
圖像附件的ID
例如：123 或 get_post_thumbnail_id() 或

原文外掛簡介

This plugin is ment mostly for developers. You need to use its functions in your theme or plugin to make it works.
This plugin offers functionality like face detection crop, focal point selector for every image, function to output responsive sizes and more.
Why to use this plugin?
WordPress will automatically create a lot of smaller images for every uploaded image.
You mostly need just 1 or 2 of them, so this is a waste of your server space and resources.
Also cropped images are generated from the center by default, which can be a problem many times.
This plugin allows you to:

disable autogenerated image sizes
dynamically generate only needed image sizes for only needed images
delete generated image sizes from this plugin individually or all together
specify different focal point that will be in the focus while creating cropped versions of the image
automatically detect focal point by face detection algorithm
disable big image size threshold, so image bigger than 2560x2560px will be NOT scaled down

How it works

if you disable existing autogenerated image sizes, then newly uploaded images will not create its sizes
you need to specify in your code what size is needed for the image
image is dynamically created on the first visit of the page and is stored in uploads folder
every next visit of that page will just load already generated image

Functions
bis_get_attachment_image_src( $attachment_id, $size, $crop )
Function inspired by default wp_get_attachment_image_src.
If you used Fly Dynamic Image Resizer before, you don’t need to replace fly_get_attachment_image_src functions in your code – there is a fallback, so you can deactivate Fly Dynamic Image Resizer and it will still work.
Parameters:

attachment_id (integer)(required)
The ID of the image attachment
Example: 123 or get_post_thumbnail_id() or get_field('my_image')

size (array)(required)
An array with the width and height
Example: [ 1920, 1080 ]

crop (boolean/integer/array/string)(optional)
Skip this or pass false or 0 if you don’t want to crop, just rescale,
otherwise pass true or 1 to use focal point crop that is selected in admin media (by default center),
or pass array with string x-axis and y-axis parameters like [ 'right', 'bottom' ]
or pass array with numeric x-axis and y-axis parameters like [ 0.5, 0.8 ]
or pass string 'face' to automatically detect face position (can be exhaustive on server resources)

Returns:
array(
'src' => (string) url of the image,
'width' => (integer) width in pixels,
'height' => (integer) height in pixels
)

 
bis_get_attachment_image( $attachment_id, $size, $crop, $attr )
Function inspired by default wp_get_attachment_image.
If you used Fly Dynamic Image Resizer before, you don’t need to replace fly_get_attachment_image functions in your code – there is a fallback, so you can deactivate Fly Dynamic Image Resizer and it will still work.
Parameters:

attachment_id (integer)(required)
The ID of the image attachment
Example: 123 or get_post_thumbnail_id() or get_field('my_image')

size (array)(required)
An array with the width and height
Example: [ 1920, 1080 ]

crop (boolean/integer/array/string)(optional)
Skip this or pass false or 0 if you don’t want to crop, just rescale,
otherwise pass true or 1 to use focal point crop that is selected in admin media (by default center),
or pass array with string x-axis and y-axis parameters like [ 'right', 'bottom' ]
or pass array with numeric x-axis and y-axis parameters like [ 0.5, 0.8 ]
or pass string 'face' to automatically detect face position (can be exhaustive on server resources)

attr (array)(optional)
An array of attributes
Special attribute retina allows you to automatically generate srcset for @2x retina devices
Example: array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )

Returns:

 
bis_get_attachment_picture( $attachment_id, $sizes, $attr )
Parameters:

attachment_id (integer)(required)
The ID of the image attachment
Example: 123 or get_post_thumbnail_id() or get_field('my_image')

sizes (array)(required)
An array with the key => value pair
where key means breakpoint
and value is array of width, height, crop and alternative_attachment_id
Example: [ 767 => [ 767, 400, 1, 987 ], 9999 => [ 1200, 500, 1 ] ]
This will generateandandIf you will provide also key 0 then it will replace .

attr (array)(optional)
An array of attributes
Special attribute retina allows you to automatically generate srcset for @2x retina devices
Example: array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )

Example:
To generate perfect fullwidth hero image, that will looks great on 4K devices and also on small phones, but it will load only needed size, you can use:
echo bis_get_attachment_picture(
get_post_thumbnail_id(),
[
375 => [ 375, 500, 1, 987 ],
575 => [ 575, 500, 1, 987 ],
767 => [ 767, 500, 1, 987 ],
991 => [ 991, 500, 1 ],
1199 => [ 1199, 500, 1 ],
1399 => [ 1399, 500, 1 ],
1600 => [ 1600, 500, 1 ],
1920 => [ 1920, 500, 1 ],
2560 => [ 2560, 500, 1 ],
3440 => [ 3440, 500, 1 ],
3840 => [ 3840, 500, 1 ],
]
);

Returns:

 
There is no fallback for fly_add_image_size function
If you used Fly Dynamic Image Resizer before, you need to remove fly_add_image_size functions from your code.
You can create your own variables for sizes if you need it, like
define( 'MY_CUSTOM_SIZE', [ 1000, 200 ] );

and then just us it inside functions, like:
echo bis_get_attachment_image( get_post_thumbnail_id(), MY_CUSTOM_SIZE );

 
Support other extensions than JPG, PNG and WEBP
This plugin works by default only with JPG, PNG and WEBP files,
but you can easily allow any other mime types,
just use this code eg. in wp-config.php or in your functions.php
define( 'BIS_ALLOWED_MIME_TYPES', array( 'image/jpeg', 'image/png', 'any_other/mime_type' ) );

 
Get selected image focal point
Focal point data are stored in the attachement post metas.
There is also custom sanitize function, that you can use.
$focal_point = sanitize_focal_point( get_post_meta( get_post_thumbnail_id(), 'focal_point', true ) );

Returns:
array( 0.5, 0.8 )

which means that focal point is 50% from left and 80% from top

各版本下載點

• 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
• 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Better image sizes」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

---

3.2 | 3.3 | 3.4 | 3.5 | 3.6 | 3.7 | 3.8 | 3.9 | trunk |

延伸相關外掛（你可能也想知道）

• LiteSpeed Cache 》LiteSpeed Cache for WordPress（LSCWP）是一種全方位的網站加速外掛，包括獨家的伺服器層快取和一系列的優化功能。, LSCWP 支援 WordPress Multisite 及大多...。
• WP Fastest Cache – WordPress Cache Plugin 》han PNG or JPEG, which means faster downloads and less data consumption for your visitors, Database Cleanup – Detect and delete unnecessary d...。
• W3 Total Cache 》W3 Total Cache (W3TC) 透過整合內容傳遞網絡 (CDN) 和最新最佳實踐等功能，提高網站性能、減少加載時間，增進 SEO、核心 Web 主要指標和整體用戶體驗。W3TC ...。
• Autoptimize 》Autoptimize 能夠輕鬆優化您的網站。它可以整合、縮小和快取腳本和樣式表，在默認情況下向頁面 head 中注入 CSS，但也可以內嵌關鍵 CSS 並延遲整合的完整 CSS...。
• WP-Sweep 》這個外掛可以清理以下項目：, , 修改版本, 自動草稿, 已刪除評論, 未經批准的評論, 垃圾評論, 已刪除評論, 已孤立的文章元數據, 已孤立的評論元數據, 已孤立...。
• Optimize Database after Deleting Revisions 》這個外掛是一個「一鍵式」WordPress資料庫清理/優化器。, 主要功能, , 刪除文章、頁面和/或自訂文章類型的修訂版本（您可以選擇保留最近的「X」個修訂版本，...。
• Disable and Remove Google Fonts | GDPR & DSGVO friendly 》透過停用佈景主題和外掛所載入的 Google 字型，提升前端表現。本外掛會儘可能地移除 Google 字型，但有些需要進行額外步驟，請參考這裡的詳細說明：從 WordPr...。
• Aruba HiSpeed Cache 》Aruba HiSpeed Cache 是一個外掛，直接與 HiSpeed Cache 服務介面互動，該服務適用於 Aruba 主機平台，並能在 WordPress 儀表板中自動管理，無需訪問網站控制...。
• Advanced Database Cleaner – Optimize & Clean Database to Speed Up Site Performance 》>, 透過刪除孤立的項目，例如「舊版本」、「垃圾註解」等進行數據庫清理、優化數據庫等操作，以及其他更多功能。, 如果您已經使用 WordPress 一段時間，那麼...。
• 10Web Booster – Website speed optimization, Cache & Page Speed optimizer 》10Web Booster 是提升網站整體效能的速度優化外掛程式，讓您專注並蓬勃發展 WordPress 網站的創意方面，同時讓我們專心於 WordPress 效能最佳化。透過 10Web ...。
• Seraphinite Accelerator 》這個外掛可以加速您的網站，使其更具吸引力和搜索引擎友好性。詳細了解如何使用。, 若要使用免費的額外功能，請按照屏幕上的外掛程式指示安裝免費的延伸外掛...。
• Clearfy Cache – WordPress optimization plugin, Minify HTML, CSS & JS, Defer 》數千個使用者已經使用 Clearfy 外掛優化他們的 WordPress 網站。這是一個綜合且免費的工具，擁有豐富的設定。搭配其他外掛使用，可以讓您的 WordPress 網站更...。
• Debloat – Remove Unused CSS, Optimize JS 》這是一個針對進階使用者所設計的外掛，能夠優化CSS載入、移除未使用的CSS，以及提供defer或延遲載入JS的優化功能。, 這是提升核心網頁表現和整體網站效能的完...。
• BJ Lazy Load 》延遲載入可使您的網站加載速度更快，並節省頻寬。, 此外掛可取代您所有的文章圖片、文章縮略圖、大頭貼圖片和內容的 iframe，並使用佔位圖片，當訪客滾動頁面...。
• WP Performance Score Booster – Optimize Speed, Enable Cache & Page Preload 》WP Performance Score Booster 可以讓網站更快，加速頁面載入時間，並立即提高服務如 GTmetrix、Pingdom、YSlow 和 PageSpeed 的網站效能分數。, 此外掛程式...。