IMAGE DELIVERY ANALYTICS

Overview

Ringkasan performa pengiriman gambar untuk workspace ini.

✦

Memuat analytics

Mengambil data terbaru untuk workspace ini.

Requests—Total permintaan gambar

Bandwidth—Data terkirim

Cache hit rate—Butuh data cache dari CDN edge

Errors—Gagal dikirim

Requests

Permintaan per interval

TRAFFIC

Bandwidth

Volume data per interval

TRANSFER

Top images

Gambar paling banyak diminta

Image formats

Format hasil transformasi

HTTP status

Kesehatan delivery

DELIVERY INSIGHTS

Traffic

Pantau volume permintaan dan bandwidth secara rinci.

Requests—Dalam periode terpilih

Bandwidth—Dalam periode terpilih

Average processing—Waktu transformasi rata-rata

Error rate—Persentase permintaan gagal

Timeline traffic

Setiap titik mewakili interval agregasi

IMAGE DELIVERY

Images

Gunakan gambar yang sudah ada di bucket atau upload file baru, lalu buat URL CDN dengan transformasi yang Anda pilih.

TANPA DAFTAR PER GAMBAR

Gambar bucket otomatis

Aktifkan satu folder bucket. Website Anda cukup mengganti URL gambar ke CDN, lalu memilih ukuran dan format lewat parameter URL.

Memuat

Contoh URL untuk website

Masukkan path gambar yang sudah ada di folder tersebut. Anda tidak perlu mendaftarkan gambar ini satu per satu.

Setelah disimpan, URL ini bisa langsung dipakai di atribut src atau srcset website.

DARI BUCKET

Gambar yang sudah ada

Tidak perlu upload ulang. Masukkan object key sesuai path gambar di bucket workspace ini.

OPSIONAL

Upload gambar baru

Gunakan cara ini jika gambar belum ada di bucket. File akan disimpan ke bucket workspace, lalu URL CDN dibuat otomatis.

JPEG, PNG, WebP, AVIF, atau GIF · maksimum 20 MB

Gambar siap pakai

Gambar yang pernah dihubungkan atau diupload pada workspace ini.

REQUEST TRACE

Activity

Ukuran gambar dan waktu setiap tahap pengiriman untuk workspace ini.

Ukuran asli—Akumulasi request yang tercatat API

Ukuran hasil—Setelah transformasi

Penghematan data—Dibanding ukuran asli

Rata-rata waktu API—Belum termasuk jaringan ke browser

Permintaan terbaru

Klik detail untuk melihat fetch bucket, respons imgproxy, dan total API. Waktu ke browser memerlukan pengukuran di browser atau CDN edge.

Waktu	Gambar	HTTP	Sumber	Asli → hasil	Hemat	Fetch bucket	imgproxy	Total API

Errors

Permintaan gagal terbaru

Cache edge: belum terukur. Request yang dilayani Cloudflare dari cache tidak mencapai API dan tidak masuk tabel ini.

IMAGE LIBRARY ANALYTICS

Image Insights

Riwayat penggunaan dan efektivitas cache untuk setiap gambar di workspace ini.

Cache HIT—Dilayani dari cache Image CDN

Fetch bucket—Gambar asli diambil dari R2/S3

Cache hit rate—Dari request yang mencapai API

Gambar dalam library—Termasuk yang belum pernah diminta

Estimasi R2 dihemat—Ukuran asli pada request cache HIT

Riwayat gambar

Nama file, ukuran asli, jumlah request, penghematan transfer, cache, dan waktu rata-rata. Thumbnail dashboard tidak dihitung sebagai request pengunjung.

Gambar	Request	Cache HIT	Fetch R2/S3	Hemat transfer	R2 dihemat	Rata-rata API	Terakhir diminta

Statistik ini mencakup request yang mencapai Image CDN API. Request yang sudah dijawab oleh cache browser atau Cloudflare edge tidak terlihat di sini.

GET STARTED

Integration wizard

Ikuti langkah ini sampai gambar pertama berhasil tampil melalui CDN.

DEVELOPER GUIDE

Documentation

Hubungkan gambar bucket ke website tanpa mendaftarkan setiap gambar.

01

Hubungkan bucket

Di menu Storage, sambungkan bucket R2, S3, atau Spaces tenant. Bucket harus berisi gambar sumber yang ingin ditampilkan.

Buka Storage ?

02

Aktifkan folder gambar

Di menu Images, aktifkan URL otomatis untuk prefix folder gambar, misalnya app-assets/img/. Semua gambar di folder itu dapat diakses publik. Jangan gunakan folder berisi backup atau data privat.

