Integration der Bildoptimierung für Framework-Autoren

Framework-Autoren können die Bildoptimierungsfunktion von Amplify mithilfe der Amplify Hosting-Bereitstellungsspezifikation integrieren. Um die Bildoptimierung zu aktivieren, muss Ihr Bereitstellungsmanifest eine Routing-Regel enthalten, die auf den Bildoptimierungsdienst abzielt. Das folgende Beispiel zeigt, wie die Routingregel konfiguriert wird.

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

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

Weitere Informationen zur Konfiguration der Einstellungen für die Bildoptimierung mithilfe der Bereitstellungsspezifikation finden Sie unterVerwenden der Amplify Hosting-Bereitstellungsspezifikation zur Konfiguration der Build-Ausgabe.

Grundlegendes zur Bildoptimierung API

Die Bildoptimierung kann zur Laufzeit über die Domain URL einer Amplify-App auf dem in der Routing-Regel definierten Pfad aufgerufen werden.

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

Bei der Bildoptimierung gelten für Bilder die folgenden Regeln.

• Amplify kann sie nicht optimierenGIF, APNG SVG formatieren oder in ein anderes Format konvertieren.

• SVGBilder werden nur bereitgestellt, wenn die dangerouslyAllowSVG Einstellung aktiviert ist.

• Die Breite oder Höhe von Quellbildern darf 11 MB oder 9.000 Pixel nicht überschreiten.

• Die Größenbeschränkung für ein optimiertes Bild beträgt 4 MB.

• HTTPoder HTTPS ist das einzige Protokoll, das für die Beschaffung von Bildern per Fernzugriff unterstützt wirdURLs.

HTTPHeader

