Dokumentasi Simpanan: Opsi URL, Contoh HTML & WordPress

Format link

Setiap file yang Anda unggah punya link permanen dengan pola berikut:

https://cdn.simpananawan.com/u/<nama-pengguna>/<folder>/<nama-file>

Contohnya https://cdn.simpananawan.com/u/toko-anda/produk/sepatu.jpg. Nama file yang berisi spasi atau karakter khusus ditulis dalam bentuk URL (spasi menjadi %20). Tombol Salin link di library sudah melakukannya untuk Anda.

Opsi gambar

Sisipkan /tr: diikuti opsi, dipisah koma, tepat setelah nama domain. Sebagai alternatif, tambahkan ?tr= di akhir link.

https://cdn.simpananawan.com/tr:w-600,h-400,f-auto/u/toko-anda/produk/sepatu.jpg
https://cdn.simpananawan.com/u/toko-anda/produk/sepatu.jpg?tr=w-600,h-400,f-auto

Opsi	Nilai	Fungsi
`w`	1 – 5000	Lebar dalam piksel.
`h`	1 – 5000	Tinggi dalam piksel.
`c`	`maintain_ratio`, `at_max`, `at_least`, `pad_resize`, `force`	Cara menyesuaikan gambar saat lebar dan tinggi diisi. Bawaan `maintain_ratio` (isi kotak, potong dari tengah).
`f`	`auto`, `webp`, `avif`, `jpg`, `png`	Format hasil. `auto` memilih AVIF atau WebP sesuai browser.
`q`	1 – 100	Kualitas. Bawaan 80.
`bl`	1 – 100	Blur.
`rt`	derajat	Putar searah jarum jam.
`orig`	`true`	Kirim file asli, abaikan opsi lain.

Penjelasan setiap mode crop ada di halaman resize gambar lewat URL, dan cara kerja f-auto di WebP dan AVIF otomatis.

Contoh pemakaian

Tag img dengan ukuran tetap

<img src="https://cdn.simpananawan.com/tr:w-400,h-400,f-auto/u/toko-anda/produk/sepatu.jpg"
     width="400" height="400" alt="Sepatu lari biru" loading="lazy">

Gambar responsif dengan srcset

<img src="https://cdn.simpananawan.com/tr:w-800,f-auto/u/toko-anda/banner.jpg"
     srcset="https://cdn.simpananawan.com/tr:w-480,f-auto/u/toko-anda/banner.jpg 480w,
             https://cdn.simpananawan.com/tr:w-800,f-auto/u/toko-anda/banner.jpg 800w,
             https://cdn.simpananawan.com/tr:w-1600,f-auto/u/toko-anda/banner.jpg 1600w"
     sizes="100vw" width="1600" height="600" alt="Promo akhir tahun">

Background di CSS

.hero {
  background-image: url("https://cdn.simpananawan.com/tr:w-1600,f-auto/u/toko-anda/latar.jpg");
  background-size: cover;
}

Video

<video controls preload="metadata"
       poster="https://cdn.simpananawan.com/tr:w-1280,f-auto/u/toko-anda/cover.jpg"
       src="https://cdn.simpananawan.com/u/toko-anda/profil.mp4"></video>

WordPress

Salin link gambar dari library Simpanan, lalu tambahkan opsi, misalnya /tr:w-1200,f-auto.
Di editor WordPress, tambahkan blok Gambar dan pilih Sisipkan dari URL.
Tempel link tersebut dan isi teks alternatif (alt).

Gambar ini tidak memenuhi media library WordPress dan hosting Anda, karena dikirim langsung dari Simpanan.

Mengunggah dan mengelola file

Masuk ke library, lalu seret file atau folder ke halaman, atau pakai menu New.
Ukuran maksimal 500 MB per file. Semua jenis file diterima.
Mengunggah file dengan nama sama di folder yang sama akan menggantikan file lama. Link-nya tidak berubah.
Menghapus file membuat link-nya berhenti bekerja. Pastikan file tidak dipakai lagi di website Anda.

Cache

Setiap kombinasi opsi dibuat sekali, lalu disimpan di cache Simpanan. Permintaan berikutnya langsung diambil dari cache.
Browser pengunjung menyimpan file selama satu hari.
Saat Anda mengganti file, versi transformasi baru dibuat otomatis. Pengunjung yang masih menyimpan versi lama di browser akan melihat versi baru paling lambat sehari kemudian. Untuk perubahan langsung, pakai nama file baru.
Hasil f-auto hanya disimpan di browser pengunjung (bukan di cache bersama), karena satu link bisa menghasilkan format berbeda untuk browser berbeda.

Batasan

Hal	Batas
Ukuran file	500 MB per file
Lebar dan tinggi hasil	Maksimal 5000 piksel
Gambar yang bisa diubah	JPG, PNG, WebP, AVIF, GIF diam, BMP, hingga 40 megapiksel
GIF animasi	Dikirim dalam ukuran asli, tetap bergerak
SVG dan file lain	Dikirim apa adanya
Video	Dikirim apa adanya, mendukung byte range (bisa dilompat), tanpa transcoding