Cara kerjanya
Setiap file di Simpanan punya link permanen. Untuk meminta versi lain, sisipkan /tr: dan opsi Anda tepat setelah nama domain:
Asli: https://cdn.simpananawan.com/u/anda/produk/sepatu.jpg
Lebar 600: https://cdn.simpananawan.com/tr:w-600/u/anda/produk/sepatu.jpg
Kotak 300: https://cdn.simpananawan.com/tr:w-300,h-300/u/anda/produk/sepatu.jpgPermintaan pertama membuat gambar baru dari file asli. Setelah itu, hasilnya diambil dari cache, jadi permintaan berikutnya langsung dikirim. File asli Anda tidak pernah diubah.
Opsi yang bisa dipakai
Gabungkan beberapa opsi dengan koma, dalam urutan apa pun.
| Opsi | Fungsi |
|---|---|
w-600 | Lebar dalam piksel (maksimal 5000). Tinggi menyesuaikan agar proporsi tetap. |
h-400 | Tinggi dalam piksel. Bersama w, gambar dipotong agar pas di kotak tersebut. |
c-at_max | Mode crop: muat di dalam kotak tanpa memotong. Lihat semua mode di bawah. |
q-70 | Kualitas 1 sampai 100. Bawaan 80. |
f-auto | Format terbaik untuk browser (AVIF atau WebP). Tentang format. |
bl-10 | Blur 1 sampai 100, misalnya untuk latar belakang atau pratinjau. |
rt-90 | Putar searah jarum jam dalam derajat. |
orig-true | Abaikan opsi lain dan kirim file asli. |
Mode crop saat lebar dan tinggi diisi
c-maintain_ratio(bawaan): isi kotak penuh, bagian yang berlebih dipotong dari tengah. Cocok untuk thumbnail seragam.c-at_max: muat seluruh gambar di dalam kotak. Hasilnya bisa lebih kecil dari kotak di salah satu sisi.c-at_least: tutupi kotak minimal, tanpa memotong. Hasilnya bisa lebih besar di salah satu sisi.c-pad_resize: muat di dalam kotak dan tambahkan ruang transparan agar ukurannya tepat.c-force: regangkan ke ukuran persis, proporsi tidak dijaga.
Gambar responsif dengan srcset
Karena ukuran cukup ditulis di link, membuat gambar responsif jadi mudah. Browser memilih versi yang sesuai dengan layar pengunjung:
<img
src="https://cdn.simpananawan.com/tr:w-800,f-auto/u/anda/banner.jpg"
srcset="https://cdn.simpananawan.com/tr:w-480,f-auto/u/anda/banner.jpg 480w,
https://cdn.simpananawan.com/tr:w-800,f-auto/u/anda/banner.jpg 800w,
https://cdn.simpananawan.com/tr:w-1200,f-auto/u/anda/banner.jpg 1200w"
sizes="(max-width: 800px) 100vw, 800px"
width="1200" height="630" alt="Promo akhir tahun">Atribut width dan height membuat browser menyiapkan ruang sebelum gambar dimuat, sehingga tata letak tidak bergeser. Langkah lengkapnya ada di panduan cara kompres gambar untuk website.
Batasan yang perlu diketahui
- Gambar yang bisa diubah: JPG, PNG, WebP, AVIF, GIF diam, dan BMP. SVG dan format lain dikirim apa adanya.
- Lebar dan tinggi maksimal 5000 piksel. Gambar asli di atas 40 megapiksel dikirim tanpa diubah.
- GIF animasi dikirim dalam ukuran asli agar animasinya tetap berjalan.
- Browser menyimpan hasil selama satu hari. Jika Anda mengganti file dengan nama yang sama, versi baru dibuat otomatis.