Best practice per ottimizzare la qualità delle immagini

L'ottimizzazione della qualità delle immagini può richiedere molto tempo, in quanto molti fattori contribuiscono a rendere i risultati accettabili. Il risultato è in parte soggettivo perché gli individui percepiscono la qualità dell'immagine in modo diverso. La sperimentazione strutturata è fondamentale.

AEM include più di 100 comandi per la distribuzione di immagini Dynamic Media per ottimizzare e ottimizzare le immagini e i risultati di rendering. Le seguenti linee guida possono essere utili per semplificare il processo e ottenere rapidamente buoni risultati utilizzando alcuni comandi e best practice essenziali.

Best practice per il formato immagine (&fmt=)

JPG o PNG sono le scelte migliori per offrire immagini di buona qualità e con dimensioni e peso gestibili.
Se nell’URL non viene fornito alcun comando di formato, per impostazione predefinita la consegna delle immagini Dynamic Media è impostata su JPG.
Il formato JPG si comprime con un rapporto di 10:1 e di solito genera file di dimensioni più ridotte. PNG si comprime con un rapporto di circa 2:1, tranne in alcuni casi, ad esempio quando le immagini contengono uno sfondo bianco. In genere, tuttavia, le dimensioni dei file PNG sono maggiori dei file JPG.
Il formato JPG utilizza la compressione con perdita di dati, ovvero gli elementi dell'immagine (pixel) vengono eliminati durante la compressione. Il PNG utilizza invece la compressione senza perdita di dati.
JPG comprime spesso immagini fotografiche con una migliore fedeltà rispetto alle immagini sintetiche con bordi netti e contrasto.
Se le immagini contengono trasparenza, utilizza PNG perché JPG non supporta la trasparenza.

Come best practice per il formato immagine, inizia con l’impostazione più comune &fmt=JPG.

Best practice per le dimensioni delle immagini

La riduzione dinamica delle dimensioni dell'immagine è una delle attività più comuni. Si tratta di specificare le dimensioni e, facoltativamente, quale modalità di downsampling viene utilizzato per ridimensionare l'immagine.

Per il dimensionamento delle immagini, l'approccio migliore e più semplice consiste nell'utilizzare &wid=<value> e &hei=<value>,o semplicemente &hei=<value>. Questi parametri impostano automaticamente la larghezza dell'immagine in base alle proporzioni.
&resMode=<value>controlla l’algoritmo utilizzato per il downsampling. Inizia con &resMode=sharp2. Questo valore offre la migliore qualità delle immagini. Quando si utilizza il downsampling value =bilin è più veloce, spesso si genera l'aliasing degli artefatti.

Come best practice per il dimensionamento delle immagini, utilizza &wid=<value>&hei=<value>&resMode=sharp2 o &hei=<value>&resMode=sharp2

Best practice per la nitidezza delle immagini

La nitidezza delle immagini è l’aspetto più complesso del controllo delle immagini sul sito web e in cui vengono commessi molti errori. Prenditi del tempo per saperne di più su come funziona la nitidezza e la maschera di contrasto in AEM facendo riferimento alla guida Adobe Dynamic Media Classic Image Quality and Sharpening Best Practices che si applica anche a AEM.

Vedere anche Nitidezza di un'immagine con maschera di contrasto.

Con AEM è possibile aumentare la nitidezza delle immagini durante l’acquisizione, la distribuzione o entrambe. Nella maggior parte dei casi, tuttavia, è necessario rendere più nitide le immagini utilizzando un solo metodo o l’altro, ma non entrambi. La nitidezza delle immagini sulla consegna, su un URL, in genere fornisce i risultati migliori.

Sono disponibili due metodi di nitidezza delle immagini:

