Integrasi optimasi gambar untuk penulis kerangka kerja - AWS Amplify Hosting
Memahami Optimasi Gambar API

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Integrasi optimasi gambar untuk penulis kerangka kerja

Penulis kerangka kerja dapat mengintegrasikan fitur optimasi gambar Amplify dengan menggunakan spesifikasi penerapan Amplify Hosting. Untuk mengaktifkan pengoptimalan gambar, manifes penerapan Anda harus berisi aturan perutean yang menargetkan layanan pengoptimalan gambar. Contoh berikut menunjukkan cara mengkonfigurasi aturan routing.

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

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

Untuk informasi selengkapnya tentang mengonfigurasi setelan pengoptimalan gambar menggunakan spesifikasi penerapan, lihat. Menggunakan spesifikasi penerapan Amplify Hosting untuk mengonfigurasi keluaran build

Memahami Optimasi Gambar API

Pengoptimalan gambar dapat dipanggil saat runtime melalui domain aplikasi AmplifyURL, di jalur yang ditentukan oleh aturan perutean.

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

Optimalisasi gambar memberlakukan aturan berikut pada gambar.

  • Amplify tidak dapat mengoptimalkanGIF, APNG dan SVG memformat atau mengonversinya ke format lain.

  • SVGgambar tidak disajikan kecuali dangerouslyAllowSVG pengaturan diaktifkan.

  • Lebar atau tinggi gambar sumber tidak boleh melebihi 11 MB atau 9.000 piksel.

  • Batas ukuran gambar yang dioptimalkan adalah 4 MB.

  • HTTPatau HTTPS satu-satunya protokol yang didukung untuk sumber gambar dengan remoteURLs.

HTTPheader

