Cropping and Optimizing images with Appwrite
In the first blog, we installed Docker and Appwrite in our system and did basic functions with its CLI right from the terminal. This time I’m focusing more on its application to a project.
I have my website, which I haven’t updated for a while but it’d be nice to show the way this thing works and in its way optimize my site, sounds cool right; it’s easy too. Let’s go.
First, have to make sure Docker is running and then Appwrite is too as we discussed in the first blog. A quick recap here.
wsl -l -v
cd appwrite
appwrite health
Make sure these are running. Then write ‘localhost’ in your browser.
First, make a project if you haven’t made one till now, please refer to the first blog.
Uploading image:
In Project> Sidebar on left> Storage> Add file
Choose any image from your device. For instance, I chose a graphic image on my site. Click create and done. Again click on the image uploaded, copy the File ID and paste it somewhere(on another tab).
Go to Home> Project-1 (where you uploaded the image)> Setting, copy the Project ID and paste it somewhere; remember which one is which.
Let’s crop the image:
Copy and paste the below link in another tab, replace [FILE-ID] and [PROJECT-ID] with the above respective ids.
http://localhost/v1/storage/files/[FILE-ID]/preview?project=[PROJECT-ID]
This is an API that will show us the image.
Try yourself (copy and paste the below link in your browser):
http://localhost/v1/storage/files/616ae9992d74e/preview?project=6166b812ce94e
To crop the image, add &width=PixelSize&height=PixelSize parameter to the API call:
http://localhost/v1/storage/files/[FILE-ID]/preview?project=[PROJECT-ID]&width=100&height=100
When only one parameter is passed in an API call, the Appwrite server adjusts the second to keep the image aspect ratio intact. If I just keep the square ratio intact(since the image is of square shape), the image only gets smaller but if I vary the ratio then it's indeed cropped. The maximum cropping is of 4000px for now.
Try yourself:
http://localhost/v1/storage/files/616ae9992d74e/preview?project=6166b812ce94e&width=4000&height=1000
Gravity:
Appwrite handles crop with gravity as a thumbnail cropping, that is first it’ll resize the image to the minimum possible size keeping the aspect ratio intact, and then consider the gravity while cropping to the exact size specified. In simple words it’s cropping at the mentioned place in image position = top, top-left, top-right, left, right, bottom, bottom-left, and bottom-right.
To add gravity, just add &gravity=position parameter to the API call:
Try yourself(change the bottom and pixels to different values and see the magic):
This one gives the same output for the bottom/top/center as for the given dimensions. I really like this feature.
More on this feature, here by Damodar Lohani.
Let’s optimize image:
Change image quality
By default, image quality is set to a maximum of 100(if you just write quality and nothing as its input then you will get it at it’s highest quality uploaded), but we can change it to reduce image quality. The lesser the quality of image, the faster it’ll load but you’ll have to lose the quality, it’s a trade off.
To change image quality we just need to add the &quality=number parameter to the API call:
To show this, I used an image from Unsplash,
Try:
http://localhost/v1/storage/files/616b373973f93/preview?project=6166b812ce94e
Image at quality=1,
Try:
http://localhost/v1/storage/files/616b373973f93/preview?project=6166b812ce94e&width=1000&quality=1
Can barely see the image here, you don’t want to reduce so much of it that you can hardly recognize it.
Image at quality=10,
Try:
http://localhost/v1/storage/files/616b373973f93/preview?project=6166b812ce94e&width=1000&quality=10
The features are more distinguishable here but not so clear to be used in a site really.
Image at quality=30,
Try:
http://localhost/v1/storage/files/616b373973f93/preview?project=6166b812ce94e&width=1000&quality=30
The features can be seen nicely and so can be used in one’s site too.
WebP Compression
WEBP is a compression format developed by Google to help optimize image size without losing noticeable image quality. It helps in loading websites faster. 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 your images with WEBP support, just add &output=webp parameter to the API call:
I used this feature, now the image loads faster and so does the site :) I think this is a better option than using quality.
That’s all from my side in this blog.
Happy Appwriting!! Do join the Appwrite community, here.
Till next time, be safe and take care of yourself. This is the month of Hacktoberfest, do participate and contribute to open source!! Thank you for giving my blog a read.