Nitidezza semplice ( &op_sharpen) : simile al filtro di nitidezza utilizzato in Photoshop, la nitidezza semplice applica una nitidezza di base alla visualizzazione finale dell’immagine dopo il ridimensionamento dinamico. Tuttavia, questo metodo non è configurabile dall'utente. Si consiglia di non utilizzare &op_sharpen se non richiesto.
Maschera definizione dettagli ( &op_USM) - Il mascheramento definizione dettagli è un filtro di nitidezza standard del settore. La migliore pratica è quella di rendere più nitide le immagini con maschera di contrasto seguendo le linee guida riportate di seguito. La funzione Maschera definizione dettagli consente di controllare i tre parametri seguenti:
- &op_sharpen=importo,raggio,soglia
  - quantità (0-5, forza dell'effetto).
  - raggio (0-250, larghezza delle "linee di nitidezza" tracciate intorno all’oggetto affilato, misurata in pixel).
```
 Tieni presente che il raggio e la quantità dei parametri funzionano l’uno contro l’altro. La riduzione del raggio può essere compensata dall&#39;aumento della quantità. Il raggio consente un controllo più preciso, poiché un valore inferiore rende più nitidi solo i pixel del bordo, mentre un valore più alto rende più nitida una banda più ampia di pixel.
```
  - soglia (0-255, sensibilità dell'effetto).
```
 Questo parametro determina la differenza tra i pixel da rendere più nitidi rispetto all’area circostante, prima che vengano considerati pixel del bordo e che il filtro li renda più nitidi. Il parametro **soglia** consente di evitare l’eccessiva nitidezza delle aree con colori simili, ad esempio i toni della pelle. Ad esempio, con un valore di soglia pari a 12 vengono ignorate le variazioni lievi di luminosità nell’incarnato per evitare di aggiungere “disturbo”, mentre viene aumentato il contrasto lungo i bordi delle aree dove è più presente, ad esempio tra ciglia e pelle.
```
    Per ulteriori informazioni su come impostare questi tre parametri, incluse le best practice da utilizzare con il filtro, consulta la guida Adobe Dynamic Media Classic Image Quality and Sharpening Best Practices (applicabile anche a Dynamic Media in AEM).
- AEM inoltre consente di controllare un quarto parametro: monocromatico (0,1). Questo parametro determina se la maschera di contrasto viene applicata separatamente a ciascun componente di colore utilizzando il valore 0 o alla luminosità/intensità dell'immagine utilizzando il valore 1.

Come best practice, inizia con il parametro del raggio della maschera di contrasto. Le impostazioni del raggio che puoi iniziare sono le seguenti:

Sito Web: 0,2-0,3 pixel
Stampa fotografica (250-300 ppi): 0,3-0,5 pixel
Stampa offset (266-300 ppi): 0,7-1,0 pixel
Stampa su tela (150 ppi): 1,5-2,0 pixel

Aumentare gradualmente l'importo da 1,75 a 4. Se la nitidezza non è ancora quella desiderata, aumenta il raggio di un punto decimale ed esegui di nuovo il valore da 1,75 a 4. Ripeti se necessario.

Lascia l’impostazione del parametro monocromatico su 0.

Best practice per la compressione JPEG (&qlt=)

Questo parametro controlla la qualità di codifica JPG. un valore più elevato significa un'immagine di qualità superiore ma di grandi dimensioni; in alternativa, un valore più basso indica un'immagine di qualità inferiore ma una dimensione file inferiore. L'intervallo per questo parametro è compreso tra 0 e 100.
Per ottimizzare la qualità, non impostare il valore del parametro su 100. La differenza tra un'impostazione di 90 o 95 e 100 è quasi impercettibile, ma 100 aumenta inutilmente la dimensione del file di immagine. Pertanto, per ottimizzare la qualità ma evitare che i file di immagine diventino troppo grandi, imposta il valore qlt=<value> su 90 o 95.
Per ottimizzare le dimensioni di un file immagine di piccole dimensioni ma mantenere la qualità dell'immagine a un livello accettabile, impostare qlt=<value> su 80. Valori inferiori a 70-75 determinano un significativo deterioramento della qualità delle immagini.
Come best practice, per rimanere nel mezzo, imposta il qlt=<value> su 85 per rimanere nel mezzo.
Utilizzo del flag chroma in qlt=
- Il parametro qlt= dispone di una seconda impostazione che consente di attivare il sottocampionamento della cromaticità RGB utilizzando il valore ,1 o disattivandolo con il valore ,0.
- Per renderlo semplice, inizia con il downsampling della cromaticità RGB disattivato (,0). Questa impostazione di solito garantisce una migliore qualità delle immagini, specialmente per le immagini sintetiche con bordi netti e contrasto elevato.

Come best practice per la compressione JPG utilizza &qlt=85,0.

Best practice per il ridimensionamento JPEG (&jpegSize=)

jpegSize è un parametro utile se vuoi garantire che un'immagine non superi una certa dimensione per la distribuzione su dispositivi con memoria limitata.

Questo parametro è impostato in kilobyte (jpegSize=<size_in_kilobytes>). Definisce le dimensioni massime consentite per la distribuzione delle immagini.
&jpegSize= interagisce con il parametro di compressione JPG &qlt=. Se la risposta JPG con il parametro di compressione JPG specificato (&qlt=) non supera il valore jpegSize, l'immagine viene restituita con &qlt= come definito. In caso contrario, &qlt= viene gradualmente ridotto finché l'immagine non rientra nelle dimensioni massime consentite, o finché il sistema non lo determina e restituisce un errore.

Come best practice, imposta &jpegSize= e aggiungi il parametro &qlt= se distribuisci immagini JPG a dispositivi con memoria limitata.

Riepilogo delle best practice

Come best practice, per ottenere un'elevata qualità delle immagini e dimensioni ridotte dei file, inizia con la seguente combinazione di parametri:

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

Questa combinazione di impostazioni produce risultati eccellenti nella maggior parte delle circostanze.

Se l'immagine richiede un'ulteriore ottimizzazione, regolate gradualmente i parametri di nitidezza (Mascheramento di contrasto) iniziando con un raggio impostato su 0.2 o 0.3. Quindi, incrementate gradualmente la quantità da 1.75 a un massimo di 4 (equivalente a 400% in Photoshop). Verificare che il risultato desiderato sia raggiunto.

Se i risultati della nitidezza non sono ancora soddisfacenti, aumenta il raggio in incrementi decimali. Per ogni incremento decimale, riavviare il valore a 1,75 e incrementarlo gradualmente a 4. Ripetere questo processo fino a ottenere il risultato desiderato. Anche se i valori di cui sopra sono un approccio convalidato dagli studi creativi, ricorda che puoi iniziare con altri valori e seguire altre strategie. Che i risultati siano soddisfacenti o meno è una questione soggettiva, quindi la sperimentazione strutturata è fondamentale.

Durante l’esperimento, potresti anche trovare utili i seguenti suggerimenti generali per ottimizzare il flusso di lavoro:

Prova e verifica parametri diversi in tempo reale, direttamente su un URL.
Come best practice, ricorda che puoi raggruppare i comandi di Dynamic Media Image Serving in un predefinito per immagini. Un predefinito per immagini è fondamentalmente macro di comando URL con nomi predefiniti personalizzati come $thumb_low$ e &product_high$. Il nome predefinito personalizzato in un percorso URL effettua una chiamata a questi predefiniti. Tali funzionalità consentono di gestire i comandi e le impostazioni di qualità per diversi schemi di utilizzo delle immagini sul sito web e di ridurre la lunghezza complessiva degli URL.
AEM inoltre offre modalità più avanzate per ottimizzare la qualità delle immagini, ad esempio applicando la nitidezza delle immagini durante l’acquisizione. Per i casi d’uso avanzati in cui questa può essere un’opzione per ottimizzare ulteriormente i risultati di rendering, Adobe Professional Services può aiutarti con informazioni personalizzate e best practice.