[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

Ultimo aggiornamento: 29 settembre 2026

Si applica a:
Experience Manager as a Cloud Service

Creato per:

Utente

TIP

Hai appena cominciato a usare Dynamic Media? Per una rapida panoramica di alto livello di Dynamic Media, consulta Utilizzare Dynamic Media.

Adobe Experience Manager fornisce più di 100 comandi per la consegna delle immagini di Dynamic Media per la messa a punto, l’ottimizzazione e il rendering delle immagini. Questo esteso set di comandi consente di controllare quasi tutti gli aspetti dell’elaborazione e della distribuzione di un’immagine, dalla risoluzione e compressione alla nitidezza e al rendering dei colori.

L’ottimizzazione della qualità delle immagini è un processo iterativo, che a volte richiede tempo, poiché diversi fattori distinti contribuiscono a risultati accettabili, tra cui risoluzione, livello di compressione, formato file, nitidezza e precisione colore. Il risultato è anche parzialmente soggettivo, poiché gli individui percepiscono la qualità dell’immagine in modo diverso e le condizioni di visualizzazione variano da un display, browser o dispositivo all’altro. A causa di questa variabilità, la sperimentazione strutturata è essenziale: la regolazione metodica di una variabile alla volta e il confronto dell’output renderizzato è il percorso più affidabile per ottenere una qualità coerente.

Le seguenti best practice semplificano il processo e forniscono risultati di alta qualità in modo efficiente utilizzando una serie di comandi di base e tecniche collaudate. La loro corretta applicazione non è solo estetica: le immagini ottimizzate in modo appropriato riducono le dimensioni dei file e il tempo di caricamento, migliorando le prestazioni della pagina, l’esperienza utente e la distribuzione nell’intera gamma di dispositivi e condizioni di rete.

Fattori chiave che influiscono sulla qualità delle immagini

Risoluzione e dimensioni — Abbina le dimensioni dei pixel fornite alle dimensioni di visualizzazione effettive per evitare inutili artefatti di upscaling o downscaling.
Compressione: bilancia le dimensioni del file con la perdita di qualità visibile, poiché la compressione aggressiva riduce la larghezza di banda ma può introdurre artefatti.
Formato file: selezionare il formato più adatto al contenuto dell’immagine e al dispositivo di destinazione per bilanciare la qualità e l’efficienza della consegna.
Nitidezza: applica la nitidezza per contrastare l’attenuazione che si verifica durante il ridimensionamento, che ripristina i dettagli percepiti.
Rendering colore: consente di mantenere colori accurati in modo che le immagini vengano visualizzate in modo coerente in diversi ambienti di visualizzazione e visualizzazione.

Approccio consigliato

Stabilire una previsione. Eseguire il rendering di un’immagine con le impostazioni predefinite in modo da disporre di un punto di riferimento per il confronto.
Regolare una variabile alla volta. Modificate un singolo comando o parametro, quindi valutate il risultato, perché l’isolamento delle variabili chiarisce quale regolazione ha prodotto quale effetto.
Confronta visivamente l’output di cui è stato eseguito il rendering. Poiché la qualità dell’immagine è parzialmente soggettiva, esaminare i risultati affiancati su dispositivi e display rappresentativi.
Equilibrio tra qualità e prestazioni. Verifica che i miglioramenti della qualità non aumentino le dimensioni del file al punto che il tempo di caricamento della pagina e la consegna ne risentono.
Standardizzare le impostazioni riuscite. Una volta identificate le combinazioni di comandi che producono risultati coerenti, riutilizzale per semplificare l’ottimizzazione futura.

Combinando questi comandi essenziali con la sperimentazione strutturata, puoi ottenere una distribuzione di immagini di alta qualità e performante in modo rapido e ripetibile tra le risorse Dynamic Media.

Abilitare l’imaging avanzato in Dynamic Media bp-enable-smart-imaging

Smart imaging:

L’abilitazione di Smart Imaging in Dynamic Media consente l’ottimizzazione automatica dell’immagine format, size e quality in base alle funzionalità del browser client. Smart Imaging esegue questa negoziazione del formato su ogni richiesta, fornendo l’immagine più efficiente supportata da un determinato browser in modo che le pagine vengano caricate più rapidamente e utilizzino meno larghezza di banda.
Per ulteriori informazioni, vedere Smart Imaging.
Migliora le prestazioni di consegna delle immagini regolando dinamicamente questi parametri, perché la distribuzione del file più piccolo adatto a ciascun browser riduce il payload trasferito e migliora i tempi di caricamento delle pagine.
Gli amministratori e gli sviluppatori possono valutare Smart Imaging utilizzando lo strumento di autovalutazione Snapshot.

Formati immagine:

Evitare di utilizzare comandi fmt=webp (WebP) o fmt=avif (AVIF) espliciti in un URL, a meno che non siano specificatamente necessari per un caso d’uso. La codifica rigida di un formato nell’URL ignora la negoziazione automatica e può impedire che Smart Imaging distribuisca il formato ottimale per i browser che supportano un’alternativa più efficiente.
Smart Imaging seleziona automaticamente il formato migliore per ogni richiesta. Ciò riduce i byte trasferiti e consente di ottenere una larghezza di banda ottimale.

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 viene impostata sul formato JPEG. Di conseguenza, i formati di nuova generazione come WebP e AVIF non vengono serviti automaticamente finché Smart Imaging non viene abilitato.

Scegliendo con cognizione di causa i formati delle immagini e abilitando la tecnologia Smart Imaging, puoi migliorare direttamente le prestazioni di consegna 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 - PNG (Portable Network Graphics), TIFF (Tagged Image File Format) o PSD (Photoshop Document) - mantiene elevata la qualità delle immagini ed elimina gli artefatti di compressione, le distorsioni visibili introdotte da formati con perdita di dati come JPEG.
- Questi formati mantengono tutti i dati pixel originali. Questo li rende ideali per la modifica, il ritocco e il salvataggio ripetuto, perché non si perde la qualità ogni volta che il file viene elaborato.
Dimensione immagine Source:
- A partire da una immagine ad alta risoluzione è possibile ottenere maggiori dettagli e maggiore flessibilità, perché l’aumento di scala di un’immagine di piccole dimensioni non consente di recuperare dettagli mai acquisiti.
- Quando le immagini devono essere visualizzate in dimensioni diverse (ad esempio, tra dispositivi o risoluzioni dello schermo), un’immagine sorgente più grande consente una migliore scalabilità e risultati più nitidi a ogni dimensione di destinazione.
- Per le immagini che supportano lo zoom, ad esempio le foto di prodotto in cui i clienti esaminano dettagli accurati, puntare 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 direttamente a livello di origine si determina la qualità del contenuto visivo finale, poiché ogni passaggio di ridimensionamento, ritaglio e compressione a valle eredita i punti di forza o di debolezza del file originale.

Best practice per le dimensioni delle immagini best-practices-for-image-size

La riduzione dinamica delle dimensioni delle immagini è una delle attività più comuni nella distribuzione delle immagini. Comporta la specifica delle dimensioni di destinazione e, facoltativamente, la selezione della modalità di downsampling utilizzata per ridurre la scala dell’immagine. Il modello URL consigliato è &wid=<value>&hei=<value>&resMode=sharp2 (o &hei=<value>&resMode=sharp2 se è impostata solo l’altezza), che offre la qualità visiva più elevata per le immagini ridimensionate.

Parametri di dimensionamento

Per ridimensionare l’immagine, utilizzare &wid=<value> e &hei=<value>:

&wid=<value> imposta la larghezza dell’immagine.
&hei=<value> imposta l’altezza dell’immagine
Quando si specifica una sola dimensione, questi parametri calcolano automaticamente l’altra dimensione in base alle proporzioni dell’immagine, preservando le proporzioni originali ed evitando distorsioni.

Modalità di downsampling (resMode)

&resMode=<value> controlla l’algoritmo utilizzato per il downsampling, ovvero il processo di riduzione delle dimensioni in pixel di un’immagine. L’algoritmo scelto influisce direttamente sulla nitidezza e la qualità dell’immagine finale in scala.

Inizia con &resMode=sharp2. Questo valore offre la migliore qualità dell’immagine perché mantiene i dettagli dei bordi e la trama fine durante il ridimensionamento delle immagini, producendo risultati nitidi e privi di artefatti.
&resMode=bilin (bilineare) è più veloce, ma poiché calcola la media dei pixel in modo più semplice, produce spesso artefatti di aliasing, come bordi frastagliati visibili, motivi di moiré e perdita di dettagli. Di conseguenza, bilin scambia la qualità dell’immagine in base alla velocità di elaborazione.

A differenza di bilin, la modalità sharp2 assegna priorità alla fedeltà visiva, rendendola la scelta preferita per la distribuzione di immagini ridimensionate di alta qualità.

Best practice consigliate

Come best practice per il dimensionamento delle immagini, utilizza &wid=<value>&hei=<value>&resMode=sharp2 o &hei=<value>&resMode=sharp2. Questa combinazione imposta le dimensioni target, mantiene le proporzioni corrette e applica l’algoritmo di downsampling di qualità più elevata.

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. Come best practice, è consigliabile rendere più nitide le immagini utilizzando un solo metodo, non entrambi. La nitidezza delle immagini alla consegna tramite un URL offre i risultati migliori nella maggior parte dei flussi di lavoro, perché consente di regolare la nitidezza in base alle dimensioni di rendering finali anziché inserirla nella risorsa acquisita.

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_sharpen a meno che non sia necessario.
Maschera di contrasto (&op_USM) - La maschera di contrasto è un filtro di nitidezza standard del settore che aumenta il contrasto dei bordi per rendere un’immagine più nitida. 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, misurata in pixel.)
  I parametri radius e amount hanno effetti opposti: poiché la riduzione del raggio indebolisce l’effetto, è possibile compensare aumentando la quantità. Il raggio consente un controllo più preciso, poiché un valore più basso agisce solo sui pixel del bordo, mentre un valore più alto agisce su una banda più ampia di pixel, producendo un alone più pronunciato.
  - 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 di 12 vengono ignorate le variazioni lievi di luminosità nell’aspetto per evitare di aggiungere “disturbo”, mentre viene aumentato il contrasto dei bordi delle aree con contrasto elevato, ad esempio quelle in cui le ciglia incontrano la 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 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 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

Per perfezionare la nitidezza, segui la procedura riportata di seguito:

Aumentare gradualmente l’importo da 1,75 a 4.
Se la nitidezza non è ancora soddisfacente, aumentare il raggio di un punto decimale.
Eseguire di nuovo l’importo da 1,75 a 4.
Ripetere l’operazione finché il risultato non è soddisfacente.

Lascia il parametro monocromatico impostato su 0.

Best practice per la compressione JPEG (`&qlt=`) best-practices-for-jpef-compression-qlt

L’impostazione consigliata per la compressione JPG è &qlt=85,0. Questo valore bilancia un’elevata qualità visiva con una dimensione controllata del file per la maggior parte delle immagini.
Questo parametro controlla la qualità della codifica JPG. Un valore più alto indica un’immagine di qualità superiore ma dimensioni di file maggiori; un valore più basso indica un’immagine di qualità inferiore ma dimensioni di file minori. L’intervallo valido è 0-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 per l’occhio umano. Per questo motivo, un’impostazione di 100 aumenta inutilmente la dimensione del file di immagine senza un guadagno visivo percepibile. Pertanto, per ottimizzare la qualità ed evitare file di dimensioni eccessive, impostare qlt= value su 90 o 95.
Per ottimizzare un file di piccole dimensioni mantenendo la qualità dell’immagine a un livello accettabile, impostare qlt= value su 80. I valori al di sotto di 70-75 introducono un significativo deterioramento visibile, ad esempio il blocco di artefatti, la creazione di bande e la perdita di dettagli, pertanto non sono consigliati per le immagini di produzione.
Come best practice generale, impostare qlt= value su 85, in modo da fornire un punto di mezzo affidabile tra qualità e dimensioni del file in un’ampia gamma di contenuti immagine.
Utilizzo del flag chroma inqlt=
- Il parametro qlt= dispone di una seconda impostazione che controlla il downsampling della cromaticità di RGB, una tecnica di compressione che riduce la risoluzione delle informazioni di colore (chroma) preservando i dettagli della luminanza. Attiva il downsampling utilizzando il valore ,1 o disattiva utilizzando il valore ,0.
- Per la maggior parte dei flussi di lavoro, inizia con il downsampling della cromaticità di RGB disattivato (,0). Questa impostazione offre una migliore qualità dell’immagine perché consente di conservare i dati dei colori a risoluzione completa, che sono più importanti per le immagini sintetiche con bordi nitidi, contrasto elevato e transizioni di colore fini in cui altrimenti sarebbero visibili artefatti di downsampling.

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

