How to Use Appwrite as your Next Image Cropping & Optimisation Service

Eldad A. Fux
Aug 28 · 4 min read

If you haven’t heard yet Appwrite, is a new web and mobile development platform that abstracts common development tasks to help developer deliver software faster.

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.

Get Started

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.

Your Appwrite project dashboard

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.

Appwrite console file creation form.

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

Clicking the file name will show you more information about it, including its unique ID.

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:

http://localhost/v1/storage/files/[FILE-UID]/preview?project=[PROJECT-UID]

Finally, to crop your file pass the width and height params with pixel sizes of your choice:

http://localhost/v1/storage/files/[FILE-UID]/preview?project=[PROJECT-UID]&width=100&height=100

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.

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:

http://localhost/v1/storage/files/[FILE-UID]/preview?project=[PROJECT-UID]&width=100&height=100&quality=75

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:

http://localhost/v1/storage/files/[FILE-UID]/preview?project=[PROJECT-UID]&width=100&height=100&output=webp

Learn more about Appwrite
If you wish to learn more about Appwrite and how it aims to help developers you can visit our website or follow us on any of our social media accounts.

We are also encouraging you to be involved in our community by submitting us with pull requests and new issues in our GitHub repository.

About me
I am Eldad Fux, a Software Architect, CTO, open source enthusiastic and the creator of appwrite.io. You can follow me on twitter: https://twitter.com/eldadfux

Appwrite.io

Appwrite tech blog

Eldad A. Fux

Written by

Software Architect, CTO, open source enthusiastic and the creator of appwrite.io. You can follow me on twitter: https://twitter.com/eldadfux

Appwrite.io

Appwrite tech blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade