內容簡介
I. 臉部偵測
WordPress (WP) 外掛/主題會依照固定位置 {上方、中央、下方} x {靠左、置中、靠右} 修剪圖片。然而，這常常會導致縮圖切到臉部的部分。本外掛（Auto Smart Thumbnails, AST）利用臉部偵測功能讓臉部始終位於修剪圖片的中心。
II. 縮小圖片大小
有許多方式可以備份/儲存圖片，但是網頁伺服器主機通常是最後的選擇（成本太高）。原則上，你的網頁伺服器只有單一用途：快速提供精簡的網站。因此，縮小圖片大小對於使用者體驗與網站維護都很關鍵。
媒體檔案（PDF、影片和圖片）通常會佔用最多的儲存空間。以下是一些與圖片相關的實用技巧：
1. 使用 JPG 格式儲存圖片，除了標誌圖像以外不要使用 PNG 格式。
2. 把圖片縮小到大約（1920 x 1080，完整高清，FHD）的尺寸。
3. 刪除不使用的縮圖。
AST 外掛協助你完成以上第 2 點和第 3 點。這外掛曾幫忙把我網站的儲存空間從 24G 縮減到 9G。
AST 可以智能地縮小大型圖片。它可以根據一個整數倍率進行縮小，例如 2、3、4 等，這樣處理完的圖像在網頁上看起來就跟原圖一樣清晰，例如一張 (5184 x 3456) 的圖像被縮小了 3 倍變成 (1728 x 1152) 的圖片，檔案大小由原來的 4.9M 縮小到 239K。而一般的工具可能會因為小數點而縮小到（1687 x 1080，短邊確切等於 FHD），導致圖像模糊。
對於小於 3840 x 2160 的圖片，甚至連縮小 2 倍的倍率也無法實現，因此 AST 會將其壓縮（使用 WP 預設的 82% 品質。雖然文檔中表示預設品質為 90%，但是代碼中為 82%）。
III. 清理縮圖
某些 WP 主題在圖片上傳時會產生許多不同大小的縮圖，有時甚至會有十幾個以上的縮圖。這些縮圖可能永遠不會用到，但卻佔用了寶貴的主機儲存空間。AST 可以幫助你刪除這些不必要的縮圖，並防止它們在圖片上傳時再次生成。當需要產生縮圖時，AST 會自動產生並儲存新的縮圖以供之後使用。
註記
AST 外掛基於 ‘Optimize images Resizing’ by OriginalEXE，但該外掛看起來已經靜止數年。
臉部偵測演算法為 Maurice Svay 編寫，它只會回傳檢測到的第一個臉部。對於大部份圖片，這個演算法工作得很好，而且比另一個實現方式 PHP-FaceDetector by Felix Koch 還要快一些。當這個演算法無法識別到臉部時，則會使用 WordPress 預設的修剪方式。
此模組設計時便具擴展性，其他外掛可以進行臉部偵測、使用更快的演算法或是提供更精確的檢測，甚至可以手動設定焦點，並將面/焦點資料存儲到影像的元數據中。AST 可以使用這些資料進行修剪。請在影像的元數據中新增一個新欄位 ‘focal_area’，例如下方：
Array (
[width] => 512
[height] => 512
[file] => 2019/04/sample-image-file.jpg
[sizes] => Array ()
[focal_area] = (
[x] => 100
[y] => 123
[w] => 58
[h] => 58
[faces] => Array (
[tharavaad-svay] => Array (
[0] => Array (
[x] => 100
[y] => 123
[w] => 58
)
)
[koch] => Array (
[0]
外掛標籤
開發者團隊
原文外掛簡介
I. Face detection
WordPress (WP) plugin/themes crop images per fixed position {top, center, bottom} x {left, center, right}. This often generates thumbnails with faces being cut out. This plugin (Auto Smart Thumbnails, AST) employs face detection to keep the face in the center of cropped images.
II. Downsize images
There are many ways to backup/store your images. Your web server host is the last option for that though (too expensive). Essentially, your web server serves one purpose and one purpose only: a lean fast website. So making it small and agile is critical in both user experience and website maintenance.
Media files (pdf, movie and images) are usually the biggest storage eaters. Here are some practice tips related to images:
1. Use jpg to store images. No png except for the logo images.
2. Downsize your images to about (1920×1080, full high definition, FHD).
3. Get rid of those unused thumbnails.
AST helps you with 2 and 3. It helped to trim my website from 24G to 9G.
AST downsizes big images in a smart way. It does so by a factor of an integer, e.g. 2, 3, 4 etc, so that the result image looks as crisp as the original on a webpage, e.g. an image of (5184×3456) is downsized by 3 to (1728×1152) and its file size is down from 4.9M to 239K. Conventional tools may downsize it by 3.2 (=3456/1080) to (1687×1080, short side exact FHD). Blurring happens because of the pixels fractioned.
For images smaller than 3840×2160, which can’t even be downsized by a factor of 2, they will be compressed (at WP default quality of 82%. Though the document says the default quality is 90%, in code it’s 82%.)
III. Cleanup thumbnails
Some WP themes generate many, sometimes 10s of, custom sized thumbnails when an image is uploaded. These thumbnails may never be used yet take up your precious server storage space. AST helps remove these unused thumbnails and stop them from being generated when an image is uploaded. But a thumbnail will be generated and generated only when it is requested. The newly generated thumbnail is then stored for later use.
Notes
AST is based on ‘Optimize images Resizing’ by OriginalEXE, which seems to be dormant for years.
Face detection algorithm is by Maurice Svay. It returns only the first face candidate detected. For most of images it does the job well and and it’s a bit faster than another implementation PHP-FaceDetector by Felix Koch. When it fails to detect face(s), the cropping will be done by the WordPress default.
The module is designed to be extendable. Other plugins can do face detection, e.g. with faster algorithms or better accuracy, or can designate focal points manually, then store the face/focal data to the meta data of an image. AST can pick up the data to do cropping. This is done by adding a new field ‘focal_area’ in the meta data, as below:
Array (
[width] => 512
[height] => 512
[file] => 2019/04/sample-image-file.jpg
[sizes] => Array ()
[focal_area] = (
[x] => 100
[y] => 123
[w] => 58
[h] => 58
[faces] => Array (
[tharavaad-svay] => Array (
[0] => Array (
[x] => 100
[y] => 123
[w] => 58
)
)
[koch] => Array (
[0] => Array (
[x] => 100
[y] => 123
[w] => 58
)
[1] => Array (
...
)
)
)
)
)
The focal_area is defined by the position (x, y) and width and height. External plugins can store the detection result with these 4 parameters. AST can pick them up for cropping.
The ‘focal_area’ can be non-face objects that users want to focus on. Within it, the optional ‘faces’ array defines faces detected and the algorithm used.
To make it simple, some assumptions and numbers are defined as below:
To resave png images in jpg will save a lot space. But it needs to mess up with the WP database, which I stayed away for now. You may want to convert your png images to jpg before uploading them to your server.
An image is downsized only when its short side > 2×1080. Otherwise it’s re-compressed when its size >128k bytes. The new jpg file replaces the original only when it’s 25k bytes smaller.
When a downsizing happens, the original is saved in uploads/ast-backup. The year/month structure is preserved. To save the server storage space, it’s recommended to download it and delete it from the server.
I didn’t get time to handle the localization language files yet.
Please let me know how it works for you, or any improvement suggestions or feedback. Thanks!
Source code
Discord forum