ainsleyclark / squidge

🖼️ A FREE Wordpress Plugin to compress and convert images using cwebp, jpegoptim and optipng.

Squidge

Is a FREE WordPress plugin, built with developers in mind, for the compression and conversion of images using jpegoptim, optipng, cwebp, and libavif. It’s extremely 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 cwebp and libavif libraries.

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

1. Go to the releases section and download the plugin.
2. Upload the squidge plugin to your /wp-content/plugins/ directory.
3. Activate the plugin through the "Plugins" menu in WordPress.
4. Check the Settings tab under Settings | Squidge Options to ensure the libraries are installed, if they aren't, run the commands listed dependent on your operating system.
5. Check the individual optimisation tabs and adjust settings accordingly.
6. 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.
force	false	true/false	Force reoptimization of already optimized images.
thumbnails-only	false	true/false	Optimize only thumbnails.

Road Map

• Add SVGO to 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.

squidge's Issues

hello, Squidge always inactive even though I installed the jpegoptim optipng

Hi, thanks for your good work!
I meet some isssues.

my environment:
CentOS 7.9.2009 x86_64
wordpress 5.9.3

I'm sure I already installed the module successful. but it still shows inactive.

If is there also any other option that I need to do?

Can't run squidge command

Error: 'squidge' is not a registered wp command. See 'wp help' for available commands.

`which` command in Windows

In Windows where should be used to check installed tools.

squidge/core/Package/Service.php

Line 145 in 26d24c0

$return = shell_exec(sprintf("which %s", escapeshellarg(static::cmd_name())));

documentation: Update Readme (Fix Typos)

Update Readme

Squidge is a FREE WordPress plugin, built with developers in mind, for the compression and conversion of images using jpegoptim,
optipng, cwebp, and libavif. It’s extremely simple to use and is designed to increase PSI and boost rankings.

How to install avifenc on Ubuntu 20.04

Hi Developer
thank you for this awesome plugin but i find it really challenging to install avifenc on my server , i tried to search the internet without any useful guide to do that

my server distribution
Distributor ID: Ubuntu
Description: Ubuntu 20.04.4 LTS
Release: 20.04
Codename: focal

any help would be very useful .. thank you

feature: Keep only the smallest files

Hi,

Thanks a lot for this, finally an image optimization plugin that doesn't offend common sense! This is indeed the only right way to do the job, imo. I use a very similar approach, of course with the same underlying tools but entirely via the CLI, mainly when generating static websites, but it also works with live WP. It is essentially based on this great blog post: https://vincent.bernat.ch/en/blog/2021-webp-avif-nginx

So a possible improvement to Squidge might be to keep only the smallest files, as described in the linked blog post. I confirm that some images can surprisingly be smaller in JPEG than in WebP, or smaller in WebP than in AVIF. Also, the 10% delta mentioned is also an interesting idea I think.

Anyway, having this in a WP plugin is awesome.

Plugin options are not appearing

Expected Behaviour

Actual Behaviour

Reproduce Scenario (including but not limited to)

Steps to Reproduce

Install the plugin and go to the option.

Platform and Version

Sample Code that illustrates the problem

Logs taken while reproducing problem

Getting some js issues:
https://prnt.sc/eQkTgfAG07Zn

How to use the helper function?

I stumbled over your plugin just this week, tried it out and love it already - at least when it comes to all the file handling.

But where I struggle with is: the helper function you provide and how to use it to have the output in the frontend / source code.

Do you have some example by hand or can provide somehow to use it in the code? I tried several things out, but as I'm not a real developer and just learn by doing and googling around, it's quite tough ...

What would a server config look like for nginx or apache rules to serve images dynamically?

Could yo provide us with an example config for nginx and apache?
Thanks!