Hello guys. Today I’m going to share with you a very cool project I’m working on. Its main mission it is to apply all Web Development Best Practices applied for images and combine it into one simple but powerful API.
It’s called ImageBoss. And my objective today with this post it’s to help you to understand why ImageBoss and how simple it is to do image resizing or image cropping with any kind of image.
First of all, if you have an website (or an app) with posts, news, galeries or dealing with user generated content in general it can be a huge waste of time if all you want to do is to focus on your business.
Usually, you have to create a new machine and optimize this web service to handle huge payloads, optimize its storage to fast access, increase timeouts to be able to fetch all the information, handle security, conversion, compression and then you have to code a routine to generate thumbnails and resize your images in all kind of different formats you need (or may need) to be able to beautifully display those images on your app or website. After doing all that, you still need to sign up for a CDN so you can put your assets closer to your end-users to reduce latency and download speed.
It should be the dream, right? but we have to be honest… not all of us have the time, resources and the patience to go this further and do it all over again for each product or client you have.
That is why ImageBoss is here. It does it all for you. Image Resizing, image cropping, image filters, image conversion and then caching it to one of the most popular CDNs in the world, CloudFlare.
Image Resizing
First of all to be able to keep up you need to go to the ImageBoss website and setup your account: https://imageboss.me/. (~30secs)
After login in, on your dashboard, you will be able to see this screen:
All you need to do is to add all the sources/hosts that identifies your traffic. (You can add as many sites as you want).
On this example I will use this image:
Its url is: https://storage.googleapis.com/imagens-clubedocodigo/institucional/head-exibition.jpg
Imagine that you want to generate a custom version of that image to be able to show it on a mobile device with 745×200.
In that case I will use an ImageBoss operation called “cover” with all the default settings. You can read further by following this link:
https://imageboss.me/docs/operations/cover
Basically, all you need to do is add a prefix to the original URL:
https://service.imageboss.me/cover/745x200/
And the final URL should be:
https://service.imageboss.me/cover/745x200/https://storage.googleapis.com/imagens-clubedocodigo/institucional/head-exibition.jpg
The generated image would be:
Notice that ImageBoss has Smart Cropping by default.
Use cover when you want an image with an exact width and height. By default we’ll run our Smart Cropping algorithm to identify the main subject of the image, so in case we need to remove part of the image to deliver on the requested size, we will always try our best to keep the most important element in the frame.
In addition to all that it auto rotate my image if necessary and it also convert my image to have progressive scans (progressive JPEG). Now my image is auto rotated, compressed, cached, progressive scans, and globally available to all my users.
I guess that our boring days generating thumbnails manually for every single project is over, right?
Let me know what you guys think!