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

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