IMAGE DELIVERY ANALYTICS
Overview
Ringkasan performa pengiriman gambar untuk workspace ini.
✦
Memuat analytics
Mengambil data terbaru untuk workspace ini.
Requests
Permintaan per interval
Bandwidth
Volume data per interval
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.
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
MemuatGambar bucket otomatis
Aktifkan satu folder bucket. Website Anda cukup mengganti URL gambar ke CDN, lalu memilih ukuran dan format lewat parameter URL.
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 MBSIAP DIGUNAKAN
URL CDN siap
URL ini menyajikan hasil transformasi. Respons dapat disimpan di cache browser dan proxy CDN yang aktif.
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.
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.
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 |
|---|
Halaman 1
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.
Hubungkan bucket
Di menu Storage, sambungkan bucket R2, S3, atau Spaces tenant. Bucket harus berisi gambar sumber yang ingin ditampilkan.
Buka Storage ?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.
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 URLParameter 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-Typesesuai 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…
MemuatStatus koneksi bucket akan tampil di sini.
ACCESS MANAGEMENT
API keys
Gunakan key untuk upload dan integrasi server. Key hanya ditampilkan sekali.
PLATFORM ADMIN
Tenants & users
Buat workspace baru, berikan akses user, dan pindah workspace dari sidebar.
Workspaces
Pilih tenant untuk membuka dashboard dan melihat datanya.