Appwrite has many services to help you write code faster, it can help you manage your users’ authentication, persistent database and files management. One of Appwrite’s coolest features is its ability to help you crop your image files in a way that will help you use optimised images in your app and improve performance.
Appwrite is a self-hosted project packaged as a Docker image, so to set it up all you need to do is to run the docker image on your host of choice (Linux, macOS, and Windows are all supported). The quickest way to get started is to run the Appwrite quick installation command from your terminal. Please notice that you need to have the Docker CLI installed for this to work.
Once Docker has finished setting up your Appwrite server environment, access your localhost on port 80 (http://localhost) to enter the Appwrite console.
Create Your First Project
Appwrite projects are containers for your app resources like database documents, storage files, and project users. To create a new project all you need to do is to log in or signup to your new console from http://localhost (or any other host you might have set up) and click the “Create Project” button. Choose your project name and access it once it has been created.
Upload Your Files
To check out how image cropping works, you first need to upload some files to the Appwrite server. The easiest way to do this is to upload your files from the Appwrite console UI.
In your new project dashboard access the storage section from the left navigation. Once in, click the round +add button on the bottom right position of your screen.
After clicking the add button, you will access to the file creation form, select your files and click the “Create” button to start uploading them, in case you were wondering what the read and write permissions fields are, you can read more about resource access control in Appwrite here. By default and for the sake of this tutorial leave the asterisk tags in place to give wildcard permission to anyone wishes to read or write your new files.
Please note, that although in this example we are using the Appwrite console to upload files, any action that you can perform in the console is also available in Appwrite REST API and the different SDKs offered by the Appwrite team.
Crop your Files
To start cropping your files you will first need to get your project and files unique IDs. To get your files UIDs all you need to do is to click on the name of the file you wish to crop and copy its unique ID value from the file UID input field. To get your new project UID, go to your project settings page from the left navigation button and copy its UID input field value.
Once you have your UIDs, call your files using this API call to view a preview of your new file:
Finally, to crop your file pass the width and height params with pixel sizes of your choice:
When passing only one of the width or height parameters with your API call, Appwrite server will automatically adjust the second, to keep your image aspect ratio intact.
Also notice that currently there is a limit of maximum 4000px size in width or height to avoid abusing your server, For detailed documentation, visit the full preview API reference page.
Optimise Your Preview Images
When serving images on the web, speed is crucial and that’s why Appwrite server offers you a couple of options to speed up your image serving.
Change Image Quality
By default, your image quality is set to maximum 100, but when possible on your side, you can change it to reduce image size. To change your image size all you need to do is to add the “quality” parameter to your API call:
Serve images with WEBP compression
WEBP is a compression format developed by Google to help optimise your image size without losing noticeable image quality. As of today, WEBP is supported by most modern web browsers. To avoid unwanted errors the Appwrite servers check for WEBP client support and fallbacks if necessary to use the old good jpeg format instead.
To add serve your images with WEBP support all you need to do is add the output parameter to your API call and set to webp:
We are also encouraging you to be involved in our community by submitting us with pull requests and new issues in our GitHub repository.