Best practice per il dimensionamento di JPEG (`&jpegSize=`) best-practices-for-jpeg-sizing-jpegsize

Il parametro &jpegSize= garantisce che un’immagine consegnata non superi le dimensioni massime specificate, rendendo essenziale la distribuzione di immagini JPEG a dispositivi con memoria limitata. Applicando un limite superiore alle dimensioni del file, si impedisce alle immagini di dimensioni eccessive di sopraffare la memoria disponibile sui client vincolati.

Come funziona `&jpegSize=`

Impostare &jpegSize= in kilobyte utilizzando la sintassi jpegSize=<size_in_kilobytes>. Questo valore definisce la dimensione massima consentita del file per la consegna delle immagini.
&jpegSize= funziona in combinazione con il parametro Qualità JPEG (compressione) &qlt=. Quando la risposta di JPEG al valore &qlt= specificato not supera il limite jpegSize, l’immagine viene restituita con &qlt= esattamente come definito, mantenendo la qualità richiesta.
Se l’immagine supera il limite di jpegSize al &qlt= specificato, il sistema diminuisce in modo incrementale &qlt= finché l’immagine non rientra nelle dimensioni massime consentite. Di conseguenza, la qualità viene ridotta solo nella misura necessaria a soddisfare il vincolo di dimensione, garantendo la compatibilità con il dispositivo di destinazione.
Se il sistema determina che l’immagine non può essere ridotta per rientrare nelle dimensioni massime consentite, restituisce un errore anziché consegnare un’immagine non conforme.

