Ainsley Clark

<p>Squidge is a FREE WordpPress Plugin built for developers in mind compressing and convert images using jpegoptim,<br />
optipng, cwebp, and libavif. It’s extremley simple to use and is designed to increase PSI and boost rankings.</p>
<h3>Why?</h3>
<p>Image compression in WordPress can be costly, confusing and sometimes just simply don’t work. We have aimed to simplify<br />
the process by requiring the developer to install the required package on the operating system and Squidge does the<br />
hard work for you.</p>
<ul>
<li><strong>IT’S FREE</strong></li>
<li>Unlimited file size, no limits.</li>
<li>Optimised for your site to rank.</li>
<li>CLI to regenerate all of your media files.</li>
<li>Helper functions to output images in templates.</li>
<li>Uses the native <code>cwebp</code> and <code>libavif</code> libraries.</li>
</ul>
<h3>What does Squidge do?</h3>
<p>Squidge compresses and converts image files when the user has uploaded a file to WordPress.</p>
<ul>
<li>Compresses JPG images using <code>jpegoptim</code>.</li>
<li>Compresses PNG images using <code>optipng</code>.</li>
<li>Converts JPG and PNG images to <code>.webp</code> files using <code>cwebp</code> with the appended extension  e.g. <code>image.jpg.webp</code>.</li>
<li>Converts JPG and PNG images to <code>.avif</code> files using <code>libavif</code> with the appended extension  e.g. <code>image.jpg.avif</code>.</li>
</ul>
<h3>Render Images</h3>
<p>To render images in templates, you can either set up nginx or apache rules to serve images dynamically or used the<br />
    squidge_image helper function. This dynamically checks if an <code>.avif</code> or <code>.webp</code> file is available on the file system<br />
and returns the output.</p>
<h3>Function</h3>
<pre><code>/**
 * Returns a <picture> element with source media for the standard file passed
 * (such as a JPG), the .avif file, the .webp file (if to exist on the file system).
 *
 * Appropriate <source> elements for image sizes with max widths.
 * Finally, the main be outputted with alt and title text.
 *
 * - If lazy is true, the data-src or data-srcset will be appended.
 * - If a class is set, the class will be outputted on the <picture> element.
 *
 * @param $image_id
 * @param string $class
 * @param false $lazy
 * @return string
 */
function squidge_image($image_id, $class = '', $lazy = false)
</code></pre>
<h3>Output</h3>
<pre><code><picture class="picture">
    
    <source media="(max-width: 400px)" srcset="/sample-image.jpg.avif" type="image/avif">
    <source media="(max-width: 400px)" srcset="/sample-image.jpg.webp" type="image/webp">
    <source media="(max-width: 400px)" srcset="/sample-image.jpg">
    
    <source srcset="/sample-image.jpg.avif" type="image/avif">
    <source srcset="/sample-image.jpg.webp" type="image/webp">
    
    <img src="/sample-image.jpg" alt="Alt text" title="Sample JPG">
</picture>
</code></pre>
<h3>Credits</h3>
<p>Written by <a href="https://github.com/ainsleyclark" rel="nofollow ugc">Ainsley Clark</a></p>

Squidge

Squidge is a FREE WordpPress Plugin built for developers in mind compressing and convert images using jpegoptim, optipng, cwebp, and libavif.

Damir Akhmedshin

Rustam Sibagatov

<p>Images Optimize and Upload CF7 is an extension plugin for <a href="https://wordpress.org/plugins/contact-form-7/" rel="ugc">Contact Form 7</a> plugin, that allows you to upload multiple images using drag-n-drop or simple “Browse” button, and compress them on the client’s side before sending it. If you want to save a user’s time and bandwidth on uploading large images, this plugin is perfect solution.<br />
Tested with Contact Form 7 version 6.1.6</p>
<h4>Features</h4>
<ul>
<li>Quick compression on the client’s side</li>
<li>Save data by compressing it on the client’s side before sending to the server</li>
<li>Automatically resize images to max 1920px (width or height)</li>
<li>Maintains the aspect ratio of the images</li>
<li>Fix image rotation issue when uploading images from Android an iOS (uses EXIF data)</li>
<li>Highly customizable</li>
<li>File type validation</li>
<li>No limits on input file size</li>
<li>Ajax upload</li>
<li>Drag-n-drop or browse file</li>
<li>Attach compressed files to emails</li>
<li>Adapted to mobile design</li>
<li>Customize file upload thumbnails and drag and drop area layouts</li>
<li>Multiple shortcodes in one form</li>
<li>Identify files by adding ID to the shortcode. The ID value will be used as a prefix in the filename</li>
<li>Set the maximum uploaded files limit in global settings, or in the shortcode</li>
<li>Save or remove all temporary files from the server after sending the form. But if you want to keep the files on the server, please, install <a href="https://wordpress.org/plugins/contact-form-cfdb7/" rel="ugc">Contact Form 7 Database Addon – CFDB7</a> plugin to access the files</li>
<li>Supports Google Chrome, Mozilla Firefox, Microsoft Edge, Safari. Doesn’t support IE 11 and lower</li>
</ul>
<h4>Limitations</h4>
<ul>
<li>Transparent background in PNG files will become solid black</li>
<li>Animated GIF files will only have 1st frame after compression</li>
<li>Doesn’t support IE</li>
</ul>


Images Optimize and Upload CF7


This is invaluable when working with non tech-savvy users who don't know how to reduce the sizes of images before uploading, and a big convenience for other users. I could wish the instructions were a little clearer, and the default values for a lot of the settings results in a very poor-quality image, so I would've chosen different, less strict limits for file size and quality settings. It's also not being updated to reflect the fact that it works with recent WordPress versions -- but it does, so far.



So: not a perfect plugin, but the only one I can find that does exactly what I need for image uploading on CF7.


Does the job without fuss

I like this plugin

Allows uploading and client-side compression of multiple images in Contact Form 7.

Squidge vs Images Optimize and Upload CF7