Both ShortPixel Image Optimizer (SPIO) and ShortPixel Adaptive Images (SPAI) can smart crop your images easily.
What is smart cropping and why is it helpful?
Regular cropping doesn’t take into consideration the elements in a picture. Let’s take this picture, for example:
When cropped regularly to 500×320 pixels, it will look like this:
On the other hand, when smart cropped, it will look like this:
As you can see, the framing on the smart-cropped thumbnail is much better!
Unsplash
How does smart cropping work in ShortPixel’s plugins?
SPIO
In ShortPixel Image Optimizer, smart cropping works for both the original image and thumbnails. Each time an image is sent for optimization, the thumbnails keep the original size but display the “right” part of the image, as described above.
Smart Cropping also has a nice additional feature: the cropped thumbnails become sharper. This sometimes makes the Smart Cropping thumbnails a bit larger, but the result is amazing. Here is an example. This is an original thumbnail:
And this one is sharpened, after going through the Smart Crop algorithm:
The original image is also cropped in the same way, but only if the ” Resize large images” option is enabled.
SPAI
In ShortPixel Adaptive Images, smart cropping works mainly on background images, i.e. images set with the CSS background-image property. This is because normal images in img HTML tags display the entire image and therefore do not require (smart) cropping.
However, not all background images are smart cropped. Our API supports smart cropping by simply passing the width and height of the image, but in order for SPAI to send a width and height parameter that triggers smart cropping, the image needs to not be fully visible on the page, as it would be with the background-size: cover property/value.
Where can I enable smart cropping?
SPIO
You can enable the option by going to Settings > ShortPixel > General. Look for the setting “Enable SmartCrop”:
SPAI
You can enable the option by following the steps below:
- Go to Settings > ShortPixel AI
- Enable the Advanced mode
-
Go to the Behavior tab.
-
Enable “Smart crop”:
