CDN HUB ANALYTICS

Overview

Pantau penggunaan dan kesehatan pengiriman gambar.

CakupanPeriode

Menyiapkan dataBelum diperbaruiRingkasan API; rincian request Cloudflare tersedia di tabel dan panel edge

Origin requests—Request yang mencapai API

Origin bandwidth—Data yang dikirim API

Server cache HIT—Persentase cache di server CDN HUB

Errors—Respons HTTP 4xx/5xx

Rata-rata API—Waktu pemrosesan rata-rata

P95 API—95% request lebih cepat dari ini

Tren request

Per interval pada periode terpilih

TRAFFIC

Tren bandwidth

Data terkirim per interval

TRANSFER

Top images

Gambar paling banyak diminta

Image formats

Format hasil transformasi

HTTP status

Kesehatan delivery

DELIVERY INSIGHTS

Traffic

Pantau request yang mencapai API, dari aktivitas menit ini sampai tren periode.

CakupanPeriodeRefresh otomatis

Menyiapkan dataBelum diperbaruiEvent API dan Cloudflare dapat terlambat; cache browser tidak tercatat

PEMBARUAN OTOMATIS

Traffic live API

Request yang mencapai API per menit dalam 30 menit terakhir. Grafik bergerak saat data baru masuk.

—request API / 5 menit

——0

30 menit laluSekarang

Origin requests—Request yang mencapai API

Origin bandwidth—Data terkirim API

Rata-rata API—Waktu proses rata-rata

P95 API—95% request lebih cepat dari ini

Error rate—HTTP 4xx/5xx

Setiap request gambar

Memuat sumber data request.

Waktu	Gambar	Ditangani oleh	Cache	Lokasi edge	HTTP	Transfer	TTFB edge	Total edge	API

Rincian interval

Jumlah request dan bandwidth untuk setiap interval pada periode yang dipilih.

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

Telusuri request gambar, sumber respons, dan waktu pemrosesan dalam satu tempat.

Ukuran asli—Total dari request API

Ukuran hasil—Data setelah transformasi

Penghematan data—Dibanding ukuran asli

Rata-rata waktu API—Belum termasuk jaringan ke browser

RIWAYAT REQUEST

Semua request gambar

Memuat sumber data request.

Geser tabel untuk melihat kolom lain

Waktu	Gambar	Ditangani / cache	Lokasi / HTTP	Durasi	Transfer	Detail

Memuat request…

Rincian pemrosesan APIUkuran, fetch bucket, imgproxy, dan total waktu API

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

Request gagalMemuat error terbaru

Tabel utama memuat event Cloudflare jika Logpush tersedia. Ringkasan dan rincian pemrosesan berasal dari request yang mencapai API; cache browser tidak tercatat.

IMAGE LIBRARY ANALYTICS

Image Insights

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

Cache HIT—Dilayani dari cache CDN HUB

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.

Geser tabel ke samping

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

Statistik API hanya mencakup request yang mencapai CDN HUB. Kolom edge dan riwayat request mencakup Cloudflare setelah Logpush aktif. Cache browser tidak tercatat.

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; ringkasan HIT edge tersedia di Overview dan Traffic setelah analytics Cloudflare dikonfigurasi.
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

Memeriksa storage…

Status koneksi bucket akan tampil di sini.

Memuat

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

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.

Lihat contoh request →

Key workspace ini

Key hanya tampil penuh sekali saat dibuat. Periksa pemakaian terakhir atau cabut aksesnya di sini.

ALUR SINGKAT

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-Key saat upload, mendaftarkan gambar bucket, atau meminta URL bertanda tangan.
3. Pasang URL di websiteGunakan URL CDN yang dihasilkan sebagai src gambar. Jangan kirim key ke browser.

Buka dokumentasi API →

CONTOH REQUEST

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

Workspaces

Pilih tenant untuk melihat dan mengelola detailnya.

0 workspace

+ Buat tenant baru Workspace dan pemilik baru

Gambar lebih cepat.Kendali lebih mudah.

Masuk ke dashboard

Overview

Tren request

Tren bandwidth

Aktivitas tenant

Top images

Image formats

HTTP status

Traffic

Traffic live API

Setiap request gambar

Rincian interval

Images

Gambar bucket otomatis

Contoh URL untuk website

Gambar yang sudah ada

Transformasi output

Upload gambar baru

URL CDN siap

Gambar siap pakai

Activity

Semua request gambar

Image Insights

Riwayat gambar

Integration wizard

Documentation

Hubungkan bucket

Aktifkan folder gambar

Ganti URL di website

Integrasi API key

Parameter transformasi

Contoh HTML responsif

Cara memeriksa hasil

Storage tenant

Memeriksa storage…

Detail bucket

Belum ada bucket aktif

Hubungkan bucket

Lokasi bucket

Akses bucket

API keys

Kapan saya memerlukan API key?

Key workspace ini

Dari key ke URL gambar

Header autentikasi

Tenants & users

Workspaces

Tenant baru

Semua pengguna

Akses pengguna

Gambar lebih cepat.
Kendali lebih mudah.