Integration der Bildoptimierung für Framework-Autoren - AWS Amplify Hosten

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

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.