Optimize images before uploading?

[meglio (Anton)]

@Falco

I think we could sponsor a plugin that experiments with GitHub - nodeca/pica: Resize image in browser with high quality and high speed .

Was that given a go?

[Falco]

Another example of what is possible on ImageOptimization in browser:

Squoosh

This video goes over the tech. They compiled the state of art codecs (the same we use on the server for Discourse) to WASM

Looks like a cool, optional thing for Discourse.

The WASM for mozjpeg can be compressed to 48k and the WASM for OptiPNG is 93k.

[Dmitry_Krasnoperov]

My image folder grows to 42.3 GB.
So I think I need to figure out image processing and storing in Discourse

[John_Lehmann]

I’m not sure if this is the right topic to post on, but I am very interested in knowing if there’s a way to automatically downsize images before they get stored in my discourse. My community is going to be very image heavy.

I’m less than a week in and already 350 MB used and not even open to general public yet. Would like to be able to resize images down to some resolution so that I keep them < 1MB or something like that (based on image resolution though as per norm I think).

[pfaffman (Jay Pfaffman)]

I’d recommend using Digital Ocean spaces or S3 for your images so you don’t need to worry about space so much.

It seems unlikely that a community that really likes images is going to want really bad ones.

[sam (Sam Saffron)]

We already have max_image_megapixels site setting, can you try toning that down?

[John_Lehmann]

@sam Yes, but, the problem is there’s a big difference between reducing some resolution that most people won’t even notice (IMO big diminishing returns), versus blocking them from uploading at all. On my main site, I downsize to 1500x and no one cares. But if they can’t upload it’s a huge hassle.

@pfaffman This sounds perfect, I guess I need to read:

Set up file and image uploads to S3

So, you want to use S3 to handle image uploads? Here’s the definitive guide, but also see Configure an S3 compatible object storage provider for uploads to see how to configure your app.yml. S3 registration Head over to https://aws.amazon.com/free/ and click on [Create a Free Account] During the create account process, make sure you provide payment information, otherwise you won’t be able to use S3. There’s no registration fee, you will only be charged for what you use, if you exceed the AWS …

I wonder, this is probably something I need to do sooner than later, because I’m guessing trying to migrate the files from discourse hosting to s3 could be hard?

[sam (Sam Saffron)]

I do support a simpler mechanism longer term, something like

All images must be smaller than 500k but allow people to upload stuff up to 2000k and fix on server if needed by either downsizing or reducing resolution. Try resizing on client first if possible.

But yeah, getting to this level of fidelity will take quite a while.

[pfaffman (Jay Pfaffman)]

@John_Lehmann

I wonder, this is probably something I need to do sooner than later, because I’m guessing trying to migrate the files from discourse hosting to s3 could be hard?

There is a rake task that will do it, but I’d say that sooner is better than later.

[nildarar]

La maggior parte dei nostri utenti utilizza i dati mobili e, a volte, la loro velocità di connessione può essere pari o inferiore a 3G. Spesso, la qualità delle immagini che inviano non è prioritaria; per loro è più importante la velocità.

Con un upload in 3G (circa 2 Mbps), l’invio di un’immagine da 5 MB richiede circa 20 secondi, e questo tempo può aumentare notevolmente al diminuire della velocità.

@Falco

Sembra una funzionalità interessante e opzionale per Discourse.

Come ha sottolineato @Falco, con algoritmi simili, è possibile ridurre le dimensioni di un’immagine da 5 MB a 190 KB comprimendola lato client e riducendo le dimensioni. In questo modo, l’invio risulta più veloce (in 3G, circa 1 secondo) e si richiedono meno risorse.

Lo screenshot sopra mostra l’invio dell’immagine tramite Telegram Messenger

Esiste una funzionalità del genere nella Roadmap? Se sì, è prevista a breve o a lungo termine?

[Falco]

@nildarar

Esiste una funzionalità del genere nella Roadmap? Se la risposta è sì, è lontana o vicina?

È qualcosa che vorremmo fare alla fine, ma non è nella nostra roadmap pubblica su #releases.

Scriverò una RFC su questa funzionalità questa settimana in modo da poter procedere, almeno a livello di specifica.

[codinghorror (Jeff Atwood)]

Questo è già possibile in iOS. Come si vede (pubblicherò uno screenshot, attendete)

Tramite

Ho selezionato “grande”. Tuttavia, continua a sbagliare l’orientamento!

[nildarar]

@Falco

Scriverò una RFC su questa funzionalità questa settimana, così potremo procedere, almeno dal punto di vista della specifica.

Grazie, è fantastico

@codinghorror

Questo è già possibile su iOS

Spero che anche Android impari

[ozkn (Mathx)]

Oltre a questa funzionalità, il lightbox può essere un pulsante di rotazione delle immagini

[aaii]

Questa libreria sembra interessante: GitHub - silvia-odwyer/photon: ⚡ Rust/WebAssembly image processing library · GitHub

Un file binario wasm sembra la scelta ideale perché sarà veloce ed efficiente in termini di memoria.

[mike1]

Sono curioso di sapere se la compressione delle immagini lato client, quando possibile, abbia un impatto significativo sulle prestazioni del server web su hosting di bassa fascia (ad esempio, un’istanza DigitalOcean con CPU condivisa).

Osservo occasionalmente picchi nell’utilizzo della CPU che ritengo correlati al caricamento di immagini da parte degli utenti che necessitano di compressione. Qualcuno ha riscontrato un impatto simile?

[Falco]

Discussione sull’implementazione su Optional image optimization before upload