Ottimizzazione delle immagini del compositore per test

Continuiamo la discussione da Ottimizzazione opzionale delle immagini prima del caricamento:

Questa funzionalità è ora disponibile per i test qui su Meta. Caricare un’immagine qui attiverà un ridimensionamento/codifica nel browser dell’utente prima che venga inviata al server.

Provatela, in questo argomento o nella vostra comunità, abilitando l’impostazione del sito “composer media optimization image enabled”. La lasciamo disattivata per impostazione predefinita mentre la testiamo.

Per illustrare le differenze, ecco un confronto prima/dopo:


L’immagine è stata appena scattata con il mio telefono ed è passata da 3,7 MB a 416 KB utilizzando le nostre impostazioni predefinite.

L’obiettivo di questa funzionalità è quanto descritto da @sam qui:

Discourse include già un limite di 4 MB per i caricamenti degli utenti. Ora posso trascinare e rilasciare un JPEG da 58 MB:

E viene caricato senza problemi.

46 Mi Piace

Ecco una foto da 57 MB di alcuni alberi scattata 10 anni fa, trascinata nell’editor

È stato piuttosto veloce! :rocket:

29 Mi Piace

Ottimo lavoro!

Un piccolo appunto riguardo alla barra di caricamento. Durante il caricamento di questa immagine HEIC da 6,1 MB, ho notato che raggiungeva il 100% piuttosto velocemente, per poi rimanere a quel livello per circa 50 secondi prima di completare l’operazione. Questo potrebbe generare confusione o portare all’annullamento.

Video del problema: Image optimization loading percentage | Loom

20 Mi Piace

Questo è fantastico. Una domanda veloce, forse ovvia: sarebbe possibile attivarlo solo per le immagini superiori al limite del sito? In questo modo, le immagini fino al limite non verrebbero elaborate, ma se qualcuno provasse a superare il limite, verrebbe apparentemente ridimensionata?

14 Mi Piace

È qualcosa che aspettavo da molto tempo :heart_eyes: Grazie Falco.

Ho una domanda. Vengono ottimizzate solo le immagini nuove o anche quelle più vecchie con il reprocessing dei post? Grazie ancora :slightly_smiling_face:

4 Mi Piace

Non hai testato questa nuova funzionalità poiché non funziona con le immagini HEIF già importate. Volevo lavorare con HEIF, ma il supporto del browser per la decodifica è inesistente HEIF/HEIC image format | Can I use... Support tables for HTML5, CSS3, etc. Quindi hai testato la conversione HEIF lato server che funziona già da diverso tempo.

Avrei potuto renderlo funzionante includendo un decoder WebAssembly, ma queste immagini sono così rare che non l’ho ritenuto necessario, dato che abbiamo già la conversione lato server su cui ha lavorato @pmusaraj.

Al momento, questa funzionalità può importare JPG, PNG e GIF. Posso facilmente aggiungere il supporto per AVIF/JPEGXL/TIFF e lo farò presto.

Sì! Regola composer media optimization image kilobytes optimization threshold sul valore desiderato.

No, non lo farà. Questo lavoro avviene nel browser dell’utente, proprio prima del caricamento. Il re-rendering è un processo lato server, quindi sono piuttosto diversi.

13 Mi Piace

(Una foto da 28 MB scattata nel centro della mia città durante il primo lockdown nel 2020)

Ho testato il caricamento con diverse velocità di connessione, da 1 Gbps a 1 Mbps. Ha funzionato bene, tranne che per la banda di 1 Mbps. Il comportamento di caricamento con quest’ultima è stato un po’ strano.

Rimasto bloccato allo 0% per molto tempo, poi una percentuale in rapida crescita (più veloce di quanto potrebbe caricare una connessione da 1 Mbps), quindi bloccato al 100% per molto tempo prima di mostrare questo messaggio:

Nota che il formato originale della mia immagine è jpg, non png… :thinking:

[Uploading: 20200328_141218.jpg...]() è rimasto nel post, invece di mostrare l’immagine.

3 Mi Piace

Due problemi:

  1. Se annulliamo il messaggio e scartiamo la bozza mentre stiamo caricando un’immagine, e poi vogliamo pubblicare una nuova risposta, la barra di caricamento rimane ancora visibile nel compositore:

    Dobbiamo ricaricare la pagina per farla scomparire.

  1. È un po’ confuso per l’utente che il sito consenta di inviare e visualizzare un’immagine da 50 MB, ma quando provo a inviare un’immagine di 108 MB con dimensioni 21600×21600 (da qui), ricevo questo messaggio:

    La confusione qui è che le immagini superiori a 4 MB sono vietate, ma allo stesso tempo sono consentite immagini superiori a 50 MB.
    Qual è il vero motivo per cui non posso caricare questa immagine?