Atur folder di Images ?

03

Ganti URL di website

Path setelah slug harus sama dengan object key di bucket. Tidak ada proses impor per gambar. CDN mengambil objek saat URL pertama kali diminta.

Pilih workspace untuk melihat contoh URL

Integrasi API key

Simpan key sebagai secret di server aplikasi. Set variabel lingkungan IMAGE_CDN_API_KEY di server, lalu kirim nilainya lewat header X-API-Key ke API. Jangan letakkan key di HTML, JavaScript browser, URL publik, atau repository.

Contoh ini mendaftarkan objek yang sudah ada di bucket. Respons memberi ID gambar; panggil GET /v1/images/{id}/url?width=800&format=webp dengan header yang sama untuk memperoleh URL CDN. Untuk upload file baru gunakan POST /v1/projects/{projectId}/images dengan multipart field file. Key dibatasi ke satu workspace; revoke segera menghentikan integrasi yang memakainya.

Kelola API keys →

Parameter transformasi

Parameter	Fungsi	Contoh
`w`	Lebar output dalam piksel, maks. 4096	`w=800`
`h`	Tinggi output dalam piksel, maks. 4096	`h=600`
`f`	Format output: avif, webp, jpeg, png, gif	`f=avif`
`q`	Kualitas output, 1?100	`q=80`
`fit`	Cara menyesuaikan ukuran: fit, fill, crop	`fit=fit`

Ukuran dapat dikosongkan untuk mempertahankan dimensi asli. Batas gabungan lebar ? tinggi adalah 16 juta piksel.

Contoh HTML responsif

Ganti object key dan teks alt sesuai gambar. Browser akan memilih ukuran dari srcset.

Cara memeriksa hasil

Buka URL CDN dan pastikan gambar tampil (HTTP 200).
Di DevTools ? Network, periksa Content-Type sesuai format yang diminta dan ukuran transfernya.
Respons API mengirim Cache-Control: public, max-age=3600. Cache browser/proxy mengikuti konfigurasi jaringan Anda; cache hit edge belum diukur oleh dashboard.
Buka Activity untuk melihat ukuran asli, ukuran hasil, waktu mengambil sumber, waktu imgproxy, dan total waktu API. Analytics masuk secara batch setelah beberapa detik.

Jika 404, cocokkan path objek di bucket dan prefix folder. Jika 403 atau 502, periksa izin baca bucket dan status API/imgproxy. Bila objek sumber berubah pada path yang sama, URL/cache lama dapat bertahan hingga masa cache berakhir; gunakan nama file berversi saat memperbarui gambar.

SOURCE CONFIGURATION

Storage tenant

Hubungkan bucket milik workspace ini agar gambar dapat diunggah dan dikirim melalui CDN.

Memeriksa storage…

Status koneksi bucket akan tampil di sini.

Memuat

Pengaturan bucket

Sambungkan bucket pertama atau perbarui koneksi bucket aktif. Workspace ini mendukung satu bucket aktif.

01

Lokasi bucket

Endpoint harus menggunakan HTTPS.

ProviderRegionEndpoint URLNama bucket Gunakan path style URLAktif: endpoint/bucket/key. Nonaktif: bucket.endpoint/key. Pilih sesuai format URL penyedia; ini tidak mengubah isi bucket.

Untuk Cloudflare R2, gunakan endpoint akun R2 dan region auto.

Contoh alamat objek akan muncul setelah endpoint dan nama bucket diisi.

02

Akses bucket

Kredensial digunakan server untuk mengakses bucket. Nilainya tidak ditampilkan lagi setelah disimpan.

Access keySecret key

Kredensial baru wajib diisi saat edit. Bucket/endpoint tidak bisa diganti atau dilepas selama masih ada gambar terdaftar.

ACCESS MANAGEMENT

API keys

Gunakan key untuk upload dan integrasi server. Key hanya ditampilkan sekali.

Kapan API key dipakai?

API key untuk integrasi server ke server: upload gambar, mendaftarkan objek bucket, membaca daftar gambar, dan membuat URL CDN bertanda tangan. URL otomatis /auto/... di website tetap publik dan tidak membutuhkan key.

Lihat contoh request dan aturan keamanan →

PLATFORM ADMIN

Tenants & users

Buat workspace baru, berikan akses user, dan pindah workspace dari sidebar.

Workspaces

Pilih tenant untuk melihat storage, gambar, key, dan anggota. Admin dapat mengubah nama, menonaktifkan tenant, serta mengatur akses pengguna.

0 workspace