kubiq

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 <picture> sizes and more.
<h3>Why to use this plugin?</h3>
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:
<ul>
<li>disable autogenerated image sizes</li>
<li>dynamically generate only needed image sizes for only needed images</li>
<li>delete generated image sizes from this plugin individually or all together</li>
<li>specify different focal point that will be in the focus while creating cropped versions of the image</li>
<li>automatically detect focal point by face detection algorithm</li>
<li>disable big image size threshold, so image bigger than 2560x2560px will be NOT scaled down</li>
</ul>
<h3>How it works</h3>
<ol>
<li>if you disable existing autogenerated image sizes, then newly uploaded images will not create its sizes</li>
<li>you need to specify in your code what size is needed for the image</li>
<li>image is dynamically created on the first visit of the page and is stored in <code>uploads</code> folder</li>
<li>every next visit of that page will just load already generated image</li>
</ol>
<h3>Functions</h3>
bis_get_attachment_image_src( $attachment_id, $size, $crop )
Function inspired by default <code>wp_get_attachment_image_src</code>. 
If you used Fly Dynamic Image Resizer before, you don’t need to replace <code>fly_get_attachment_image_src</code> functions in your code – there is a fallback, so you can deactivate Fly Dynamic Image Resizer and it will still work.
Parameters:
<ul>
<li>
attachment_id (integer)(required) 
The ID of the image attachment 
Example: <code>123</code> or <code>get_post_thumbnail_id()</code> or <code>get_field('my_image')</code>
</li>
<li>
size (array)(required) 
An array with the width and height 
Example: <code>[ 1920, 1080 ]</code>
</li>
<li>
crop (boolean/integer/array/string)(optional) 
Skip this or pass <code>false</code> or <code>0</code> if you don’t want to crop, just rescale, 
otherwise pass <code>true</code> or <code>1</code> 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 <code>[ 'right', 'bottom' ]</code> 
or pass array with numeric x-axis and y-axis parameters like <code>[ 0.5, 0.8 ]</code> 
or pass string <code>'face'</code> to automatically detect face position (can be exhaustive on server resources)
</li>
</ul>
Returns:
<pre><code>array(
 'src' => (string) url of the image,
 'width' => (integer) width in pixels,
 'height' => (integer) height in pixels
)
</code></pre>
 
bis_get_attachment_image( $attachment_id, $size, $crop, $attr )
Function inspired by default <code>wp_get_attachment_image</code>. 
If you used Fly Dynamic Image Resizer before, you don’t need to replace <code>fly_get_attachment_image</code> functions in your code – there is a fallback, so you can deactivate Fly Dynamic Image Resizer and it will still work.
Parameters:
<ul>
<li>
attachment_id (integer)(required) 
The ID of the image attachment 
Example: <code>123</code> or <code>get_post_thumbnail_id()</code> or <code>get_field('my_image')</code>
</li>
<li>
size (array)(required) 
An array with the width and height 
Example: <code>[ 1920, 1080 ]</code>
</li>
<li>
crop (boolean/integer/array/string)(optional) 
Skip this or pass <code>false</code> or <code>0</code> if you don’t want to crop, just rescale, 
otherwise pass <code>true</code> or <code>1</code> 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 <code>[ 'right', 'bottom' ]</code> 
or pass array with numeric x-axis and y-axis parameters like <code>[ 0.5, 0.8 ]</code> 
or pass string <code>'face'</code> to automatically detect face position (can be exhaustive on server resources)
</li>
<li>
attr (array)(optional) 
An array of attributes 
Special attribute <code>retina</code> allows you to automatically generate srcset for <code>@2x</code> retina devices 
Example: <code>array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )</code>
</li>
</ul>
Returns:
<pre><code><img src="https://web.com/wp-content/uploads/bis-images/1234/your-image-500x500-f50_50.jpg" width="500" height="500" alt="Alt text">
</code></pre>
 
