imagekit

<p>Images make up a critical part of all websites and mobile applications these days. They are the centerpieces of a great product and user experience. Managing your images and delivering the perfect image, tailored and optimized for your user’s device is, therefore, more critical than it has ever been. However, this takes up a lot of development and maintenance time that could have otherwise been used in building your core product. This is where ImageKit can excel.</p>
<p>This plugin will <strong>automatically update all the image URLs in your post</strong> so that images are fetched from ImageKit for optimization and faster delivery instead of your web server.</p>
<h4>Gets the best out of all your images in less than 10 minutes</h4>
<ul>
<li>Your existing images get all the benefits instantly.</li>
<li>Size, quality & format optimizations work automatically.</li>
<li>URL-based image transformations like resize, crop, rotate etc.</li>
<li>Responsive images for a tailored experience across devices.</li>
<li>Up to 50% load time reduction with quality and format settings.</li>
<li>CDN-powered delivery of images across the globe.</li>
<li>Simple dashboard to monitor usage and manage your images.</li>
<li>Easy to integrate SDKs for uploads and other features.</li>
</ul>
<h4>Requirements</h4>
<p>You just need to <a href="https://imagekit.io/registration" rel="nofollow ugc">Create an account</a> on ImageKit to use this plugin and get optimization benefits on your WordPress website instantly.</p>
<h4>About ImageKit</h4>
<ul>
<li><a href="https://imagekit.io" rel="nofollow ugc">Main website</a></li>
<li><a href="https://imagekit.io/website-analyzer" rel="nofollow ugc">Website analyzer</a></li>
<li><a href="https://imagekit.io/features" rel="nofollow ugc">Features</a></li>
<li><a href="https://help.imagekit.io" rel="nofollow ugc">Help center</a></li>
<li><a href="https://docs.imagekit.io" rel="nofollow ugc">Developer documentation</a></li>
<li><a href="https://imagekit.io/blog" rel="nofollow ugc">Blog</a></li>
</ul>
<h4>Support</h4>
<ul>
<li>Support Email: <a href="developer@imagekit.io" rel="nofollow ugc">developer@imagekit.io</a></li>
</ul>


ImageKit – URL based image manipulation and optimization

This plugin and service sounds like it could be pretty cool, but unfortunately it's not ready for production environments yet. The plugin does not support custom wp-content directory locations and the way the rewrites work is fragile at best.

Hopefully they're able to improve the plugin because the service looks pretty interesting!

Not Ready Yet

To be very honest I have used ImageKit before but this is the first time using it with WordPress and I must say the plugin works flawlessly. The only shortcoming of the plugin is that it doesn't replace the image URLs inside the CSS (like background images). Which was a big negative in my opinion.

If I consider this plugin like a CDN plugin then both CDN Enabler (by KeyCDN) & W3 Total Cache CDN replaces image URL inside CSS files, inline CSS & internal CSS but for some reason, this plugin does not. 

So, if this plugin also provides that feature in future will definitely update my review to 5 stars and can wholeheartedly recommend this to all my WordPress clients.

Amazing Plugin But with a Small Shortcoming

Faster & lighter experience for your users. Deliver optimized images on all platforms instantly using ImageKit.

Junaid Bhura

