Appwrite provides utilities to manipulate images for previewing images in your apps.
Appwrite Storage's preview endpoint let you manipulate resolution, add borders and the border-radius, add background-color, set the opacity for the image, and get the image in the appropriate output format.
You can manipulate images resolution to display appropriately on responsive websites. You can also adjust the image border, background color, and border-radius to match the theming of your application. The Appwrite Storage also allows you to change the format and compression of your images for network transfer optimization and to help you speed your application. You can do all that without caring about how the image was originally uploaded.
Caching
When manipulating images in Appwrite, the resulting images are cached by Appwrite and your browser. When you repeatedly use the same transformed images, the performance impact will be minimal.
Options
Below you can find all the different parameters offered by the preview endpoint to manipulate the image.
| Parameter | Description |
| width | Set the width of the output image in pixels, the image will be resized keeping the aspect ratio intact. Accepts integer between 0-4000 |
| height | Set the height of the output image in pixels, the image will be resized keeping the aspect ratio intact. Accepts integer between 0-4000 |
| gravity | The gravity while cropping the image providing either width, height, or both. Accepts any of: center, top-left, top, top-right, left, right, bottom-left, bottom, bottom-right. |
| quality | Set the quality of the output image. Accepts integer between 0-100, where 100 is the highest quality. |
| borderWidth | Set a border with the given width in pixels to the output image. Accepts integer between 0-100. |
| borderColor | Set a border-color for the output image. Accepts any valid hex color value without the leading #. |
| borderRadius | Set a border-radius in pixels. Accepts an integer between 0-4000. |
| opacity | Set opacity for the output image. Accepts a float value between 0-1, where 0 makes it transparent. Only works with output formats supporting alpha channels like png. |
| rotation | Rotate the output image by a degree. Accepts an integer between -360 to 360. |
| background | Set a background-color. Accepts any valid hex color value without the leading #. Only works with output formats supporting alpha channels like png. |
| output | Set the output image format. If not provided, will use the original image's format. Supported formats are: jpg, jpeg, png, gif, and webp |
Examples
Here are some examples using Client SDKs.
import { Client, Storage } from "appwrite";
const client = new Client();
const storage = new Storage(client);
client
.setEndpoint('https://cloud.appwrite.io/v1') // Your API Endpoint
.setProject('5df5acd0d48c2') // Your project ID
;
const result = storage.getFilePreview(
'photos', // bucket ID
'sunset.png', // file ID
1800, // width, will be resized using this value.
0, // height, ignored when 0
'center', // crop center
'90', // slight compression
5, // border width
'CDCA30', // border color
15, // border radius
1, // full opacity
0, // no rotation
'FFFFFF', // background color
'jpg' // output jpg format
);
console.log(result.href);