Squidge
Is FREE WordpPress Plugin built for developers in mind compressing and convert images using jpegoptim, optipng, cwebp, and libavif. It's extremley simple to use and is designed to increase PSI and boost rankings.
Why?
Image compression in WordPress can be costly, confusing and sometimes just simply don't work. We have aimed to simplify the process by requiring the developer to install the required package on the operating system and Squidge does the hard work for you.
- IT'S FREE
- Unlimited file size, no limits.
- Optimised for your site to rank.
- CLI to regenerate all of your media files.
- Helper functions to output images in templates.
- Uses the native
cwebpandlibaviflibraries.
What does Squidge do?
Squidge compresses and converts image files when the user has uploaded a file to WordPress.
Compresses JPG images using jpegoptim.
Compresses PNG images using optipng.
Converts JPG and PNG images to .webp files using cwebp with the appended extension e.g. image.jpg.webp.
Converts JPG and PNG images to .avif files using libavif with the appended extension e.g. image.jpg.avif.
Installation
- Go to the releases section and download the plugin.
- Upload the
squidgeplugin to your/wp-content/plugins/directory. - Activate the plugin through the "Plugins" menu in WordPress.
- Check the Settings tab under
Settings | Squidge Optionsto ensure the libraries are installed, if they aren't, run the commands listed dependent on your operating system. - Check the individual optimisation tabs and adjust settings accordingly.
- Done!
Render Images
To render images in templates, you can either set up nginx or apache rules to serve images dynamically or used the squidge_image helper function. This dynamically checks if an .avif or .webp file is available on the file system and returns the output.
Function
/**
* 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)
Output
<picture class="picture">
<!-- Loads if AVIF is supported and the window is smaller than 400px wide -->
<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">
<!-- AVIF & Wep Initial Sizes -->
<source srcset="/sample-image.jpg.avif" type="image/avif">
<source srcset="/sample-image.jpg.webp" type="image/webp">
<!-- Default -->
<img src="/sample-image.jpg" alt="Alt text" title="Sample JPG">
</picture>
Screenshots
Plugin settings page
Example compression tab
FAQs
Does the plugin replace existing images?
Yes
What are the supported operating systems?
Windows, Linux, & Mac OSX.
How are JPGs optimized?
jpegoptim --strip-all --overwrite --max={{ quality }} input-file.jpg
How are PNGs optimized?
optipng -clobber -strip all -o {{ optimization }} input-file.jpg
How are images converted to webp files?
cwebp -q {{ quality }} input-file.jpg -o input-file.jpg.webp
How are images converted to avif files?
avifenc --min 0 --max 63 --speed 6 -a end-usage=q -a cq-level=18 -a tune=ssim input-file.jpg input-file.jpg.avif
CLI
Squidge includes a built in WP CLI to help convert and compress images, you can see the commands below.
wp squidge
usage: wp squidge health
or: wp squidge run
or: wp squidge version
Version
Outputs the current version number of Squidge.
wp squidge version
Health
Checks the correct libraries are installed.
wp squidge health
Run
Compresses and converts all images. This command will obtain images from the WP media library, compress them if they are JPG/PNG's and convert them to the .webp and .avif file formats.
By default all optimisation methods are ran, but you can disable them using the arguments below.
Simple example:
wp squidge run
With example arguments
wp squidge run --jpeg=false --quality=80 --optimization=o3
Arguments
| Argument | Default Value | Accepted Values | Description |
|---|---|---|---|
| jpg | true |
true/false |
If JPG compression should run. |
| png | true |
true/false |
If PNG compression should run. |
| webp | true |
true/false |
If WebP conversion should run. |
| avif | true |
true/false |
If AVIF conversion should run. |
| quality | 80 |
0 to 100 |
Compression quality of the images. |
| optimization | 02 |
o1 to o7 |
Optimisation of PNG images. |
Road Map
- Add
SVGOto optimise SVG images. - More arguments passed to each service.
- Update meta data when images are converted or compressed.
- Output compression info in the Media Library.
- Create unit tests.
10 Dec 24, 2022
3 Jan 13, 2022
5 Jun 1, 2023
5 Oct 19, 2022
5 Jul 15, 2022
28 Nov 13, 2022
5 Dec 15, 2022
98 Nov 27, 2022
2 Nov 26, 2022
1 Jan 26, 2022
4 Feb 20, 2020
5 Nov 15, 2022
5 Jun 30, 2019
8 Dec 19, 2022
13 Oct 6, 2022
4 Nov 30, 2022
33 Dec 13, 2022
50 Dec 26, 2022
66 Oct 7, 2022