Auto Smart Thumbnails

Descripción

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:

1. 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.

2. 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.

3. 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