Integrazione dell'ottimizzazione delle immagini per gli autori del framework

Gli autori del framework possono integrare la funzionalità di ottimizzazione delle immagini di Amplify utilizzando le specifiche di implementazione di Amplify Hosting. Per abilitare l'ottimizzazione delle immagini, il manifesto di distribuzione deve contenere una regola di routing destinata al servizio di ottimizzazione delle immagini. L'esempio seguente mostra come configurare la regola di routing.

// .amplify-hosting/deploy-manifest.json

{
  "routes": [
    {
      "path": "/images/*",
      "target": {
        "kind": "ImageOptimization",
        "cacheControl": "public, max-age=31536000, immutable"
      }
    }
  ]
}

Per ulteriori informazioni sulla configurazione delle impostazioni di ottimizzazione delle immagini utilizzando le specifiche di distribuzione, vedere. Utilizzo della specifica di distribuzione di Amplify Hosting per configurare l'output della build

Comprendere l'ottimizzazione delle immagini API

L'ottimizzazione delle immagini può essere richiamata in fase di esecuzione tramite il URL dominio di un'app Amplify, nel percorso definito dalla regola di routing.

GET https://{appDomainName}/{path}?{queryParams}

L'ottimizzazione delle immagini impone le seguenti regole sulle immagini.

• Amplify non è in grado di GIF ottimizzarliAPNG, SVG formattare o convertirli in un altro formato.

• SVGle immagini non vengono fornite a meno che l'dangerouslyAllowSVGimpostazione non sia abilitata.

• La larghezza o l'altezza delle immagini di origine non possono superare 11 MB o 9.000 pixel.

• Il limite di dimensione di un'immagine ottimizzata è di 4 MB.

• HTTPoppure HTTPS è l'unico protocollo supportato per l'approvvigionamento di immagini con telecomandoURLs.

HTTPintestazioni

L'HTTPintestazione della richiesta Accept viene utilizzata per specificare i formati di immagine, espressi come MIME tipi, consentiti dal client (di solito un browser Web). Il servizio di ottimizzazione delle immagini tenterà di convertire l'immagine nel formato specificato. Il valore specificato per questa intestazione avrà una priorità maggiore rispetto al parametro di query di formato. Ad esempio, un valore valido per l'intestazione Accept è. image/png, image/webp, */* L'impostazione dei formati specificata nel manifesto di distribuzione di Amplify limiterà i formati a quelli presenti nell'elenco. Anche se l'intestazione Accept richiede un formato specifico, verrà ignorato se il formato non è nell'elenco dei formati consentiti.

URIparametri di richiesta

La tabella seguente descrive i parametri di URI richiesta per l'ottimizzazione delle immagini.