bis_get_attachment_picture( $attachment_id, $sizes, $attr )
Parameters:
<ul>
<li>
attachment_id (integer)(required) 
The ID of the image attachment 
Example: <code>123</code> or <code>get_post_thumbnail_id()</code> or <code>get_field('my_image')</code>
</li>
<li>
sizes (array)(required) 
An array with the <code>key => value</code> pair 
where <code>key</code> means breakpoint 
and <code>value</code> is array of width, height, crop and alternative_attachment_id 
Example: <code>[ 767 => [ 767, 400, 1, 987 ], 9999 => [ 1200, 500, 1 ] ]</code> 
This will generate <code><source media="(max-width:767px)" srcset="image987_767x400.jpg"></code> 
and <code><source media="(max-width:9999px)" srcset="image_1200x500.jpg"></code> 
and <code><source media="(min-width:10000px)" srcset="image.jpg"></code> 
If you will provide also key <code>0</code> then it will replace <code><img></code>.
</li>
<li>
attr (array)(optional) 
An array of attributes 
Special attribute <code>retina</code> allows you to automatically generate srcset for <code>@2x</code> retina devices 
Example: <code>array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )</code>
</li>
</ul>
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:
<pre><code>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 ],
 ]
);
</code></pre>
Returns:
<pre><code><picture>
 <source media="(max-width:375px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-375x500-f50_50.jpg">
 <source media="(max-width:575px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-575x500-f50_50.jpg">
 <source media="(max-width:767px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-767x500-f50_50.jpg">
 <source media="(max-width:991px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-991x500-f50_50.jpg">
 <source media="(max-width:1199px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1199x500-f50_50.jpg">
 <source media="(max-width:1399px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1399x500-f50_50.jpg">
 <source media="(max-width:1600px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1600x500-f50_50.jpg">
 <source media="(max-width:1920px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1920x500-f50_50.jpg">
 <source media="(max-width:2560px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-2560x500-f50_50.jpg">
 <source media="(max-width:3440px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-3440x500-f50_50.jpg">
 <source media="(max-width:3840px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-3840x500-f50_50.jpg">
 <source media="(min-width:3841px)" srcset="https://web.com/wp-content/uploads/2022/11/your-image.jpg">
 <img width="4000" height="2000" src="https://web.com/wp-content/uploads/2022/11/your-image.jpg" alt="Some alt" loading="lazy">
</picture>
</code></pre>
 
<h3>There is no fallback for <code>fly_add_image_size</code> function</h3>
If you used Fly Dynamic Image Resizer before, you need to remove <code>fly_add_image_size</code> functions from your code. 
You can create your own variables for sizes if you need it, like
<pre><code>define( 'MY_CUSTOM_SIZE', [ 1000, 200 ] );
</code></pre>
and then just us it inside functions, like:
<pre><code>echo bis_get_attachment_image( get_post_thumbnail_id(), MY_CUSTOM_SIZE );
</code></pre>
 
<h3>Support other extensions than JPG, PNG and WEBP</h3>
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 <code>wp-config.php</code> or in your <code>functions.php</code>
<pre><code>define( 'BIS_ALLOWED_MIME_TYPES', array( 'image/jpeg', 'image/png', 'any_other/mime_type' ) );
</code></pre>
 
<h3>Get selected image focal point</h3>
Focal point data are stored in the attachement post metas. 
There is also custom sanitize function, that you can use.
<pre><code>$focal_point = sanitize_focal_point( get_post_meta( get_post_thumbnail_id(), 'focal_point', true ) );
</code></pre>
Returns:
<pre><code>array( 0.5, 0.8 )
</code></pre>
which means that focal point is 50% from left and 80% from top

Better image sizes


Great plugin. It lets you cut out all the random image sizes (and their file bloat) so you can just make the image sizes you actually need. One of the first plugins I install for every build. 



I'm so thankful to the developer for carrying on the legacy of the deprecated "Fly Images" plugin.


Fantastic

Dynamically generate only needed image sizes for only needed images, with manually selected focal point for crops

GrandPlugins

