loading...

Flyimg: Dockerized PHP7 application runs as a Microservice to resize and crop images on the fly.

sadok profile image Sadok ・2 min read

Flyimg
With Responsive Images, today we have a bunch of front end tools to deliver the most appropriate image to a browser. But you still have to generate those images.

This is our (open source) take on the problem: Flyimg https://github.com/flyimg/flyimg

A micro service that will resize, crop, transform and compress images on the fly

What it does

  • Get images from anywhere in the internet and store them locally for further operations.
  • Resize an image and serve it compressed (Moz-Jpeg for JPEGs)
  • Crop images to given coordinates
  • Convert between some formats (Webp, JPEG, PNG, GIF)
  • It can restrict the domains or IPs from where it pulls images to transform.
  • It's a bunch of well know open source projects packed together for convenience.
  • It includes face detection, cropping, face blurring, image rotation and many other options.
  • Simple and easy to extend (our main goal).

With the magic of Docker you can have one running in 10 minutes in AWS or Digital Ocean in the cheapest servers you can get.

Of course there are a hundred of services that will get your money to do it. Also some open source projects that will do a bunch of things, many with way more features, but they are hard to setup and use. In many cases you need to compile C libraries in very specific ways... then deal with the configs of a server...

Basic usage

To resize the following image: https://www.mozilla.org/media/img/logos/firefox/logo-quantum-high-res.cfd87a8f62ae.png

You call your img.service and give it some params in the URL like this:

https://oi.flyimg.io/upload/w_333,h_200,q_90/https://www.mozilla.org/media/img/logos/firefox/logo-quantum-high-res.cfd87a8f62ae.png

-> That will create a version of the image that fits in a 333x200 rectangle:

Face detection cropping:

https://oi.flyimg.io/upload/fc_1/https://oi.flyimg.io/faces.jpg

face crop

Face detection blurring + resize:

https://oi.flyimg.io/upload/fb_1,w_600/https://oi.flyimg.io/faces.jpg

face blur

Discussion

pic
Editor guide