Image transformations

Turn one image into many

Every image you upload to Frametile is a base image. When you request it through its delivery URL, you can add transformation parameters to the URL and Frametile generates a brand-new image on the fly. Your original is never changed.

Every picture on this page was generated by Frametile itself from a handful of sample photos, such as pear, fjord and lioness. The caption under each picture is the exact transformation that produced it.

Anatomy of a delivery URL

Rules

• A parameter is a short name, an underscore and a value: w_300.
• Separate several parameters in one component with commas: w_300,h_300,c_fill.
• Separate components with /. They are applied in order, left to right. See chaining.
• Inside one component, parameters are applied in a fixed order: resize or crop, rotate, effect, flip, opacity, rounded corners, then border.
• Text values, such as overlay text, must be URL-encoded.
• With no transformations, the original file is returned unchanged.

https://frametile.com/api/YOUR_API_KEY/images/fruit/pear
https://frametile.com/api/YOUR_API_KEY/images/fruit/pear/w_300,h_300,c_fill,g_south
https://frametile.com/api/YOUR_API_KEY/images/fruit/pear/e_grayscale/r_40

Resize, crop and scale

Set a size with w_ and h_, then choose how the image should fill that size with a crop mode.

Crop modes

Gravity

With c_fill, c_crop and c_thumb, gravity decides which part of the image stays in the frame.

Values: center (default), north, south, east, west, north_east, north_west, south_east and south_west.

Change how an image looks

Add an effect with e_. Some effects take a value after a colon, such as e_blur:600.

To stack effects, list them in one component, e_grayscale,e_sepia, or in separate components. They are applied in order.

AI background removal

e_background_removal cuts the subject out of its background and keeps the transparency. It runs a neural-network segmentation model (rembg) on the Frametile server.

If that model is not available on the server, a simpler method based on the colour at the image edges is used. It works best on plain backgrounds.

The result is transparent, so it is returned as a PNG unless you choose another format. The shortcut t_bg-rem does the same thing.

Layer text and images

Add a layer with l_. A layer can be text or another image.

Text overlay

l_text:Font_Size_Weight_Align:Your%20text

Image overlay

l_badge,w_110,g_north_east,x_16,y_16

Use the name of another image you own in Frametile after l_. Then size and place it in the same component.

Corners, borders, rotation and opacity

Colours

Use a colour name such as white or red, or a hex value without the hash: 4B5FD6. The form rgb:4B5FD6 also works.

Choose the format and the quality

• With no f_, the result is a JPEG, or a PNG when the image has transparent areas.
• f_auto returns WebP, or PNG when the image has transparent areas.
• Pick the format with f_ in the same component as your other parameters: w_480,f_webp,q_80.

What it means for file size

Measured on the sample photo at w_480. Your sizes will depend on your own images.

Shortcuts for common looks

Write t_ or bl_ followed by a name, for example t_bg-rem. You can mix a name with other parameters: t_sepia,w_300.

Build an image step by step

Each /-separated component works on the result of the one before it.

https://frametile.com/api/YOUR_API_KEY/images/fruit/pear/c_fill,w_300,h_300/e_sepia/r_40/bo_6px_white

Copy

1. c_fill,w_300,h_300 crops to a 300 by 300 square.
2. e_sepia gives it a sepia tone.
3. r_40 rounds the corners.
4. bo_6px_white adds a white border.

Who can request an image

Every request needs a valid API key, and the key must belong to the owner of the image or of its folder. Generated images are cached by their full URL, so a repeat request is served from storage instead of being generated again. Changing any character in the URL creates a new image.

Every parameter at a glance