Get more control over the image sizes being created on your WordPress website. You can create unlimited image sizes, choose the width, height and crop. you can disable any image size from being created for new uploaded images. 
The plugin offers the option to disable “BIG image” threshold done by WordPress for images above 2560px in width or height. 
The plugin wil list all the image sizes inside the image edit page along with the size image dimensions and its file size. 
The list will display if any of the sizes is broken which means the size image is missing and you can fix it in a single click.
<h3>Features</h3>
<ul>
<li>Create custom subsizes.</li>
<li>Create any missing image subsize.</li>
<li>Disable any image size.</li>
<li>Delete image subsize.</li>
<li>List all image subsizes in image edit page.</li>
<li>Disable the wordpress [ “BIG image” threshold ]</li>
</ul>
<h3>For more features and more control</h3>
👉 <a href="https://grandplugins.com/product/image-sizes-controller/?utm_source=free" rel="nofollow ugc">Premium</a> 👈
<ul>
<li>Options to choose Exact Dimensions and Upscale for created custom sizes.</li>
<li>Create image sizes only based on upload location and image filename.</li>
<li>List of missing sizes in each image edit page with an option to create them.</li>
<li>List all missing and broken sizes in media page with an option to fix them in on click.</li>
<li>Bulk generate subsizes.</li>
<li>Bulk delete subsizes.</li>
<li>Create any custom subsize per image.</li>
<li>Control image sizes created when uploading to media folders and directories. compatible with Real Media Library and Real Physical Media Plugins.</li>
<li>Resize any subsize for any image.</li>
</ul>
<h3>Installation</h3>
<ol>
<li>Upload the plugin to the <code>/wp-content/plugins/</code> directory</li>
<li>Activate the plugin through the ‘Plugins’ menu in WordPress</li>
<li>Settings page in `Media/Image Sizes Controller tab</li>
</ol>
<h3>Check Our other plugins</h3>
<a href="https://grandplugins.com/product/woo-paypal-checkout/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Paypal Checkout</a>
<a href="https://grandplugins.com/product/wp-debug-viewer/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Debug Viewer</a>
<a href="https://grandplugins.com/product/woo-order-splitter/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Order Splitter</a>
<a href="https://grandplugins.com/product/wp-db-controller/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">WP DB Controller</a>
<a href="https://grandplugins.com/product/woo-conditional-gateways/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Conditional Gateways</a>
<a href="https://grandplugins.com/product/woo-user-orders-limit/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo User Orders Limit</a>
<a href="https://grandplugins.com/product/woo-lemonsqueezy-gateway/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Lemonsqueezy Gateway</a>
<a href="https://grandplugins.com/product/woo-email-tracker/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Email Tracker</a>
<a href="https://grandplugins.com/product/woo-order-email-recipients/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Email Recipients</a>
<a href="https://grandplugins.com/product/woo-instock-notifier/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo instock notifier</a>
<a href="https://grandplugins.com/product/woo-gift-cards/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Gift Cards</a>
<a href="https://grandplugins.com/product/woo-restrict-orders/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Restrict Orders</a>
<a href="https://grandplugins.com/product/woo-bulk-price-change/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Bulk Price & Stock Manager</a>
<a href="https://grandplugins.com/product/woo-variation-sold-individually/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Variation Sold individually</a>
<a href="https://grandplugins.com/product/woo-paddle-checkout/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="nofollow ugc">Woo Paddle Checkout</a>
<a href="https://grandplugins.com/product/woo-sales-notification/?utm_source=wp&utm_medium=image-sizes-controller" rel="nofollow ugc">Woo Sales popup</a>
<a href="https://grandplugins.com/product/woo-advanced-pricing/?utm_source=wp&utm_medium=image-sizes-controller" rel="nofollow ugc">Woo Advanced Pricing</a>
<a href="https://grandplugins.com/product/woo-advanced-add-to-cart/?utm_source=wp&utm_medium=image-sizes-controller" rel="nofollow ugc">Woo Advanced Bundles</a>
<a href="https://grandplugins.com/product/woo-advanced-captcha/?utm_source=wp&utm_medium=image-sizes-controller" rel="nofollow ugc">Woo Advanced Captcha</a>
<a href="https://grandplugins.com/product/woo-cart-tracker/?utm_source=wp&utm_medium=image-sizes-controller" rel="nofollow ugc">Woo Cart Tracker</a>
<a href="https://wordpress.org/plugins/watermark-images-for-wp-and-woo-grandpluginswp/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">WP Watermark Images</a>
<a href="https://wordpress.org/plugins/coming-soon-products-for-woocommerce/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Coming Soon Products for WooCommerce</a>
<a href="https://wordpress.org/plugins/quick-view-and-buy-now-for-woocommerce/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Quick View and Buy Now for WooCommerce</a>
<a href="https://wordpress.org/plugins/sidebars-blocks/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Sidebars Gutenberg Blocks</a>
<a href="https://wordpress.org/plugins/image-block-zoom-on-hover/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Image Zoom on Hover</a>
<a href="https://wordpress.org/plugins/large-images-uploader/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Large Images Uploader</a>
<a href="https://wordpress.org/plugins/ultimate-maintenance-mode-for-woocommerce/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Maintenance Mode for WooCommerce</a>
<a href="https://wordpress.org/plugins/ajax-single-add-to-cart-for-woocommerce/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Single Ajax Add to Cart For WooCommerce</a>
<a href="https://wordpress.org/plugins/gif-uploader-wp-grandplugins/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">GIF Uploader</a>
<a href="https://wordpress.org/plugins/pdf-password-protect/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">PDF Password Protect</a>
<a href="https://wordpress.org/plugins/gpls-paypal-subscriptions/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Paypal Subscriptions</a>
<a href="https://wordpress.org/plugins/best-seller-for-woocommerce/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Best Seller for WooCommerce</a>
<a href="https://wordpress.org/plugins/avif-support/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">AVIF Support</a>
<a href="https://wordpress.org/plugins/simple-countdown/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Simple Countdown</a>
<a href="https://wordpress.org/plugins/watermark-pdf/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Watermark PDF</a>
<a href="https://wordpress.org/plugins/cart-limiter/?utm_source=free&utm_medium=gpls-issl-images-subsizes-list" rel="ugc">Woo Cart Limiter</a>

Image Sizes Controller, Create Custom Image Sizes, Disable Image Sizes

Get more control over the image sizes being created on your WordPress website. You can create unlimited image sizes, choose the width, height and crop …

Better image sizes vs Image Sizes Controller, Create Custom Image Sizes, Disable Image Sizes