Enable client side modern image generation

[adamsilverstein]

Enable client-side image generation and compression for both new uploads and existing images.

Leveraging parts of https://github.com/swissspidy/media-experiments to build this in Gutenberg initially.

Gutenberg tracking issue:

• Tracking: Client-side media processing gutenberg#61447

[adamsilverstein]

Looks like web support is now available in https://github.com/kleisauke/wasm-vips - we should investigate that as a possible path forward in addition to squoosh.

[adamsilverstein]

https://github.com/myeveryheart/squoosh-browser looks very promising!

[adamsilverstein]

Another plus of client side image handling might be the ability to properly handle uploaded HEIC files.

[kleisauke]

wasm-vips v0.0.2 is now available which distributes the web variant in its NPM package. Note that it cannot process HEIC images (via libde265 and libheif), since that includes patent-encumbered HEVC-related logic.

[Richard-TR]

Just a little nudge to say this would be incredibly useful. All existing image optimisation solutions available for wordpress pale in comparison to squoosh. Perhaps even a little menu for setting settings for auto squooshing on upload. Would mean inexperienced users (contributors for example) don't have to mess around with things they don't understand.

[johnbillion]

Ancient core Trac ticket on this topic: https://core.trac.wordpress.org/ticket/19770

[adamsilverstein]

Thanks for the context @johnbillion !

[adamsilverstein]

Noting that Gutenberg is exploring adding compression features in this issue: WordPress/gutenberg#55106

[swissspidy]

The current effort in this regard is centering around bringing (parts of) https://github.com/swissspidy/media-experiments to Gutenberg. Related discussions happened at swissspidy/media-experiments#561 to ensure the code bases are as aligned as possible.

As mentioned in the ticket description, the roadmap can be found at WordPress/gutenberg#61447.

I've been working on an initial draft over at WordPress/gutenberg#64278 that I will continue to iterate on and split into smaller chunks etc.

[swissspidy]

A collection of the Gutenberg PRs that have been merged so far:

• Add experiment for client-side media processing gutenberg#64650
• Media Utils: Add TypeScript support and export more utils gutenberg#64784
• Add new Media section to preferences modal gutenberg#64846
• Add safeguard to mediaUploadMiddleware gutenberg#64843
• Core Data Types: recordId can be a number gutenberg#64796

Currently focusing on:

• Add new private vips package gutenberg#64845

[swissspidy]

Recently merged:

• Openverse: prevent multiple insertions during upload gutenberg#65719
• Add new private vips package gutenberg#64845
• Media Utils: add experimental sideloadMedia gutenberg#66378

Currently working on:

• Add new private upload-media package gutenberg#66290
• [WIP] Block editor: Add MediaUploadProvider  gutenberg#66380

It takes a while for people to review all those PRs as everyone is quite busy with 6.7 and GB phase 3.

A main focus right now is to ensure that the thing we build works outside of WordPress too and without people having to change their build tooling for the web workers and WebAssembly modules. So that requires some tooling changes.