Crop responsive images around the subject

WP SmartCrop applies CSS-defined image dimensions by cropping to fit, while preserving the original proportions. It keeps the selected focal point in view and positions it as close as possible to a rule-of-thirds composition. Automatic focal-point selection is the intended Pro addition; the documented WP SmartCrop process lets you pick focal points in the Media Library.

Target images and control cropping

Use the img.wpsmartcrop-image selector to target the images that should follow your CSS sizing rules. Smart cropping can be enabled or disabled for individual images, which is useful when some media needs different framing. The same image can be used in responsive cards, featured images, post content, or galleries.

• Supports WordPress responsive srcset sources and legacy cropped thumbnail sizes.
• Includes an automatic image preloader intended to prevent users from seeing partially loaded images.
• Uses semantic HTML5 and CSS3 in modern browsers, with an automatic HTML4 and CSS2 fallback for older browsers.
• Image processing is described as lightweight and fast, including for images in post content.

Set up the image workflow

1. Upload images to the WordPress Media Library.
2. Select an image, enable smart cropping, and open the focal-point editor for the documented manual workflow.
3. Choose the image area that should stay in view, then apply the change.
4. Insert the image into a page or post and use CSS with the img.wpsmartcrop-image selector to set its display dimensions.

Test the result, then adjust the styling for your theme or image component. Use the per-image control when a particular image should not be smart-cropped.

Compatibility and theme integrations

Compatibility is listed for W3 Total Cache, Wordfence, WPEngine's EverCache, Better WordPress Minify, and Google's PageSpeed Module. Primary browser testing includes Safari, Chrome, Firefox, and Microsoft Edge; this is not an exhaustive device list. The add-on listing also says WP SmartCrop has not been tested with the latest three major WordPress releases and may have compatibility issues.

Theme developers should contact Bytes.co before integrating WP SmartCrop. The source notes a separate paid branch for theme developers with required changes and integration considerations.