gecko43

<p>Convert jpeg and png images to their webp equivalents by leveraging google’s libwebp and web assembly and serve webp images directly when supported in posts and pages.</p>
<h3>Quick start</h3>
<ul>
<li>Sign into the backoffice as an admin user.</li>
<li>Install the plugin and activate it.</li>
</ul>
<h3>Convert a single media library image</h3>
<ul>
<li>Navigate to <strong>Media > Library</strong></li>
<li>Select the <strong>list view</strong> icon</li>
<li>Locate a jpeg or png image for editing and click the media’s title link or the “edit” link under the entry.</li>
<li>Scroll down to the bottom of the edit page to the (new) <em>WebP Conversion</em> section</li>
<li>Click <strong>Create</strong> to create a webp version of this media library image on the server</li>
<li>Click <strong>Delete</strong> to delete a webp version if it exists for this media library image</li>
</ul>
<h3>Convert all media library images</h3>
<ul>
<li>Navigate to <strong>Plugins</strong> </li>
<li>Set the quality and overwrite flag as desired</li>
<li>Click <strong>Create</strong> to create webp files for all media library images</li>
<li>Click <strong>Delete</strong> to delete existing webp files for all media library images</li>
</ul>
<h3>How it works</h3>
<p>The client (browser) creates a webp version of the image when the <strong>Create</strong> button is clicked. This is then sent to the server where it is saved in the same folder as the original image, but with a <code>.webp</code> extension.</p>
<p>For example, if the original image is</p>
<pre><code>/wp-content/uploads/2020/05/test.jpg
</code></pre>
<p>an additional</p>
<pre><code>/wp-content/uploads/2020/05/test.webp
</code></pre>
<p>will be created there.</p>
<p>A filter is applied in the WordPress hook <code>the_content</code> to swap an image for its webp equivalent if available.</p>
<h3>More about the conversion</h3>
<p>Conversion is done on the client, so a modern browser with wasm support is needed. This is because conversion to webp with php requires shell_exec to make calls to Google’s cwebp or other php extensions are needed. These features often pose security risks that outweigh the benefits. This plugin gets around that by delegating the actual image conversion to the client. It’s based on <a href="https://github.com/wrburnham/webp-wasm" rel="nofollow ugc">this encoder</a> to save webp versions of uploaded jpeg and png images.</p>
<h3>License</h3>
<p>This plugin is licensed as GPLv3.</p>
<h3>Notes</h3>
<p>The simple html dom parser library is used to render webp images directly in WordPress content where possible. The client-side conversion to WebP leverages Google’s libwebp.</p>


WebP WASM

Convert jpeg and png media to webp and serve webp images when the browser supports it. This has been tested on WordPress 5.4.1 with php 7.2.

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.

WebP WASM vs Squidge