2 Mi Piace

Bella foto! Il passaggio da 28 MB a 113 KB è un ottimo rapporto!

Quindi questa nuova funzionalità modifica solo la fase “pre-caricamento”. Intercettiamo il file che tenti di caricare, applichiamo delle trasformazioni e poi sostituiamo il file originale con quello più piccolo, riprendendo il processo di caricamento precedente.

Rimane allo 0% e mostra “Elaborazione…” durante la fase pre-caricamento, quindi è normale. Proverò a sostituire anche la stringa “Caricamento…” in basso.

4 MB restano vietati; il trucco è che ottimizziamo l’immagine in modo che sia > 4 MB quando possibile, così da superare il limite di dimensione del file.

Ho provato alcune immagini da quel sito, ma usano tutte la trasparenza PNG, quindi non posso convertire in modo sicuro in JPG e l’ottimizzatore si blocca.

Ho testato un PNG da 60 MB: l’ottimizzatore riesce a gestirlo, ma utilizza oltre 4 GB di RAM per produrre un JPG da 360 KB.

Quale dispositivo, browser e versione del sistema operativo stavi usando durante questo test?

5 Mi Piace

Ho aggiunto un nuovo messaggio di stato del compositore “Elaborazione caricamento” in modo che tu sappia esattamente cosa sta succedendo.

Questa funzione è ora sicura da testare, fammi sapere come va nella tua community!

9 Mi Piace

Provo con una foto da 1,6 MB scattata con il mio iPhone:

Wow, 300k e qualità molto elevata.

6 Mi Piace

5 Mi Piace

8 Mi Piace

Ciao Falco,

Ho iniziato a utilizzare l’ottimizzazione delle immagini di Composer. Ho notato che se desidero caricare più foto, il pulsante Rispondi si attiva dopo il primo caricamento e si disattiva solo al termine dell’ottimizzazione dell’immagine successiva. Se si clicca sul pulsante Rispondi in quel momento, gli altri caricamenti si bloccano e viene composto solo il testo (elaborazione). Non riesco a riprodurre il problema qui perché su Meta il pulsante cambia rapidamente, ma sul mio sito si blocca la maggior parte delle volte per circa 10 secondi o più tra un caricamento e l’altro. Utilizzo le impostazioni predefinite e 3 immagini da circa 3-4 MB ciascuna.

L’ho provato con Huawei P20 Pro, Android 10 (Chrome 91.0.4472.120) tramite Webapp.

Come si vede nel video, dopo i caricamenti (Feltöltés) il pulsante Rispondi si attiva. Ogni immagine è di circa 2,3 MB.

È possibile disabilitare il pulsante Rispondi per tutto il tempo durante il caricamento delle immagini?


Sono confuso riguardo a questa impostazione. “Kilobyte” è corretto?

Grazie per la risposta! :slight_smile:

3 Mi Piace

Grazie per la segnalazione! C’era un bug nel calcolo dello stato di disabilitazione del pulsante:

Byte - Wikipedia. Di default è impostato su mezzo megabyte, ma puoi modificarlo secondo le tue esigenze. Ti consiglio di impostarlo su circa 300 KB se vuoi risparmiare più spazio possibile.

5 Mi Piace

Grazie per la correzione. :slightly_smiling_face:

Capisco. Pensavo fosse un errore di battitura che confondeva byte con kilobyte. Ho inserito 524288kb nel convertitore e mi ha restituito 512mb. Ecco perché ero confuso. Ma ora ho capito :slightly_smiling_face: Grazie

3 Mi Piace

Ohhhhh, ora lo vedo. Scusa!

3 Mi Piace

Ciao,

Grazie per la correzione :slight_smile: Ora funziona benissimo!

Ho una domanda sui caricamenti da mobile. Quando carico un’immagine da mobile, non viene ridimensionata alla larghezza in pixel desiderata. Penso che cambi solo la qualità. Se provo da un PC desktop, il ridimensionamento funziona. Ho perso qualcosa? Grazie :slight_smile:

2 Mi Piace

Proviamo a ridimensionare sia su mobile che su desktop, ma l’operazione di ridimensionamento potrebbe fallire se l’hardware del tuo dispositivo è troppo debole. In tal caso, la ignoriamo.

4 Mi Piace