wp-blocks / squashify

Boost your website's performance with Squashify! 🚀 Compress and optimize images effortlessly, supporting various formats including JPG, PNG, GIF, SVG, and more. Lightning-fast processing and web-optimized output make your site load faster while saving bandwidth

wp-blocks

A monorepo of tools and blocks for the WordPress Gutenberg editor.

What is this?

A collection of Gutenberg blocks and utilities built using TypeScript.

Included are detailed examples of how to configure block plugins using TypeScript.

Getting started

This project uses pnpm to manage dependencies and turbo to orchestrate the build process of the packages in the monorepo.

git clone https://github.com/wp-blocks/wp-blocks.git
cd wp-blocks
pnpm install
pnpm build
pnpm wp-env:start

See wp-env for details and requirements of usage.

Project structure

examples/ # example plugins and blocks, detailing how to use deferent aspects of the Gutenberg APIs
packages/ # published and internal packages of wp-blocks
scripts/  # internal build scripts

wp-scripts is used as much as possible to keep the build process similar to Gutenberg, though some packages use custom build scripts that are internal to wp-blocks.

The linting and formatting are also similar to Gutenberg, most of the modification are for linting TypeScript.

Gutenberg APIs and TypeScript

Currently Gutenberg's support of TypeScript is incomplete. Some packages provide their own types while others are available from Definitely Typed (though some are outdated). To complicated it further, some packages use ambiguous types like Object or any, which makes property access difficult in TypeScript without a lot of type guards or type assertions.

The answer to this issue to for all @wordpress packages to provide their own explicit type. Though this will be difficult. Support for TypeScript in the WordPress community is tepid and the code base wasn't written with typing in mind. In the meantime this project patches the types where necessary in the types directory.

License

wp-blocks is free software, and is released under the terms of the GNU General Public License version 3. See LICENSE.md for complete license.

squashify's Issues

Output a consistent report

the current one is just useless, would be cool to have a comparison between the old and the new folder and, whenever the verbose mode is enabled, to output the compression ratio stats for that file

Incorrect output filename

If the input filename is filename.png, the output filename is fileneame.png.webp

The desired output should have been: 'filename.webp'

Node version: v18.18.0

The solution I had was:
const distFileName = distPath.replace(/\.[^/.]+$/, '') + utils_1.getOutputExtension(compressOpt.compressor, extension);

can you update the package?

Interactive mode enhancements

Using the command I realized that the interactive part is a bit "long" to be completed if there are a lot of files.... would be to ask the user if they want to use the recommended settings or define their own.

Also in this case it would not hurt to make the .squash file output so that the settings can be reused

Suggested image conversions
Jpeg -> MozJpeg
Svg -> optimize
all the rest -> avif (anyhow webp is a little bit more diffused so I'm not 100% sure it's the best choice)

Animated gif to animated webp (or to mp4 or similar)

ref swissspidy/media-experiments#163

Max size limit

Would be nice an option to set a max height or width for the images