Der HTTPAccept-Request-Header wird verwendet, um die Bildformate, ausgedrückt als MIME Typen, anzugeben, die vom Client (normalerweise ein Webbrowser) zugelassen werden. Der Bildoptimierungsdienst versucht, das Bild in das angegebene Format zu konvertieren. Der für diesen Header angegebene Wert hat eine höhere Priorität als der Formatabfrageparameter. Ein gültiger Wert für den Accept-Header ist beispielsweiseimage/png, image/webp, */* . Die im Amplify-Bereitstellungsmanifest angegebene Formateinstellung beschränkt die Formate auf die in der Liste aufgeführten. Selbst wenn der Accept-Header nach einem bestimmten Format fragt, wird es ignoriert, wenn das Format nicht in der Zulassungsliste enthalten ist.

URIAnforderungsparameter

In der folgenden Tabelle werden die URI Anforderungsparameter für die Bildoptimierung beschrieben.

Abfrageparameter	Typ	Erforderlich	Beschreibung	Beispiel
URL	String	Ja	Ein relativer oder absoluter Pfad URL zum Quellbild. Für eine URL Remote-Verbindung werden die Protokolle http und https unterstützt. Der Wert muss URL codiert sein.	?url=https%3A%2F%2Fwww.example.com%2Fbuffalo.png
width	Zahl	Ja	Die Breite des optimierten Bilds in Pixeln.	?width=800
height	Zahl	Nein	Die Höhe des optimierten Bilds in Pixeln. Wenn nicht angegeben, wird das Bild auto an die Breite angepasst.	?height=600
fit	Aufzählungswerte:cover,contain,fill, inside outside	Nein	Wie das Bild an die angegebene Breite und Höhe angepasst wird.	?width=800&height=600&fit=cover
position	Aufzählungswerte:center,,,top, right bottom left	Nein	Eine Position, die verwendet werden soll, wenn fit cover oder contain ist.	?fit=contain&position=centre
trim	Zahl	Nein	Schneidet Pixel an allen Kanten ab, die Werte enthalten, die der angegebenen Hintergrundfarbe des Pixels oben links ähneln.	?trim=50
erweitern	Object	Nein	Fügt den Bildrändern Pixel hinzu, wobei die Farbe verwendet wird, die von den Pixeln am nächsten Rand abgeleitet wurde. Beim Format gibt jeder Wert die Anzahl der Pixel {top}_{right}_{bottom}_{left} an, die hinzugefügt werden sollen.	?extend=10_0_5_0
extract	Object	Nein	Schneidet das Bild auf das angegebene Rechteck zu, das durch oben, links, Breite und Höhe begrenzt ist. Das Format ist {left} _ {top} _ {width} _ {right}, wobei jeder Wert die Anzahl der Pixel ist, die zugeschnitten werden sollen.	?extract=10_0_5_0
Format	String	Nein	Das gewünschte Ausgabeformat für das optimierte Bild.	?format=webp
quality	Zahl	Nein	Die Qualität des Bildes, von 1 bis 100. Wird nur bei der Konvertierung des Bildformats verwendet.	?quality=50
rotate	Zahl	Nein	Dreht das Bild um den angegebenen Winkel in Grad.	?rotate=45
Flip	Boolesch	Nein	Spiegelt das Bild vertikal (von oben nach unten) auf der X-Achse. Dies geschieht immer vor der Drehung, falls vorhanden.	?flip
Flop	Boolesch	Nein	Spiegelt das Bild horizontal (links-rechts) auf der Y-Achse. Dies geschieht immer vor der Drehung, falls vorhanden.	?flop
schärfen	Zahl	Nein	Durch das Schärfen wird die Definition der Kanten im Bild verbessert. Gültige Werte liegen zwischen 0,000001 und 10.	?sharpen=1
median	Zahl	Nein	Wendet einen Medianfilter an. Dadurch werden Bildrauschen entfernt oder die Kanten eines Bilds geglättet.	?sharpen=3
verwischen	Zahl	Nein	Wendet eine Gaußsche Weichzeichnung im angegebenen Sigma an. Gültige Werte liegen zwischen 0,3 und 1.000.	?blur=20
gamma	Zahl	Nein	Wendet eine Gammakorrektur an, um die wahrgenommene Helligkeit eines Bildes mit geänderter Größe zu verbessern. Der Wert muss zwischen 1,0 und 3,0 liegen.	?gamma=1
negieren	Boolesch	Nein	Kehrt die Farben des Bildes um.	?negate
normalisieren	Boolesch	Nein	Verbessert den Bildkontrast, indem die Luminanz so ausgedehnt wird, dass ein voller Dynamikbereich abgedeckt wird.	?normalize
threshold	Zahl	Nein	Ersetzt jedes Pixel im Bild durch ein schwarzes Pixel, wenn dessen Intensität unter dem angegebenen Schwellenwert liegt. Oder mit einem weißen Pixel, wenn es über dem Schwellenwert liegt. Gültige Werte liegen zwischen 0 und 255.	?threshold=155
Farbton	String	Nein	Tönt das Bild mit den bereitgestellten Farben, RGB wobei die Bildleuchtdichte erhalten bleibt.	?tint=#7743CE
Graustufen	Boolesch	Nein	Wandelt das Bild in Graustufen (Schwarzweiß) um.	?grayscale

Statuscodes für Antworten

In der folgenden Liste werden die Antwortstatuscodes für die Bildoptimierung beschrieben.

Erfolg — HTTP Statuscode 200

Die Anfrage wurde erfolgreich erfüllt.

BadRequest - HTTP Statuscode 400

• Ein Eingabeabfrageparameter wurde falsch angegeben.

• Die Fernbedienung URL ist in der remotePatterns Einstellung nicht als zulässig aufgeführt.

• Die Fernbedienung URL löst sich nicht in ein Bild auf.

• Die angeforderte Breite oder Höhe sind in der sizes Einstellung nicht als zulässig aufgeführt.

• Das angeforderte Bild istSVG, aber die dangerouslyAllowSvg Einstellung ist deaktiviert.

Nicht gefunden — HTTP Statuscode 404

Das Quellbild wurde nicht gefunden.

Inhalt zu groß — HTTP Statuscode 413

Entweder das Quellbild oder das optimierte Bild überschreiten die maximal zulässige Größe in Byte.

Grundlegendes zum optimierten Zwischenspeichern von Bildern

Amplify Hosting speichert optimierte Bilder auf unserer, CDN sodass nachfolgende Anfragen an dasselbe Bild mit denselben Abfrageparametern vom Cache aus bedient werden. Die Laufzeit des Caches Time to live (TTL) wird durch den Cache-Control Header gesteuert. In der folgenden Liste werden Ihre Optionen für die Angabe des Cache-Control Headers beschrieben.

• Verwenden des Cache-Control Schlüssels in der Routing-Regel, die auf die Bildoptimierung abzielt.

• Verwenden von benutzerdefinierten Headern, die in der Amplify-App definiert sind.

• Bei Remote-Bildern wird der vom Remote-Image zurückgegebene Cache-Control Header berücksichtigt.

Die in den Bildoptimierungseinstellungen minimumCacheTTL angegebenen Werte definieren die Untergrenze von Cache-Control max-age Direktive. Wenn beispielsweise ein Remote-Image mit einem URL antwortetCache-Control s-max-age=10, der Wert jedoch 60 minimumCacheTTL ist, dann wird 60 verwendet.