kubiq

<p>This plugin is ment mostly for developers. You need to use its functions in your theme or plugin to make it works.</p>
<p>This plugin offers functionality like <strong>face detection crop</strong>, <strong>focal point selector</strong> for every image, <strong>function to output responsive <picture> sizes</strong> and more.</p>
<h3>Why to use this plugin?</h3>
<p>WordPress will automatically create a lot of smaller images for every uploaded image.<br />
You mostly need just 1 or 2 of them, so this is a waste of your server space and resources.<br />
Also cropped images are generated from the center by default, which can be a problem many times.</p>
<p><strong>This plugin allows you to:</strong></p>
<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>
<p><strong>bis_get_attachment_image_src( $attachment_id, $size, $crop )</strong></p>
<p>Function inspired by default <code>wp_get_attachment_image_src</code>.<br />
If you used <em>Fly Dynamic Image Resizer</em> 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 <em>Fly Dynamic Image Resizer</em> and it will still work.</p>
<p>Parameters:</p>
<ul>
<li>
<p><strong>attachment_id</strong> (integer)(required)<br />
The ID of the image attachment<br />
Example: <code>123</code> or <code>get_post_thumbnail_id()</code> or <code>get_field('my_image')</code></p>
</li>
<li>
<p><strong>size</strong> (array)(required)<br />
An array with the width and height<br />
Example: <code>[ 1920, 1080 ]</code></p>
</li>
<li>
<p><strong>crop</strong> (boolean/integer/array/string)(optional)<br />
Skip this or pass <code>false</code> or <code>0</code> if you don’t want to crop, just rescale,<br />
otherwise pass <code>true</code> or <code>1</code> to use focal point crop that is selected in admin media (by default center),<br />
or pass array with string x-axis and y-axis parameters like <code>[ 'right', 'bottom' ]</code><br />
or pass array with numeric x-axis and y-axis parameters like <code>[ 0.5, 0.8 ]</code><br />
or pass string <code>'face'</code> to automatically detect face position (can be exhaustive on server resources)</p>
</li>
</ul>
<p>Returns:</p>
<pre><code>array(
    'src' => (string) url of the image,
    'width' => (integer) width in pixels,
    'height' => (integer) height in pixels
)
</code></pre>
<p> </p>
<p><strong>bis_get_attachment_image( $attachment_id, $size, $crop, $attr )</strong></p>
<p>Function inspired by default <code>wp_get_attachment_image</code>.<br />
If you used <em>Fly Dynamic Image Resizer</em> 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 <em>Fly Dynamic Image Resizer</em> and it will still work.</p>
<p>Parameters:</p>
<ul>
<li>
<p><strong>attachment_id</strong> (integer)(required)<br />
The ID of the image attachment<br />
Example: <code>123</code> or <code>get_post_thumbnail_id()</code> or <code>get_field('my_image')</code></p>
</li>
<li>
<p><strong>size</strong> (array)(required)<br />
An array with the width and height<br />
Example: <code>[ 1920, 1080 ]</code></p>
</li>
<li>
<p><strong>crop</strong> (boolean/integer/array/string)(optional)<br />
Skip this or pass <code>false</code> or <code>0</code> if you don’t want to crop, just rescale,<br />
otherwise pass <code>true</code> or <code>1</code> to use focal point crop that is selected in admin media (by default center),<br />
or pass array with string x-axis and y-axis parameters like <code>[ 'right', 'bottom' ]</code><br />
or pass array with numeric x-axis and y-axis parameters like <code>[ 0.5, 0.8 ]</code><br />
or pass string <code>'face'</code> to automatically detect face position (can be exhaustive on server resources)</p>
</li>
<li>
<p><strong>attr</strong> (array)(optional)<br />
An array of attributes<br />
Special attribute <code>retina</code> allows you to automatically generate srcset for <code>@2x</code> retina devices<br />
Example: <code>array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )</code></p>
</li>
</ul>
<p>Returns:</p>
<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>
<p> </p>
<p><strong>bis_get_attachment_picture( $attachment_id, $sizes, $attr )</strong></p>
<p>Parameters:</p>
<ul>
<li>
<p><strong>attachment_id</strong> (integer)(required)<br />
The ID of the image attachment<br />
Example: <code>123</code> or <code>get_post_thumbnail_id()</code> or <code>get_field('my_image')</code></p>
</li>
<li>
<p><strong>sizes</strong> (array)(required)<br />
An array with the <code>key => value</code> pair<br />
where <code>key</code> means <strong>breakpoint</strong><br />
and <code>value</code> is array of <strong>width, height, crop and alternative_attachment_id</strong><br />
Example: <code>[ 767 => [ 767, 400, 1, 987 ], 9999 => [ 1200, 500, 1 ] ]</code><br />
This will generate <code><source media="(max-width:767px)" srcset="image987_767x400.jpg"></code><br />
and <code><source media="(max-width:9999px)" srcset="image_1200x500.jpg"></code><br />
and <code><source media="(min-width:10000px)" srcset="image.jpg"></code><br />
If you will provide also key <code>0</code> then it will replace <code><img></code>.</p>
</li>
<li>
<p><strong>attr</strong> (array)(optional)<br />
An array of attributes<br />
Special attribute <code>retina</code> allows you to automatically generate srcset for <code>@2x</code> retina devices<br />
Example: <code>array( 'retina' => true, 'alt' => 'Custom alt text', 'class' => 'my-class', 'id' => 'my-id' )</code></p>
</li>
</ul>
<p>Example:<br />
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:</p>
<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>
<p>Returns:</p>
<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>
<p> </p>
<h3>There is no fallback for <code>fly_add_image_size</code> function</h3>
<p>If you used <em>Fly Dynamic Image Resizer</em> before, you need to remove <code>fly_add_image_size</code> functions from your code.<br />
You can create your own variables for sizes if you need it, like</p>
<pre><code>define( 'MY_CUSTOM_SIZE', [ 1000, 200 ] );
</code></pre>
<p>and then just us it inside functions, like:</p>
<pre><code>echo bis_get_attachment_image( get_post_thumbnail_id(), MY_CUSTOM_SIZE );
</code></pre>
<p> </p>
<h3>Support other extensions than JPG, PNG and WEBP</h3>
<p>This plugin works by default only with JPG, PNG and WEBP files,<br />
but you can easily allow any other mime types,<br />
just use this code eg. in <code>wp-config.php</code> or in your <code>functions.php</code></p>
<pre><code>define( 'BIS_ALLOWED_MIME_TYPES', array( 'image/jpeg', 'image/png', 'any_other/mime_type' ) );
</code></pre>
<p> </p>
<h3>Get selected image focal point</h3>
<p>Focal point data are stored in the attachement post metas.<br />
There is also custom sanitize function, that you can use.</p>
<pre><code>$focal_point = sanitize_focal_point( get_post_meta( get_post_thumbnail_id(), 'focal_point', true ) );
</code></pre>
<p>Returns:</p>
<pre><code>array( 0.5, 0.8 )
</code></pre>
<p>which means that focal point is 50% from left and 80% from top</p>


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