HTTPHeader permintaan Terima digunakan untuk menentukan format gambar, dinyatakan sebagai MIME tipe, yang diizinkan oleh klien (biasanya browser web). Layanan optimasi gambar akan mencoba mengonversi gambar ke format yang ditentukan. Nilai yang ditentukan untuk header ini akan memiliki prioritas yang lebih tinggi daripada parameter kueri format. Misalnya, nilai yang valid untuk header Terima adalahimage/png, image/webp, */* . Setelan format yang ditentukan dalam manifes penerapan Amplify akan membatasi format ke format yang ada dalam daftar. Bahkan jika header Terima meminta format tertentu, itu akan diabaikan jika formatnya tidak ada dalam daftar izinkan.

URIparameter permintaan

Tabel berikut menjelaskan parameter URI permintaan untuk optimasi Gambar.

Parameter kueri Tipe Diperlukan Deskripsi Contoh

url

Tali

Ya

Jalur relatif atau absolut URL ke gambar sumber. Untuk remoteURL, protokol http dan https didukung. Nilai harus URL dikodekan.

?url=https%3A%2F%2Fwww.example.com%2Fbuffalo.png

lebar

Jumlah

Ya

Lebar dalam piksel dari gambar yang dioptimalkan.

?width=800

tingginya

Jumlah

Tidak

Ketinggian piksel dari gambar yang dioptimalkan. Jika tidak ditentukan, gambar akan diskalakan secara otomatis agar sesuai dengan lebarnya.

?height=600

cocok

Nilai enum:cover,,contain,fill, inside outside

Tidak

Bagaimana gambar diubah ukurannya agar sesuai dengan lebar dan tinggi yang ditentukan.

?width=800&height=600&fit=cover

posisi

Nilai enum:center,,top,right, bottom left

Tidak

Posisi yang akan digunakan saat fit adalah cover ataucontain.

?fit=contain&position=centre

memangkas

Jumlah

Tidak

Memangkas piksel dari semua tepi yang berisi nilai yang mirip dengan warna latar belakang yang ditentukan dari piksel kiri atas.

?trim=50

perluas

Objek

Tidak

Menambahkan piksel ke tepi gambar menggunakan warna yang berasal dari piksel tepi terdekat. Formatnya adalah {top}_{right}_{bottom}_{left} di mana setiap nilai adalah jumlah piksel yang akan ditambahkan.

?extend=10_0_5_0

sari

Objek

Tidak

Pangkas gambar ke persegi panjang yang ditentukan dibatasi oleh atas, kiri, lebar dan tinggi. Formatnya adalah {left} _ {top} _ {width} _ {right} di mana setiap nilai adalah jumlah piksel yang akan dipotong.

?extract=10_0_5_0

format

String

Tidak

Format output yang diinginkan untuk gambar yang dioptimalkan.

?format=webp

kualitas

Jumlah

Tidak

Kualitas gambar, dari 1 hingga 100. Hanya digunakan saat mengonversi format gambar.

?quality=50

merotasi

Jumlah

Tidak

Memutar gambar dengan sudut yang ditentukan dalam jumlah derajat.

?rotate=45

membalik

Boolean

Tidak

Mencerminkan gambar secara vertikal (atas-bawah) pada sumbu x. Ini selalu terjadi sebelum rotasi, jika ada.

?flip

gagal

Boolean

Tidak

Mencerminkan gambar secara horizontal (kiri-kanan) pada sumbu y. Ini selalu terjadi sebelum rotasi, jika ada.

?flop

mempertajam

Jumlah

Tidak

Penajaman meningkatkan definisi tepi pada gambar. Nilai yang valid adalah antara 0,000001 dan 10.

?sharpen=1

median

Jumlah

Tidak

Menerapkan filter median. Ini menghilangkan noise atau menghaluskan tepi gambar.

?sharpen=3

mengaburkan

Jumlah

Tidak

Menerapkan blur Gaussian dari sigma yang ditentukan. Nilai yang valid adalah 0,3 hingga 1.000.

?blur=20

gama

Jumlah

Tidak

Menerapkan koreksi gamma untuk meningkatkan kecerahan yang dirasakan dari gambar yang diubah ukurannya. Nilai harus antara 1.0 dan 3.0.

?gamma=1

meniadakan

Boolean

Tidak

Membalikkan warna gambar.

?negate

normalisasi

Boolean

Tidak

Meningkatkan kontras gambar dengan meregangkan luminansinya untuk menutupi rentang dinamis penuh.

?normalize

ambang

Jumlah

Tidak

Mengganti piksel apa pun dalam gambar dengan piksel hitam, jika intensitasnya kurang dari ambang batas yang ditentukan. Atau dengan piksel putih jika lebih besar dari ambang batas. Nilai yang valid adalah antara 0 dan 255.

?threshold=155

warna

String

Tidak

Mewarnai gambar menggunakan yang disediakan RGB sambil mempertahankan pencahayaan gambar.

?tint=#7743CE

skala abu-abu

Boolean

Tidak

Mengubah gambar menjadi skala abu-abu (hitam dan putih).

?grayscale

Kode status respons

Daftar berikut menjelaskan kode status respons untuk optimasi gambar.

Sukses - kode HTTP status 200

Permintaan itu terpenuhi dengan sukses.

BadRequest - kode HTTP status 400

  • Parameter kueri masukan ditentukan secara tidak benar.

  • Remote URL tidak terdaftar seperti yang diizinkan dalam remotePatterns pengaturan.

  • Remote URL tidak menyelesaikan ke gambar.

  • Lebar atau tinggi yang diminta tidak tercantum sebagaimana diizinkan dalam sizes pengaturan.

  • Gambar yang diminta adalah SVG tetapi dangerouslyAllowSvg pengaturan dinonaktifkan.

Tidak Ditemukan - kode HTTP status 404

Sumber gambar tidak ditemukan.

Konten terlalu besar - kode HTTP status 413

Baik gambar sumber atau gambar yang dioptimalkan melebihi ukuran maksimum yang diizinkan dalam byte.

Memahami caching gambar yang dioptimalkan

Amplify Hosting menyimpan gambar yang dioptimalkan pada gambar kami CDN sehingga permintaan berikutnya ke gambar yang sama, dengan parameter kueri yang sama, disajikan dari cache. Cache Time to live (TTL) dikendalikan oleh Cache-Control header. Daftar berikut menjelaskan pilihan Anda untuk menentukan Cache-Control header.

  • Menggunakan Cache-Control kunci dalam aturan routing yang menargetkan optimasi gambar.

  • Menggunakan header khusus yang ditentukan dalam aplikasi Amplify.

  • Untuk gambar jarak jauh, Cache-Control header yang dikembalikan oleh gambar jarak jauh dihormati.

Yang minimumCacheTTL ditentukan dalam pengaturan optimasi gambar mendefinisikan batas bawah Cache-Control max-age direktif. Misalnya, jika gambar jarak jauh URL merespons denganCache-Control s-max-age=10, tetapi nilainya minimumCacheTTL adalah 60, maka 60 digunakan.