Parametro di query	Tipo	Campo obbligatorio	Descrizione	Esempio
url	Stringa	Sì	Un percorso relativo o assoluto rispetto URL all'immagine sorgente. Per un telecomandoURL, sono supportati i protocolli http e https. Il valore deve essere URL codificato.	?url=https%3A%2F%2Fwww.example.com%2Fbuffalo.png
width	Numero	Sì	La larghezza in pixel dell'immagine ottimizzata.	?width=800
height	Numero	No	L'altezza in pixel dell'immagine ottimizzata. Se non specificato, l'immagine verrà ridimensionata automaticamente in base alla larghezza.	?height=600
in forma	Valori Enum:cover,contain,fill, inside outside	No	Come viene ridimensionata l'immagine per adattarla alla larghezza e all'altezza specificate.	?width=800&height=600&fit=cover
position	Valori Enum:center,,,top, right bottom left	No	Una posizione da usare quando fit è cover ocontain.	?fit=contain&position=centre
trim	Numero	No	Taglia i pixel da tutti i bordi che contengono valori simili al colore di sfondo specificato del pixel in alto a sinistra.	?trim=50
estendere	Oggetto	No	Aggiunge pixel ai bordi dell'immagine utilizzando il colore derivato dai pixel del bordo più vicini. Il formato è {top}_{right}_{bottom}_{left} dove ogni valore è il numero di pixel da aggiungere.	?extend=10_0_5_0
estratto	Oggetto	No	Ritaglia l'immagine nel rettangolo specificato delimitato da alto, sinistra, larghezza e altezza. Il formato è {left} _ {top} _ {width} _ {right} dove ogni valore è il numero di pixel da ritagliare.	?extract=10_0_5_0
format	Stringa	No	Il formato di output desiderato per l'immagine ottimizzata.	?format=webp
quality	Numero	No	La qualità dell'immagine, da 1 a 100. Utilizzato solo per la conversione del formato dell'immagine.	?quality=50
rotate	Numero	No	Ruota l'immagine in base all'angolo specificato in numero di gradi.	?rotate=45
capovolgere	Boolean	No	Riflette l'immagine verticalmente (dall'alto verso il basso) sull'asse x. Ciò si verifica sempre prima della rotazione, se presente.	?flip
fiasco	Boolean	No	Riflette l'immagine orizzontalmente (sinistra-destra) sull'asse y. Ciò si verifica sempre prima della rotazione, se presente.	?flop
affilare	Numero	No	La nitidezza migliora la definizione dei bordi dell'immagine. I valori validi sono compresi tra 0,000001 e 10.	?sharpen=1
median	Numero	No	Applica un filtro mediano. Questo rimuove il rumore o leviga i bordi di un'immagine.	?sharpen=3
sfocato	Numero	No	Applica una sfocatura gaussiana del sigma specificato. I valori validi sono compresi tra 0,3 e 1.000.	?blur=20
gamma	Numero	No	Applica una correzione gamma per migliorare la luminosità percepita di un'immagine ridimensionata. Il valore deve essere compreso tra 1,0 e 3,0.	?gamma=1
negare	Boolean	No	Inverte i colori dell'immagine.	?negate
normalizzare	Boolean	No	Migliora il contrasto dell'immagine estendendone la luminanza per coprire un'intera gamma dinamica.	?normalize
threshold	Numero	No	Sostituisce qualsiasi pixel dell'immagine con un pixel nero, se la sua intensità è inferiore alla soglia specificata. Oppure con un pixel bianco se è superiore alla soglia. I valori validi sono compresi tra 0 e 255.	?threshold=155
tinta	Stringa	No	Tinge l'immagine utilizzando il colore fornito RGB preservando la luminanza dell'immagine.	?tint=#7743CE
in scala di grigi	Boolean	No	Trasforma l'immagine in scala di grigi (bianco e nero).	?grayscale

Codici di stato della risposta

L'elenco seguente descrive i codici di stato della risposta per l'ottimizzazione delle immagini.

Operazione riuscita: codice di HTTP stato 200

La richiesta è stata soddisfatta con successo.

BadRequest - codice HTTP di stato 400

• Un parametro di query di input è stato specificato in modo errato.

• Il telecomando non URL è elencato come consentito nell'remotePatternsimpostazione.

• Il telecomando URL non si risolve in un'immagine.

• La larghezza o l'altezza richieste non sono elencate come consentite nell'sizesimpostazione.

• L'immagine richiesta è SVG ma l'dangerouslyAllowSvgimpostazione è disabilitata.

Non trovato - codice HTTP di stato 404

L'immagine sorgente non è stata trovata.

Contenuto troppo grande: codice di HTTP stato 413

L'immagine sorgente o l'immagine ottimizzata superano la dimensione massima consentita in byte.

Caching

Amplify Hosting memorizza nella cache le immagini ottimizzate sul CDN nostro in modo che le richieste successive alla stessa immagine, con gli stessi parametri di query, vengano servite dalla cache. Il Time to live (TTL) della cache è controllato dall'intestazione. Cache-Control L'elenco seguente descrive le opzioni per specificare l'Cache-Controlintestazione.

• Utilizzo della Cache-Control chiave all'interno della regola di routing che mira all'ottimizzazione delle immagini.

• Utilizzo di intestazioni personalizzate definite nell'app Amplify.

• Per le immagini remote, l'Cache-Controlintestazione restituita dall'immagine remota viene rispettata.

Quanto minimumCacheTTL specificato nelle impostazioni di ottimizzazione dell'immagine definisce il limite inferiore del Cache-Control max-age direttiva. Ad esempio, se un'immagine remota URL risponde con aCache-Control s-max-age=10, ma il valore di minimumCacheTTL è 60, viene utilizzato 60.