stefanledin

<p>Responsify WP is the WordPress plugin that cares about responsive images.</p>
<h3>Features</h3>
<ul>
<li>Use <code>img</code> with srcset/sizes attributes.</li>
<li>…or the <code>picture</code> element.</li>
<li>Works with or without <a href="http://scottjehl.github.io/picturefill/" rel="nofollow ugc">Picturefill</a>.</li>
<li>Supports high resolution images (retina).</li>
<li>Custom media queries.</li>
<li>Handpick which image sizes to use.</li>
<li>Responsive background images.</li>
</ul>
<h3><a href="https://www.youtube.com/watch?v=3ThYWO6vHKI&spfreload=10" rel="nofollow ugc">Demo</a></h3>
<p>Responsify WP finds featured images and all images inside the content and makes them responsive.<br />
For example, you might have a template that looks like this:</p>
<pre><code><article>
    <h1><?php the_title();?></h1>
    <?php the_content();?>
</article>
</code></pre>
<p>That will output something like this:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img src="large.jpg" alt="Image description">
</article>
</code></pre>
<p>But once you have activated the plugin, it will look like this instead:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <img sizes="(min-width: 300px) 1024px, (min-width: 150x) 300px, 150px"
        srcset="thumbnail.jpg 150w,
        medium.jpg 300w,
        large.jpg 1024w"
        alt="Image description">
