Simpanan Docs: URL Options, HTML & WordPress Examples

Link format

Every file you upload has a permanent link following this pattern:

https://cdn.simpananawan.com/u/<username>/<folder>/<file-name>

For example https://cdn.simpananawan.com/u/your-shop/products/shoe.jpg. File names with spaces or special characters are URL-encoded (a space becomes %20). The Copy link button in the library does this for you.

Image options

Insert /tr: followed by options, separated by commas, right after the domain. Alternatively, add ?tr= to the end of the link.

https://cdn.simpananawan.com/tr:w-600,h-400,f-auto/u/your-shop/products/shoe.jpg
https://cdn.simpananawan.com/u/your-shop/products/shoe.jpg?tr=w-600,h-400,f-auto

Option	Values	What it does
`w`	1 – 5000	Width in pixels.
`h`	1 – 5000	Height in pixels.
`c`	`maintain_ratio`, `at_max`, `at_least`, `pad_resize`, `force`	How the image fits when width and height are both set. Default `maintain_ratio` (fill the box, crop from the centre).
`f`	`auto`, `webp`, `avif`, `jpg`, `png`	Output format. `auto` picks AVIF or WebP for the browser.
`q`	1 – 100	Quality. Default 80.
`bl`	1 – 100	Blur.
`rt`	degrees	Rotate clockwise.
`orig`	`true`	Send the original file, ignoring other options.

Each crop mode is explained on resize images with a URL, and how f-auto works on automatic WebP and AVIF.

Examples

An img tag with a fixed size

<img src="https://cdn.simpananawan.com/tr:w-400,h-400,f-auto/u/your-shop/products/shoe.jpg"
     width="400" height="400" alt="Blue running shoe" loading="lazy">

A responsive image with srcset

<img src="https://cdn.simpananawan.com/tr:w-800,f-auto/u/your-shop/banner.jpg"
     srcset="https://cdn.simpananawan.com/tr:w-480,f-auto/u/your-shop/banner.jpg 480w,
             https://cdn.simpananawan.com/tr:w-800,f-auto/u/your-shop/banner.jpg 800w,
             https://cdn.simpananawan.com/tr:w-1600,f-auto/u/your-shop/banner.jpg 1600w"
     sizes="100vw" width="1600" height="600" alt="Year-end sale">

A CSS background

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

Video

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

WordPress

Copy an image link from your Simpanan library and add options, for example /tr:w-1200,f-auto.
In the WordPress editor, add an Image block and choose Insert from URL.
Paste the link and fill in the alt text.

These images don't fill up the WordPress media library or your hosting, because they're delivered straight from Simpanan.

Uploading and managing files

Open the library, then drag files or folders onto the page, or use the New menu.
Files can be up to 500 MB each. Every file type is accepted.
Uploading a file with the same name in the same folder replaces the old one. Its link doesn't change.
Deleting a file makes its link stop working. Make sure your website no longer uses it.

Caching

Each combination of options is made once, then kept in Simpanan's cache. Later requests come straight from the cache.
Visitors' browsers keep files for one day.
When you replace a file, new transformed versions are made automatically. Visitors whose browser still has the old version see the new one within a day. For an immediate change, use a new file name.
f-auto results are cached only in the visitor's browser (not in shared caches), because one link can produce different formats for different browsers.

Limits

What	Limit
File size	500 MB per file
Output width and height	Up to 5000 pixels
Images that can be transformed	JPG, PNG, WebP, AVIF, still GIF, BMP, up to 40 megapixels
Animated GIF	Delivered at original size, keeps playing
SVG and other files	Delivered as they are
Video	Delivered as uploaded, with byte ranges (seeking), no transcoding