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

Overview

logo

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.

Maintenance GNU General Public License 3.0 Donate

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

Squidge Settings Page

Example compression tab

Squidge 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 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.
Comments
  • Changes CLI and count of images

    Changes CLI and count of images

    I added changes to the name of the required files and added a counter of images.

    Description

    Related Issue

    Bug with CLI, counter of images

    Motivation and Context

    How Has This Been Tested?

    Screenshots (if appropriate):

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [ ] I have signed the Adobe Open Source CLA.
    • [ ] My code follows the code style of this project.
    • [ ] My change requires a change to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [ ] I have read the CONTRIBUTING document.
    • [ ] I have added tests to cover my changes.
    • [ ] All new and existing tests passed.
    opened by supersonic2k22 6
  • How to install avifenc on Ubuntu 20.04

    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

    opened by yonited 3
  • Updated README.md

    Updated README.md

    Description

    Updated readme as mentioned in the issue (#6).

    Related Issue

    Motivation and Context

    How Has This Been Tested?

    Screenshots (if appropriate):

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [ ] I have signed the Adobe Open Source CLA.
    • [ ] My code follows the code style of this project.
    • [ ] My change requires a change to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [ ] I have read the CONTRIBUTING document.
    • [ ] I have added tests to cover my changes.
    • [ ] All new and existing tests passed.
    opened by rohinish404 2
  • documentation: Update Readme (Fix Typos)

    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.

    documentation 
    opened by ainsleyclark 2
  • How to use the helper function?

    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 ...

    opened by ppc1337 1
  • updated readme.txt

    updated readme.txt

    Description

    updated readme.txt

    Related Issue

    Motivation and Context

    How Has This Been Tested?

    Screenshots (if appropriate):

    Types of changes

    • [ ] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [ ] I have signed the Adobe Open Source CLA.
    • [ ] My code follows the code style of this project.
    • [ ] My change requires a change to the documentation.
    • [ ] I have updated the documentation accordingly.
    • [ ] I have read the CONTRIBUTING document.
    • [ ] I have added tests to cover my changes.
    • [ ] All new and existing tests passed.
    opened by rohinish404 0
  • hello, Squidge always inactive even though I installed the jpegoptim optipng

    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

    36CV9J1CA1B X3GE}(HELBD

    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?

    bug help wanted 
    opened by Leonhzz 1
  • Plugin options are not appearing

    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

    bug good first issue 
    opened by badboybackagain 3
  • `which` command in Windows

    `which` command in Windows

    In Windows where should be used to check installed tools.

    https://github.com/ainsleyclark/squidge/blob/26d24c0905eaac4e904691a79728053a02e67f04/core/Package/Service.php#L145

    bug 
    opened by leo020588 1
  • feature: Keep only the smallest files

    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.

    enhancement 
    opened by homlett 3
Releases(0.1.4)
Owner
Ainsley Clark
GoLang Developer
Ainsley Clark
Small class to extract + compress .zip, .gz, .rar archives via browser.

The Unzipper The Unzipper extracts .zip and .rar archives or .gz/tar.gz files on webservers. It detects .zip/.rar/.tar.gz/.gz archives and let you cho

Lục Thiên Phong 10 Dec 24, 2022
A web app for the resolution of a mobile game in wich you have 4 images and a list of letters, then a few boxes to fill with the word connecting the four images.

4images_1mot_solutions A web app for the resolution of a mobile game in wich you have 4 images and a list of letters, then a few boxes to fill with th

FOTSO Claude 3 Jan 13, 2022
Api.video-wordpress-plugin - The official api.video plugin for WordPress

api.video WordPress Plugin api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managin

api.video 5 Oct 19, 2022
A WordPress plugin that displays proxied war news from the free world to Russian IP address visitors with option to block further access.

A WordPress plugin that displays proxied war news from the free world to Russian IP address visitors with option to block further access.

null 5 Jul 15, 2022
Super simple share buttons for WordPress. No images, no css, no javascript

Developer Share Buttons A super lightweight social sharing solution using either the Web Share API or simple sharing links. Description A simple, cust

Grant Richmond 28 Nov 13, 2022
It is an open-source and free project, which is faced with the drawing lovers, providing a free and simple Gallery service

It is an open-source and free project, which is faced with the drawing lovers, providing a free and simple Gallery service

WeepingDogel 5 Dec 15, 2022
A PHP library to convert text to speech using various services

speaker A PHP library to convert text to speech using various services

Craig Duncan 98 Nov 27, 2022
Free ZIP Code API - Free Access to Worldwide Postal Code Data

About Zipcodebase - Free Zip Code API Zipcodebase is a zip code API that was founded in 2019 to solve common issues with postal code data. As we have

SaaS Industries 2 Nov 26, 2022
🐋 This project aims to broaden knowledge of system administration by using Docker: virtualizing several Docker images, creating them in a new personal virtual machine.

?? This project aims to broaden knowledge of system administration by using Docker: virtualizing several Docker images, creating them in a new personal virtual machine.

Anton Kliek 1 Jan 26, 2022
Oui instagram - Instagram user infos and recent images embedding plugin for @textpattern

oui_instagram Easily display Instagram recent images galleries. Plugin requirements required: Textpattern CMS 4.6+. recommended: aks_cache or any part

Nicolas Morand 4 Feb 20, 2020
Smd imagery - A Textpattern CMS plugin for managing images in the Write panel.

smd_imagery Insert images into your Write panel. Very handy for people who run photoblog or image-heavy sites, or those who categorise images for incl

Stef Dawson 5 Nov 15, 2022
Tom image grid - Plugin for Textpattern CMS : An optionnal grid display for images tab

tom_image_grid tom_image_grid is a plugin for Textpattern CMS. It allows a more compact display (as a grid) of the images list. The plugin adds two bu

Thomas Jund 5 Jun 30, 2019
Thirdweb-wp - A community WordPress plugin for thirdweb. Turn your WordPress website into Web3 instantly and easily with thirdweb. 💻🌏

Thirdweb WP ?? Nominate (@WarenGonzaga) as GitHub Star. If you appreciate his hardwork and dedication to open source. A community WordPress plugin for

Waren Gonzaga 8 Dec 19, 2022
⚙️ A WordPress plugin to set WordPress options from a .env file.

dotenv A WordPress plugin to set WordPress options from a .env file. Any WPENV_ prefixed variables in the .env will be used to override the WordPress

Brad Parbs 13 Oct 6, 2022
A simple GitScrum plugin for Wordpress. You will be able to manage your projects without having to leave Wordpress.

GitScrum Plugin for Wordpress A simple GitScrum plugin for Wordpress. You will be able to manage your projects without having to leave Wordpress. GitS

GitScrum 4 Nov 30, 2022
🎨 Free custom elements for the WordPress Theme Bricks Builder.

?? Custom Elements for Bricks Builder Free custom elements for Bricks, the visual site builder for WordPress. If you find the elements useful, click o

Simon Vidman 33 Dec 13, 2022
Laravel package to convert English numbers to Bangla number or Bangla text, Bangla month name and Bangla Money Format

Number to Bangla Number, Word or Month Name in Laravel | Get Wordpress Plugin Laravel package to convert English numbers to Bangla number or Bangla te

Md. Rakibul Islam 50 Dec 26, 2022
Guest to Customer for Magento2 - Quickly and easily convert existing guest checkout customers to registered customers.

Guest to Customer for Magento 2.0 For Magento 2.0.x, 2.1.x, 2.2.x, 2.3.x and 2.4.x In general E-commerce, shoppers do not like to create an account du

MagePal :: Magento Extensions 66 Oct 7, 2022