</article>
</code></pre>
<p>You can also choose to use the <code>picture</code> element instead:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <picture>
        <source srcset="full-size.jpg" media="(min-width: 1024px)">
        <source srcset="large.jpg" media="(min-width: 300px)">
        <source srcset="medium.jpg" media="(min-width: 150px)">
        <img srcset="thumbnail.jpg" alt="Image description">
    </picture>
</article>
</code></pre>
<p>It also works with high resolution (retina) images:</p>
<pre><code><article>
    <h1>Hello world</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <picture>
        <source srcset="full-size.jpg" media="(min-width: 1024px)">
        <source srcset="large.jpg, large_retina.jpg 2x" media="(min-width: 300px)">
        <source srcset="medium.jpg, medium_retina.jpg 2x" media="(min-width: 150px)">
        <img srcset="thumbnail.jpg, thumbnail_retina.jpg 2x" alt="Image description">
    </picture>
</article>
</code></pre>
<p>The different versions of the image in the examples above is in the standard <code>thumbnail</code>, <code>medium</code>, <code>large</code> and <code>full</code> sizes.<br />
The <strong>media queries</strong> are based on the width of the “previous” image.<br />
Any <strong>custom sizes</strong> of the image will also be found and used.</p>
<h3>Settings</h3>
<p>You can <strong>select which image sizes</strong> that the plugin should use from the RWP settings page.<br />
These settings can be overwritten from your templates.</p>
<pre><code><?php

// Using get_posts()
$posts = get_posts( array(
    'post_type' => 'portfolio',
    'rwp_settings' => array(
        'sizes' => array('large', 'full')
    )
) );
foreach( $posts as $post ) {
    // ...
}

// Using WP_Query()
$query = new WP_Query( array(
    'category_name' => 'wordpress',
    'rwp_settings' => array(
        'sizes' => array('large', 'full')
    )
) );
if ( $query->have_posts() ) {
    // ...
}
?>
</code></pre>
<p><strong>Available settings:</strong></p>
<ul>
<li>Select which image sizes to use.</li>
<li>Set/override attributes.</li>
<li>Set custom media queries.</li>
<li>Turn on/off retina.</li>
<li>Ignore image formats.</li>
</ul>
<h3>Functions</h3>
<p>RWP provides a number of functions that can generate responsive images in your templates.<br />
Let’s say that you have the following markup for a very large header image:</p>
<pre><code><header>
    <?php the_post_thumbnail( 'full' ); ?>
</header>
</code></pre>
<p>As you probably know, <code>the_post_thumbnail()</code> will create a regular <code><img></code> tag with the full-size image in this case.<br />
But you don’t want to send a big 1440px image to a mobile device. This can easily be solved like this:</p>
<pre><code><header>
    <?php
    $thumbnail_id = get_post_thumbnail_id( $post->ID );

    // Generate an <img> tag with srcset/sizes attributes.
    echo rwp_img( $thumbnail_id );

    // Generate a <picture> element
    echo rwp_picture( $thumbnail_id );
    ?>
</header>
</code></pre>
<h3>Website</h3>
<p><a href="http://responsifywp.com" rel="nofollow ugc">http://responsifywp.com</a>.</p>
<h3>Demo</h3>
<p><a href="http://responsifywp.com/demo" rel="nofollow ugc">http://responsifywp.com/demo</a>.</p>
<h3>Documentation and examples</h3>
<p><a href="https://github.com/stefanledin/responsify-wp" rel="nofollow ugc">https://github.com/stefanledin/responsify-wp</a>.</p>
<h3>Requirements</h3>
<ul>
<li>PHP 5.3</li>
</ul>


Better image sizes vs Responsify WP