Procedure consigliate per dispositivi con memoria limitata

Come best practice, imposta &jpegSize= e associalo a&qlt= quando distribuisci immagini JPEG a dispositivi con memoria limitata. Questa combinazione consente di specificare sia la qualità di destinazione che la dimensione del soffitto, in modo che il sistema fornisca la qualità più elevata possibile che si adatta ancora ai limiti di memoria del dispositivo.

Riepilogo delle best practice best-practices-summary

Per ottenere una qualità immagine elevata con un file di dimensioni ridotte, inizia con la seguente combinazione consigliata di parametri Dynamic Media Image Server:

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

Questa combinazione produce risultati eccellenti nella maggior parte delle circostanze e funge da base affidabile per la maggior parte delle immagini. Il valore op_usm applica la nitidezza della maschera di contrasto (USM), in cui i parametri controllano la quantità, il raggio, la soglia e il comportamento monocromatico dell’effetto.

Nitidezza fine tuning (maschera di contrasto)

Se un’immagine richiede un’ulteriore ottimizzazione, regolare gradualmente i parametri unsharp mask (USM) utilizzando la procedura seguente:

Impostare il raggio su 0,2 o 0,3 come punto di partenza.
Aumenta l’importo da 1,75 a un massimo di 4, equivalente a 400% in Adobe Photoshop.
Rivedi l’immagine di cui è stato eseguito il rendering per confermare che il risultato desiderato è stato raggiunto.
Se il risultato della nitidezza non è ancora soddisfacente, aumentare il raggio con incrementi decimali.
Per ogni incremento decimale del raggio, riavviare la quantità a 1.75 e aumentarla gradualmente a 4.
Ripetere i passaggi 4 e 5 fino a ottenere il risultato desiderato.

Anche se i valori di cui sopra rappresentano un approccio convalidato dagli studi creativi, puoi iniziare con altri valori e seguire altre strategie. Se i risultati sono soddisfacenti è una questione soggettiva, quindi è essenziale una sperimentazione iterativa strutturata per ottenere il miglior equilibrio tra nitidezza, qualità e dimensione del file per ogni immagine.

Suggerimenti per l’ottimizzazione del flusso di lavoro

Durante la sperimentazione, i seguenti suggerimenti generali aiutano a ottimizzare il flusso di lavoro:

Verifica i parametri in tempo reale su un URL. La regolazione dei valori direttamente nell’URL consente di visualizzare immediatamente l’anteprima dell’effetto e di iterare rapidamente.
Raggruppare i comandi in un predefinito immagine. I comandi Dynamic Media Image Server possono essere raggruppati in un predefinito immagine. Un predefinito immagine è un set di macro di comando URL a cui è assegnato un nome predefinito personalizzato, ad esempio $thumb_low$ e &product_high$. Il riferimento al 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 nel sito web, promuove impostazioni coerenti tramite il riutilizzo e riduce la lunghezza complessiva degli URL.
Utilizzare le opzioni di ottimizzazione avanzate in Experience Manager. Experience Manager offre anche metodi più avanzati per regolare la qualità delle immagini, ad esempio applicare la nitidezza all’acquisizione. Per ottimizzare i risultati del rendering, i servizi di consulenza di Adobe possono fornire insight personalizzato e best practice.

recommendation-more-help

experience-manager-cloud-service-help-main-toc