<p><a href="https://github.com/junaidbhura/auto-cloudinary" rel="nofollow ugc">Check out the Github Repository ♥</a></p>
<p>This plugin provides a <strong>super simple</strong> <a href="https://cloudinary.com/documentation/fetch_remote_images#auto_upload_remote_resources" rel="nofollow ugc">Cloudinary auto-upload</a> implementation for WordPress.</p>
<p>It is inspired by <a href="https://developer.wordpress.com/docs/photon/" rel="nofollow ugc">Photon</a> and <a href="https://github.com/humanmade/tachyon-plugin" rel="nofollow ugc">Tachyon</a>.</p>
<p>Cloudinary will <strong>automatically fetch and serve the images</strong> from your media library like a <strong>CDN</strong>, without you having to worry about the complicated upload API! Just <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Setup" rel="nofollow ugc">set up auto-upload</a> in your Cloudinary settings, enter the details in the plugin’s options, and you’re all set!</p>
<p>Easy peasy 😎</p>
<h3>Important</h3>
<p>This plugin is <strong>incompatible with the official Cloudinary plugin</strong>. You’d need to disable that plugin before using this one.</p>
<h3>Quick Links</h3>
<p><a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Setup" rel="nofollow ugc">Setup</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/issues" rel="nofollow ugc">Issues</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Functions" rel="nofollow ugc">Functions</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Filters" rel="nofollow ugc">Filters</a> | <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Best-Practices" rel="nofollow ugc">Best Practices</a></p>
<h3>Why did you build this plugin?</h3>
<p>There already is an <strong>official Cloudinary plugin</strong> available. But in my opinion, it’s a bit of an overkill and takes over the admin UI. This plugin aims to be:</p>
<ul>
<li><strong>Super simple</strong> and light-weight</li>
<li>Totally seamless and <strong>out of the way</strong></li>
<li>A flexible tool for <strong>WordPress developers</strong></li>
</ul>
<h3>What is Cloudinary Auto-Upload?</h3>
<p>Cloudinary gives you two options to upload files to it’s servers:</p>
<ol>
<li>The complicated <strong>Upload API</strong> 😱</li>
<li>The super easy and magical <strong>Fetch API</strong> 🎩</li>
</ol>
<h4>Upload API</h4>
<p><em>TL;DR: Too complicated and in the way</em> 👎</p>
<p>Cloudinary gives you an API, using which, you can manually upload the images to Cloudinary. So you’d need an <strong>API key</strong>, etc. The <strong>official plugin</strong> uses this method. When you upload an image to the media library, it in turn, uploads it to Cloudinary. This could be a problem if you have thousands of <strong>existing images</strong>, and might not be flexible enough to support <strong>custom architecture</strong>.</p>
<h4>Fetch API</h4>
<p><em>TL;DR: Magical</em> 👍</p>
<p>This plugin uses the super easy <strong>Auto-Upload</strong> feature in the <strong>Fetch API</strong>. We just tell Cloudinary where to find the files on our server (or on S3 or anywhere on the Internet), and it <strong>automatically downloads</strong> it from there and saves it on to it’s servers the <strong>first time you ask for it</strong>, like a CDN would!</p>
<h3>What does this plugin do?</h3>
<p>This plugin does two main things:</p>
<ol>
<li>Provides a simple function <code>cloudinary_url()</code> to get a Cloudinary auto-upload URL for any image in your media library, with all the Cloudinary transformations, so you can <strong>dynamically manipulate an image on the fly</strong>.</li>
<li>Attempts to automatically convert all image URLs on the front-end into a Cloudinary auto-upload URL, so you can <strong>use Cloudinary as an image CDN</strong>.</li>
</ol>
<h3>The magical function 🎩</h3>
<p><strong><code>cloudinary_url( $identifier, $args )</code></strong></p>
<p>This function returns a Cloudinary Auto Upload URL for an image. Please read the <a href="https://github.com/junaidbhura/auto-cloudinary/wiki/Best-Practices" rel="nofollow ugc">Best Practices</a> page before using this.</p>
<h4>Parameters</h4>
<ul>
<li><strong>identifier</strong> (integer/string)(required) : Either the ID of the attachment, or a full image URL.</li>
<li><strong>args</strong> (array)(optional) : Arguments to manipulate the image.</li>
</ul>
<h4>Return Value</h4>
<p>Returns a URL (string):</p>
<pre><code>'https://res.cloudinary.com/cloud-name/auto-mapping-folder/2017/12/your-image.jpg'
</code></pre>
<h4>Arguments</h4>
<p>You can optionally send an array of arguments which can transform the image, and set a dynamic file name. Ex:</p>
<pre><code>array(
    'transform' => array( // Optional. All transformations go here.
        'width'   => 300,
        'height'  => 200,
        'crop'    => 'fill',
        'quality' => '80',
        'gravity' => 'face',
    ),
    'file_name' => 'whatever-file-name-you-want', // Optional. If you want to use a dynamic file name for SEO. Don't use the file extension!
);
</code></pre>
<p>Here’s a <a href="https://cloudinary.com/documentation/image_transformations" rel="nofollow ugc">full list of transformations</a> you can achieve with Cloudinary.</p>
<h3>Examples</h3>
<pre><code><?php
$url_1 = cloudinary_url( 123, array(
    'transform' => array(
        'width'   => 300,
        'height'  => 200,
        'crop'    => 'fill',
        'quality' => '80',
        'gravity' => 'face',
    ),
    'file_name' => 'dynamic-file-name',
) );

$url_2 = cloudinary_url( 'https://www.yourwebsite.com/wp-content/uploads/2017/12/my-image.jpg', array(
    'transform' => array(
        'width'   => 100,
        'height'  => 100,
    ),
) );

// $url_1 : https://res.cloudinary.com/cloud-name/images/w_300,h_200,c_fill,q_80,g_face/auto-mapping-folder/2017/12/my-image/dynamic-file-name.jpg
// $url_2 : https://res.cloudinary.com/cloud-name/w_100,h_100/auto-mapping-folder/2017/12/my-image.jpg
?>

<img src="<?php echo esc_url( $url_1 ); ?>" width="300" height="200" alt="">
<img src="<?php echo esc_url( $url_2 ); ?>" width="100" height="100" alt="">
</code></pre>


Auto Cloudinary

my experience with this plugin:

1. installed
2. did the setup, which is well documented
3. works!

that is exactly how a plugin should be

Super simple Cloudinary auto-upload implementation for WordPress.

ImageKit – URL based image manipulation and optimization vs Auto Cloudinary