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 CDN HUB 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 URLIntegrasi 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.
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-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.
WORKSPACE SETTINGS
Storage tenant
Kelola satu koneksi bucket yang menjadi sumber gambar workspace ini.
KONEKSI STORAGE
MemuatMemeriksa storage…
Status koneksi bucket akan tampil di sini.
SUMBER AKTIF
Detail bucket
Kredensial tersimpan terenkripsi dan tidak ditampilkan kembali.
Belum ada bucket aktif
Sambungkan bucket R2, S3, atau Spaces untuk mulai memakai gambar di workspace ini.
Workspace ini hanya memiliki satu koneksi storage aktif. Mengedit koneksi akan memperbarui sumber gambar yang dipakai workspace.
ACCESS MANAGEMENT
API keys
Beri akses aman kepada aplikasi server untuk mengelola gambar di workspace ini.
PILIH CARA INTEGRASI
Lihat contoh request →Kapan saya memerlukan API key?
Gunakan API key untuk upload gambar, mendaftarkan objek bucket, atau membuat URL CDN dari backend Anda. Untuk menampilkan gambar lewat URL otomatis /auto/... di website, key tidak diperlukan.
Key workspace ini
Key hanya tampil penuh sekali saat dibuat. Periksa pemakaian terakhir atau cabut aksesnya di sini.
Dari key ke URL gambar
- 1. Buat dan simpan keySalin key ke secret manager atau variabel lingkungan server. Nilainya tidak dapat dilihat ulang.
- 2. Panggil API dari backendKirim header
X-API-Keysaat upload, mendaftarkan gambar bucket, atau meminta URL bertanda tangan. - 3. Pasang URL di websiteGunakan URL CDN yang dihasilkan sebagai
srcgambar. Jangan kirim key ke browser.
Header autentikasi
curl -H "X-API-Key: $IMAGE_CDN_API_KEY" \ https://cdn-api.hub.co.id/v1/projects/PROJECT_ID/images
Contoh lengkap upload, registrasi bucket, dan pembuatan URL ada di halaman Documentation.
Simpan key di server. URL otomatis untuk gambar publik dapat langsung dipakai tanpa key.
PLATFORM ADMIN
Tenants & users
Kelola workspace dan akses penggunanya dari tempat yang sama.
DAFTAR TENANT
0 workspaceWorkspaces
Pilih tenant untuk melihat dan mengelola detailnya.
+ Buat tenant baru Workspace dan pemilik baru
PENGGUNA PLATFORM
Semua pengguna
Lihat status akun dan keanggotaan lintas tenant. Pengaturan role tersedia pada detail tenant.