Ottimizzazione rapida delle immagini
Fastly Image Optimization (Fastly IO) consente di manipolare e ottimizzare le immagini in tempo reale per velocizzarne la distribuzione e semplificare la manutenzione dei set di origini delle immagini per le applicazioni web dinamiche. Una volta configurato Fastly IO, offre le seguenti funzioni di ottimizzazione delle immagini:
- Forza conversione perdita
- Ottimizzazione immagine profonda
- Rapporti di pixel adattivi
- Supporto per formati immagine comuni: PNG, JPEG, GIF e WebP
Prima di abilitare e configurare l'opzione I/O Fastly, è necessario impostare il servizio Fastly e configurare la schermatura Origin.
In base alle impostazioni di configurazione, lo snippet Fastly Image Optimization (Fastly IO) inserisce il codice VCL per eseguire l’ottimizzazione dell’immagine in modo da velocizzare la consegna dell’immagine del prodotto nella vetrina. Per configurare l'I/O Fastly sono necessari tre passaggi: Abilita, Configura e Verifica.
Attiva I/O veloce
Abilita Ottimizzazione Fastly Image (Fastly IO) dal pannello Amministratore caricando lo snippet VCL Fastly IO. Il frammento fornisce le istruzioni di configurazione Fastly per elaborare tutte le immagini mediante gli ottimizzatori di immagini, utilizzando le configurazioni predefinite.
Prerequisiti:
- Installazione o aggiornamento al modulo Fastly versione 1.2.62 o successiva
- Configurare Fastly Origin shield e back-end
Per attivare I/O veloce:
-
Accedi al pannello locale Amministratore come amministratore.
-
Seleziona Archivi > Impostazioni > Configurazione > Avanzate > Sistema.
-
Nel riquadro di destra espandere Cache a pagina intera.
-
Seleziona Fastly Configuration > Image Optimization per specificare le impostazioni di configurazione.
-
Nel campo Frammento I/O selezionare Attiva/Disattiva.
-
Carica lo snippet I/O Fastly:
- Selezionare Opzioni di configurazione I/O predefinite per aprire la pagina Opzioni di configurazione predefinite di ottimizzazione immagine.
- Seleziona Carica per caricare lo snippet VCL sul server.
Configura I/O veloce
Se necessario, rivedere e aggiornare le impostazioni di configurazione I/O predefinite per l'ottimizzazione dell'immagine. È possibile, ad esempio, modificare i livelli di qualità WebP e JPEG per i formati con perdita di dati o modificare il formato per la trasmissione delle immagini JPEG in Progressive o Baseline. Inoltre, è possibile utilizzare Fastly IO per funzioni di ottimizzazione delle immagini più granulari, ad esempio:
- Forza conversione perdita
- Ottimizzazione immagine profonda
- Rapporti di pixel adattivi
Per aggiornare Fastly I/O:
-
Nella pagina Fastly Configuration del campo Default IO config options, selezionare Configure.
-
Rivedi e aggiorna le impostazioni di configurazione Fastly IO nella pagina Opzioni di configurazione predefinite di ottimizzazione immagine:
-
WebP automatico? - Lascia l'impostazione predefinita (
Yes) per convertire le immagini nel formato WebP nei browser che la supportano. Se si modifica l'impostazione in No, Fastly utilizza il tipo di file di immagine anziché convertire l'immagine in formato WebP. -
Qualità WebP predefinita (con perdita di dati). Lasciare l'impostazione predefinita (
85) o digitare il livello di compressione per le immagini con formattazione di file con perdita di dati. È possibile specificare un numero intero compreso tra 1 e 100. -
Controlli formato JPEG predefinito. Lasciare l'impostazione predefinita (
Auto) oppure selezionare il tipo di JPEG da utilizzare per la trasmissione di un'immagine. Se il valore è impostato su Auto, Fastly distribuisce le immagini con il tipo di output corrispondente al tipo di input. Seleziona Previsione per visualizzare le immagini riga per riga, partendo dall'alto a sinistra e andando in basso a destra. Seleziona Progressivo per visualizzare un'immagine sfocata che diventa chiara durante il caricamento. -
Qualità JPEG predefinita. Lasciare l'impostazione predefinita (
85) o digitare il livello di compressione per la qualità dei formati di file con perdita di dati. Specificare un numero intero compreso tra 1 e 100. -
Consentire l'upscaling? - Lascia l'impostazione predefinita (
No) oppure selezionaYesper restituire immagini di dimensioni maggiori rispetto al file di origine in modo che possano rientrare nelle dimensioni richieste. -
Ridimensiona filtro. Lasciare l'impostazione predefinita (
Lancsoz3) o selezionare un'alternativa. Questa impostazione specifica il filtro utilizzato per fornire un'immagine ridimensionata. A seconda del filtro selezionato, l’immagine ridimensionata può avere un numero di pixel maggiore o minore.Lanczos3(impostazione predefinita) - Fornisce un'immagine della migliore qualità. Aumenta la capacità di rilevare bordi e caratteristiche lineari all'interno di un'immagine e utilizza il ricampionamento sinc per fornire la migliore ricostruzione possibile.Lanczos2- Utilizza lo stesso filtro diLancsoz3ma con un'approssimazione meno precisa della funzione di ricampionamento di sinc.Bicubic- Ha un effetto di nitidezza naturale quando rimpicciolisce un'immagine.Bilinear- Ha un effetto di arrotondamento naturale quando si ingrandisce un'immagine.Nearest- Ha un effetto di pixelazione naturale quando si ridimensiona una pixel art.
-
-
Dopo aver specificato le impostazioni di configurazione IO per il servizio Fastly, selezionare Annulla per tornare alle impostazioni di configurazione Fastly.
-
Nel campo Configurazione ottimizzazione immagine Abilita ottimizzazione immagine approfondita, seleziona Sì per attivare l'ottimizzazione immagine approfondita.
L'ottimizzazione immagine profonda è disattivata per impostazione predefinita. Quando questa funzione è abilitata, la funzione di ridimensionamento incorporata in Adobe Commerce viene disattivata e il lavoro di ridimensionamento viene scaricato nel servizio I/O Fastly. L’ottimizzazione immagine si applica solo alle immagini del prodotto. Le immagini CMS non vengono ridimensionate. Consulta la documentazione Fastly.
-
Dopo aver abilitato l'ottimizzazione delle immagini profonde, abilita la funzione adaptive pixel ratios per generare immagini ottimizzate per l'utilizzo in siti Web dinamici.
- Nel campo Abilita rapporti pixel dispositivo adattivo, seleziona Sì.
- Nel campo Rapporti pixel dispositivo, accettare l'impostazione predefinita oppure selezionare la casella di controllo Input di sistema per rimuovere l'impostazione. Quindi, selezionare il rapporto desiderato. Un'impostazione con proporzioni pixel del dispositivo più elevate offre immagini più grandi.
-
Seleziona Salva configurazione.
Forza conversione perdita
Per impostazione predefinita, il servizio Fastly IO forza la conversione di formati senza perdita di dati come PNG, BMP o WEBP in formato JPEG/WEBP.
Il vantaggio di forzare la conversione con perdita di dati è che vengono distribuite immagini più piccole.
Ad esempio, utilizzando il formato JPEG o WEBp invece di PNG, la dimensione può essere ridotta del 60-70% a seconda del livello di qualità specificato nella configurazione di I/O Fastly.
A seconda del livello di qualità selezionato per l'ottimizzazione dell'immagine, è possibile percepire differenze visive nelle immagini. Ad Alpha, i canali e le trasparenze vengono eliminati e sostituiti con uno sfondo bianco, a meno che non si utilizzi l'ottimizzazione immagine profonda che utilizza il colore di sfondo del tema.
Se si disattiva la conversione con perdita di dati (WebP Auto? = No), Fastly IO cambia le immagini JPEG in formato WEBP solo per i browser compatibili. Nessun altro tipo di immagine viene modificato. Ad esempio, se l'immagine originale è PNG, l'output del servizio I/O Fastly è PNG.
Ottimizzazione immagine profonda
L'ottimizzazione immagine profonda è disattivata per impostazione predefinita. L’abilitazione di questa opzione disattiva il ridimensionamento integrato di Adobe Commerce e lo scarica completamente sul servizio Fastly IO.
Questa funzionalità ridimensiona solo le immagini product. Le immagini CMS non vengono ridimensionate.
Se abiliti l’ottimizzazione deep image, viene aggiunta una definizione del colore di sfondo a ogni immagine definita nel tema. Di conseguenza, le immagini WebP passano da non perdenti di WebP a perdenti di WebP. Una delle principali differenze tra lossless e lossy è che lossy rilascia il canale alfa dalle immagini PNG, che fornisce immagini molto più piccole. Tuttavia, le immagini con trasparenza possono avere un aspetto dispari sulle pagine di prodotti e campagne che utilizzano uno sfondo diverso.
Ad esempio, il codice seguente rappresenta l’origine originale di un’immagine dal tema Luma:
<img class="product-image-photo"
src="https://mymagentosite/pub/media/catalog/product/cache/f073062f50e48eb0f0998593e568d857/m/b/mb02-gray-0.jpg"
width="240"
height="300"
alt="Fusion Backpack"/>
Quando la funzione Fastly IO Deep Image Optimization è abilitata, il codice sorgente originale per l'immagine viene riscritto come mostrato nell'esempio seguente:
<img class="product-image-photo"
src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
width="240"
height="300"
alt="Fusion Backpack"/>
Rapporti di pixel adattivi
La funzione Adaptive pixel ratio è utile per ottimizzare le immagini per le applicazioni web progressive. Consente di fornire più dimensioni e risoluzioni immagine da un file di origine dell'immagine aggiungendo un srcset per ogni immagine prodotto.
Quando la funzione Adaptive pixel ratio è abilitata, il servizio I/O Fastly fornisce un'immagine a larghezza fissa che può adattarsi a device-pixel-ratios variabili.
Ad esempio, il servizio modifica la definizione dell’immagine del prodotto come illustrato nell’esempio seguente:
<img class="product-image-photo"
srcset="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=2 2x,
https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds&dpr=3 3x"
src="https://mymagentosite/pub/media/catalog/product/m/b/mb02-gray-0.jpg?width=240&height=300&quality=80&bg-color=255,255,255&fit=bounds"
width="240"
height="300"
alt="Fusion Backpack"/>
Consulta srcset supporto browser e specifica.
Convalida I/O veloce
Dopo aver abilitato e configurato Fastly IO, convalidare la configurazione eseguendo test di velocità della pagina Web con e senza Fastly IO abilitato. Inoltre, controlla le immagini nel tuo negozio per verificare le dimensioni e l'aspetto delle immagini per eventuali problemi.