A few months ago I evaluated options for optimizing images in the browser, and wrote a prototype in Vue that lets you drop PNGs and JPEGs in the browser and automatically optimize them according to the configured output quality. Basically, a stripped down version of squoosh.app (by Google) geared towards quickly downloading the result, rather than experimenting with optimization parameters.

My main use case is quickly reducing image size for web, and it’s also occasionally convenient for storage. On Mac, the ImageOptim app works fairly well, but it can be slow and inconvenient when you want to adjust settings.

It would also be nice to set up a build pipeline for the underlying compression programs (oxipng, mozjpeg, etc.) to make sure the WASM builds are always up to date, but that’s a project for another day.

This site took much longer than expected, because I ran into a few issues while adding support for custom Vue components, external WASM modules, and conveniently loading external javascript. The result is a somewhat convoluted process for building a Vue component as a library project and inserting it via the editor. It works, but will need lots of refinement and instructions before it can be released as a public feature. Unfortunately I haven’t had a chance to look into any of the nice-to-haves, but hope to revisit soon.

It probably would have made more sense to make a page with a simpler custom Vue component first, but I think the effort was worth it. The best thing about adding a complex feature for a specific page is that it can then be included with no effort on any other site! For example, the image optimization widget can be embedded in this blog.