Show HN: Bulk convert images online without sending to server

I also implemented a batched client-side web tool to resize photos to a certain file size (in a few hundred lines of JS). It only supports JPEG, but it resizes photos almost instantly https://randomforest.net/resizePhoto.html

Here are a few ideas to make yours faster:

1. Use the browser's canvas element to compress JPEG or PNG images instead of WASM. The libraries which come with browsers can use processor-specific instructions, while WASM only targets the smallest common denominator of the most common architectures, so it will be slower.

2. Which resizing method are you using to find a fitting image size? For me, it worked well enough to downscale by some factor a few times until it fits, but if you want to get super close, you could use binary search.

mnutt · 4 years ago

My experience has been that using canvas to resize images produces inconsistent results from one browser to another, and in most cases is higher file size and lower quality than other tools. Enabling imageSmoothingEnabled helps, but is only supported in chromium-based browsers right now:

https://caniuse.com/mdn-api_paintrenderingcontext2d_imagesmo...

This is so cool!

I'm completely new to WASM but excited to learn — how did you use the Squoosh repo to turn it into WASM, and how did you embed that into your app? Is that just a static file you can "import" and use in the client?

And can anything be "turned into" WASM (e.g. a python library), or is that kind of a new paradigm of writing code from scratch?

MBlume · 4 years ago

https://github.com/pyodide/pyodide

> Any pure Python package with a wheel available on PyPi is supported. Many packages with C extensions have also been ported for use with Pyodide. These include many general-purpose packages such as regex, PyYAML, lxml and scientific Python packages including NumPy, pandas, SciPy, Matplotlib, and scikit-learn.

akmittal · 4 years ago

Squoosh already had wasm files built, all i had to just import and create a common API.

For now wasm can be compiled from C,C++, Rust and Go, so mostly compiled languages. https://emscripten.org/ can help compile C,C++, Rust and Go has native support to compile. There is also a Typescript like language which compile to wasm(assembly script)

Python or most dynamic languages are too difficult to compile to wasm.

zamber · 4 years ago

You could consider publishing it on GitHub and pinging squoosh guys: https://github.com/GoogleChromeLabs/squoosh/issues/1084

ficklepickle · 4 years ago

Its probably not practical to use python because I imagine you'd need to include the whole python interpreter or somesuch.

WASM is a compilation target for AOT compiled code.

xml · 4 years ago

yawnxyz · 4 years ago

kretaceous · 4 years ago

Oh heavens, this is really neat! Thank you! I love Squoosh but I often have a multiple photos to compress to WEBP.

On a similar note, does anyone know similar lightweight web/desktop apps for basic photo editing, specifically, resize, conversion, crop, color overlay, etc. I use Photopea[0] on Linux but I still feel I could go lighter.

[0]: https://photopea.com

jakub_g · 4 years ago

Check https://edit.photo - it's similar to popular Android native mobile apps.

KaoruAoiShiho · 4 years ago

Is there an open sourced version of this so I can process the images the user uploads first before sending it to s3 thus saving space?

I have published to npm https://www.npmjs.com/package/optimg-wasm Sorry there is no documentation for now. Will be doing it first thing tomorrow (IST)

Documentation? xD

Thank you, awesome.

cblconfederate · 4 years ago

This is the real decentralized web. Current web sucks because your data touches servers you re supposed to "trust". Trust nothing

leppr · 4 years ago

You still have to trust that the server is not going to target you and send you a trojan version. Content hashes (like in IPFS or git) are needed to minimize the trust on servers.

thehappypm · 4 years ago

This is cool. I’m working on a PDF editor that’s totally client-side, do things like merge files and the like.

Krasnol · 4 years ago

Now get DICOM in there too ;)

ir193 · 4 years ago

well done! i really wish more tasks can be done in browser.

did you compile some c++ library into wasm or js is enough to do the job?

I actually use wasm build by https://squoosh.app/ team.