manifest / performance / webp-upload-optimizer

WebP Upload Optimizer

WordPress plugin that converts JPEG/PNG to WebP in the browser on upload

by Ryan Allen · github.com/ryansallen98/webp-upload-optimizer · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/ryansallen98/webp-upload-optimizer/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/ryansallen98/webp-upload-optimizer ↗

WordPress plugin that converts JPEG/PNG to WebP in the browser on upload (inspired idea by Cimo).

Legacy media: JPEG/PNG that were never processed by this plugin can be optimized from the Media modal sidebar, the attachment edit screen, or the Media Library row action. The browser converts to WebP, POST wuo/v1/attachments/{id}/replace-with-webp replaces the files and rewrites known URL references in core tables (serialized meta is handled safely). Review staging first on large sites; CDN/offload or custom DB tables may need extra handling via filters (wuo/legacy_replace/url_pairs, wuo/legacy_replace/expanded_pairs, wuo/legacy_replace_completed).

Requirements

WordPress 6.4+, PHP 8.2+
Node 20+ and Composer for building/testing
Chromium-based or Firefox admin (Safari may skip WebP canvas export)

Activate WebP Upload Optimizer in wp-admin, then configure Settings → WebP Upload.

Scripts

Command	Purpose
`npm run build`	Vite → `dist/` (upload bridge + `admin-settings.css`)
`npm run dev`	Watch build
`npm run typecheck`	`tsc --noEmit`
`npm test`	Vitest
`composer test`	PHPUnit (needs WP)

TypeScript layout (`resources/ts/`)

Path	Role
`main.ts`	Vite entry: loads `Window` typings, global SCSS, runs `app/bootstrap`.
`app/bootstrap.ts`	Wires upload hooks, `wrapBlockEditorUploadMedia`, block-editor iframe, media sidebar, attachment legacy panel.
`upload/`	Client-side conversion (`image-converter.ts`), drop/file hooks (`hooks.ts`), progress UI, REST metadata queue.
`admin/`	Media modal sidebar, attachment edit legacy UI, `legacy-replace` REST client, `styles-entry.ts` (admin SCSS only).
`lib/`	`settings`, `wp-hooks`, `format-bytes`, `dimensions`, `upgrade-fetch-url`, `parse-rest-json`.
`types/`	Conversion result types + `window-augment.ts` for `wuoSettings` / `wuoMetadataCache`.
`__tests__/`	Vitest unit tests.

Extending

WordPress wp.hooks filters (same naming style as core packages):

Name	Description
`wuo/upload/dropZoneSelectors`	`string[]` CSS selectors for drag-drop targets
`wuo/upload/fileInputSelectors`	`string[]` for `<input type="file">` contexts
`wuo/upload/wrapMediaUtils`	Return `false` to skip wrapping both `wp.mediaUtils.uploadMedia` and `core/upload-media` `addItems`
`wuo.convertImage.prepare`	Async filter: `(file, 'webp', {})` → `File`
`wuo/mediaSidebar/doRender`	Return `false` to hide the attachment sidebar block

PHP:

Filter / action	Description
`wuo/metabox/do_render`	Return `false` to hide meta box

REST: POST /wp-json/wuo/v1/metadata with { "metadata": [ { "filename": "…", … } ] } (used internally after upload).

Author

Ryan Allen — https://rallendev.com

License

MIT. See LICENSE.