Image transformations

Turn one image into many

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

Every picture on this page was generated by Image Studio itself from one sample photo named pear. 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://img.fairshare.tech/api/YOUR_API_KEY/images/fruit/pear
https://img.fairshare.tech/api/YOUR_API_KEY/images/fruit/pear/w_300,h_300,c_fill,g_south
https://img.fairshare.tech/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 Image Studio 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 Image Studio 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://img.fairshare.tech/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