How it works
Every file on Simpanan has a permanent link. To ask for a different version, insert /tr: and your options right after the domain:
Original: https://cdn.simpananawan.com/u/you/products/shoe.jpg
600 wide: https://cdn.simpananawan.com/tr:w-600/u/you/products/shoe.jpg
300 square: https://cdn.simpananawan.com/tr:w-300,h-300/u/you/products/shoe.jpgThe first request creates the new image from the original. After that it comes from the cache, so every later request is delivered straight away. Your original file is never changed.
The options
Combine options with commas, in any order.
| Option | What it does |
|---|---|
w-600 | Width in pixels (up to 5000). Height follows to keep the proportions. |
h-400 | Height in pixels. With w, the image is cropped to fit that box. |
c-at_max | Crop mode: fit inside the box without cropping. All modes are below. |
q-70 | Quality from 1 to 100. Default 80. |
f-auto | Best format for the browser (AVIF or WebP). About formats. |
bl-10 | Blur from 1 to 100, for backgrounds or placeholders. |
rt-90 | Rotate clockwise by degrees. |
orig-true | Ignore the other options and send the original file. |
Crop modes when you set width and height
c-maintain_ratio(default): fill the whole box and crop the overflow from the centre. Good for uniform thumbnails.c-at_max: fit the whole image inside the box. The result can be smaller than the box on one side.c-at_least: cover at least the box, without cropping. The result can be larger on one side.c-pad_resize: fit inside the box and add transparent space so the size is exact.c-force: stretch to the exact size; proportions aren't kept.
Responsive images with srcset
Because the size lives in the link, responsive images are easy. The browser picks the version that suits the visitor's screen:
<img
src="https://cdn.simpananawan.com/tr:w-800,f-auto/u/you/banner.jpg"
srcset="https://cdn.simpananawan.com/tr:w-480,f-auto/u/you/banner.jpg 480w,
https://cdn.simpananawan.com/tr:w-800,f-auto/u/you/banner.jpg 800w,
https://cdn.simpananawan.com/tr:w-1200,f-auto/u/you/banner.jpg 1200w"
sizes="(max-width: 800px) 100vw, 800px"
width="1200" height="630" alt="Year-end sale">The width and height attributes let the browser reserve space before the image loads, so the layout doesn't jump. The full walkthrough is in our guide how to compress images for a website.
Limits to know about
- Images that can be transformed: JPG, PNG, WebP, AVIF, still GIF and BMP. SVG and other formats are delivered as they are.
- Width and height go up to 5000 pixels. Originals above 40 megapixels are delivered unchanged.
- Animated GIFs are delivered at their original size so the animation keeps playing.
- Browsers keep a result for one day. If you replace a file under the same name, new versions are made automatically.