[AEM Assets]{class="badge positive" title="Si applica ad AEM Assets)."}
Best practice per ottimizzare la qualità delle immagini best-practices-for-optimizing-the-quality-of-your-images
L’ottimizzazione della qualità delle immagini può richiedere molto tempo, poiché molti fattori contribuiscono al rendering di risultati accettabili. Il risultato è in parte soggettivo perché gli individui percepiscono la qualità dell’immagine in modo diverso. La sperimentazione strutturata è fondamentale.
Adobe Experience Manager include più di 100 comandi di consegna delle immagini Dynamic Media per ottimizzare le immagini e i risultati del rendering. Le seguenti linee guida possono essere utili per semplificare il processo e ottenere rapidamente buoni risultati utilizzando alcuni comandi essenziali e best practice.
Abilitare l’imaging avanzato in Dynamic Media bp-enable-smart-imaging
Smart imaging:
- L’abilitazione di Smart Imaging in Dynamic Media consente di ottimizzare automaticamente il formato, le dimensioni e la qualità delle immagini in base alle funzionalità del browser client.
Per ulteriori informazioni, vedere Smart Imaging. - Migliora le prestazioni di consegna delle immagini regolando dinamicamente questi parametri.
- È possibile valutare Smart Imaging utilizzando lo strumento di autovalutazione Snapshot.
Formati immagine:
- Evitare di utilizzare comandi
fmt=webpofmt=avifespliciti in un URL, a meno che non siano specificatamente necessari per un caso d’uso. - La tecnologia Smart Imaging seleziona automaticamente il formato migliore, ottimizzando l’ampiezza di banda.
Comportamento predefinito:
- Se nell’URL non è specificato alcun comando di formato e Smart Imaging non è abilitato, per impostazione predefinita la consegna delle immagini Dynamic Media utilizza il formato JPEG.
Scegliendo con cognizione di causa i formati delle immagini e abilitando la tecnologia Smart Imaging, potrai migliorare le prestazioni e l’esperienza di utilizzo.
Best practice per selezionare l’immagine sorgente bp-select-source-image
Considerazioni essenziali sull’utilizzo delle immagini di origine:
-
Formato immagine Source:
- L’utilizzo di formati senza perdita di dati come PNG, TIFF o PSD garantisce un’elevata qualità dell’immagine senza artefatti di compressione.
- Questi formati conservano tutti i dati originali e li rendono ideali per l’editing e l’ulteriore elaborazione.
-
Dimensione immagine Source:
- Iniziare con un’immagine ad alta risoluzione fornisce più dettagli e flessibilità.
- Quando le immagini devono essere visualizzate in dimensioni diverse (ad esempio, tra dispositivi o risoluzioni dello schermo), una sorgente di immagine più grande consente una migliore scalabilità.
- Per le immagini che supportano lo zoom (come le foto di prodotto), mirare a dimensioni di circa 2.000 pixel o più sul lato più lungo.
- I logo o i banner che non richiedono lo zoom possono essere caricati nella dimensione più grande necessaria per l’uso previsto.
Effettuando queste scelte a livello di origine, puoi contribuire alla qualità del contenuto visivo.
Best practice per le dimensioni delle immagini best-practices-for-image-size
La riduzione dinamica delle dimensioni delle immagini è una delle attività più comuni. Implica di specificare le dimensioni e, facoltativamente, la modalità di downsampling da utilizzare per ridimensionare l’immagine.
- Per ridimensionare l’immagine, utilizzare
&wid=<value>e&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à dell’immagine. L’utilizzo del downsamplingvalue=bilinè più veloce, ma spesso genera artefatti di alias.
Come best practice per il dimensionamento delle immagini, utilizza &wid=<value>&hei=<value>&resMode=sharp2 o &hei=<value>&resMode=sharp2
Procedure consigliate per la nitidezza delle immagini best-practices-for-image-sharpening
La nitidezza delle immagini è l’aspetto più complesso del controllo delle immagini sul sito web e in cui vengono commessi molti errori. Per ulteriori informazioni sul funzionamento della nitidezza e della maschera di contrasto in Experience Manager, consulta le seguenti risorse utili:
-
Il white paper sulle best practice Best practice per la qualità delle immagini e la nitidezza di Adobe Dynamic Media Classic si applica anche ad Experience Manager.
-
Guarda Utilizza nitidezza immagine con Experience Manager - Dynamic Media.
In Experience Manager, puoi rendere più nitide le immagini durante l’acquisizione, la distribuzione o entrambe. Di solito, tuttavia, è meglio rendere più nitide le immagini utilizzando un solo metodo o l’altro, ma non entrambi. In genere, la nitidezza delle immagini alla consegna tramite un URL offre i risultati migliori.
Esistono due metodi per la nitidezza delle immagini:
-
Nitidezza semplice (
&op_sharpen): simile al filtro di nitidezza di Adobe Photoshop, applica la nitidezza di base dopo il ridimensionamento dinamico. Questo metodo non è configurabile dall’utente. Evitare di utilizzare&op_sharpena meno che non sia necessario. -
Maschera di contrasto (
&op_USM) - La maschera di contrasto è un filtro di nitidezza standard. La best practice prevede di rendere più nitide le immagini con una maschera di contrasto seguendo le linee guida riportate di seguito. Il mascheramento di contrasto consente di controllare i tre parametri seguenti:-
&op_sharpen=importo,raggio,soglia- importo (0-5, intensità dell’effetto).
- raggio (0-250, larghezza delle “linee di nitidezza” disegnate attorno all’oggetto nitidezza, misurata in pixel).
Il raggio e la quantità dei parametri hanno effetti opposti. La riduzione del raggio può essere compensata aumentando la quantità. Raggio consente un controllo più preciso, poiché un valore inferiore agisce solo sui pixel del bordo, mentre un valore più elevato agisce su una banda di pixel più ampia.
- 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 threshold 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 sull’impostazione di questi tre parametri, comprese le best practice da utilizzare con il filtro, consulta le risorse seguenti:
-
Il white paper sulle best practice Best practice per la qualità delle immagini e la nitidezza di Adobe Dynamic Media Classic si applica anche ad Experience Manager.
-
Guarda Utilizza nitidezza immagine con Experience Manager - Dynamic Media.
-
Experience Manager consente inoltre di controllare un quarto parametro: monocromatico (0,1). Questo parametro determina se la maschera di contrasto viene applicata separatamente a ogni componente di colore utilizzando il valore 0 oppure 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 potete 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 soddisfacente, aumentare il raggio di un punto decimale e riportare il valore da 1,75 a 4. Ripetere l’operazione in base alle esigenze.
Lascia il parametro monocromatico impostato su 0.
Best practice per la compressione JPEG (&qlt=) best-practices-for-jpef-compression-qlt
-
Questo parametro controlla la qualità della codifica JPG. Un valore più alto indica un’immagine di qualità superiore ma con dimensioni di file maggiori; in alternativa, un valore più basso indica un’immagine di qualità inferiore ma con dimensioni di file inferiori. L’intervallo per questo parametro è 0-100.
-
Per ottimizzare la qualità, non impostate il valore del parametro su 100. La differenza tra un’impostazione di 90 o 95 e 100 è quasi impercettibile. Eppure 100 aumenta inutilmente la dimensione del file di immagine. Pertanto, per ottimizzare la qualità, ma evitare che i file immagine diventino troppo grandi, impostare
qlt= valuesu 90 o 95. -
Per ottimizzare un file di immagine di dimensioni ridotte mantenendo la qualità dell’immagine a un livello accettabile, impostare
qlt= valuesu 80. Valori inferiori a 70-75 causano un significativo deterioramento della qualità dell’immagine. -
Come best practice, impostare
qlt= valuesu 85. -
Utilizzo del flag chroma in
qlt=- Per il parametro
qlt=è disponibile una seconda impostazione che consente di attivare il downsampling della cromaticità di RGB utilizzando il valore,1o di disattivare utilizzando il valore,0. - Per semplificare, iniziare con il downsampling della cromaticità RGB disattivato (
,0). Questa impostazione di solito produce una migliore qualità dell’immagine, specialmente per le immagini sintetiche con molti bordi nitidi e contrasto.
- Per il parametro
Come best practice per la compressione di JPG, utilizza &qlt=85,0.
Best practice per il dimensionamento di JPEG (&jpegSize=) best-practices-for-jpeg-sizing-jpegsize
Il parametro jpegSize è utile. Garantisce che un’immagine non superi una determinata dimensione per la distribuzione a dispositivi con memoria limitata.
- Questo parametro è impostato in kilobyte (
jpegSize=<size_in_kilobytes>). Definisce la dimensione massima consentita per la consegna delle immagini. &jpegSize=interagisce con il parametro di compressione di JPG&qlt=. Se la risposta di JPG con il parametro di compressione di JPG specificato (&qlt=) non supera il valore jpegSize, l’immagine viene restituita con&qlt=come definito. In caso contrario,&qlt=viene gradualmente ridotto fino a quando l’immagine non rientra nelle dimensioni massime consentite. Oppure, finché il sistema non determina che non può rientrare e restituisce un errore.
Come best practice, impostare &jpegSize= e aggiungere il parametro &qlt= se si consegnano immagini JPG a dispositivi con memoria limitata.
Riepilogo delle best practice best-practices-summary
Come best practice, per ottenere una qualità immagine elevata e dimensioni file ridotte, inizia con la seguente combinazione di parametri:
fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0
Nella maggior parte dei casi, questa combinazione di impostazioni produce risultati eccellenti.
Se l’immagine richiede un’ulteriore ottimizzazione, regolare gradualmente i parametri di nitidezza (maschera di contrasto) iniziando con un raggio impostato su 0.2 o 0.3. Quindi, aumenta gradualmente l’importo da 1,75 a un massimo di 4 (equivalente al 400% in Adobe Photoshop). Verificare che sia stato raggiunto il risultato desiderato.
Se i risultati della nitidezza non sono ancora soddisfacenti, aumentare il raggio con incrementi decimali. Per ogni incremento decimale, riavvia il valore a 1,75 e aumentalo gradualmente a 4. Ripetere questa procedura fino a ottenere il risultato desiderato. Anche se i valori di cui sopra sono un approccio convalidato dagli studi creativi, puoi iniziare con altri valori e seguire altre strategie. Se i risultati sono soddisfacenti o meno è una questione soggettiva; pertanto, la sperimentazione strutturata è essenziale.
Durante la sperimentazione, i seguenti suggerimenti generali sono utili per ottimizzare il flusso di lavoro:
- Verifica diversi parametri in tempo reale su un URL.
- Come best practice, ricorda che puoi raggruppare i comandi Dynamic Media Image Server in un predefinito per immagini. Un predefinito immagine è una macro di comando URL con nomi predefiniti personalizzati, ad esempio
$thumb_low$e&product_high$. Il nome del predefinito personalizzato in un percorso URL chiama questi predefiniti. Questa funzionalità consente di gestire i comandi e le impostazioni di qualità per diversi pattern di utilizzo delle immagini sul sito web e di ridurre la lunghezza complessiva degli URL. - Experience Manager offre anche metodi più avanzati per regolare la qualità delle immagini, ad esempio applicare la nitidezza all’acquisizione. Per ottimizzare e ottimizzare i risultati del rendering, i servizi di consulenza di Adobe possono aiutarti con insight personalizzato e best practice.