Dockerized PHP7 application runs as a Microservice to resize and crop images on the fly. Get optimised images with MozJPEG, WebP or PNG using ImageMagick. Includes face detection, cropping, face blurring, image rotation and many other options. Abstract storage based on FlySystem in order to store images on any provider (local, AWS S3...). http://flyimg.io

1. Resize, Crop and Compress images on the fly.
https://github.com/flyimg/flyimg
@sadok_f
@ImINaBAR
http://flyimg.io

2. @sadok_f
@ImINaBAR
http://flyimg.io
Sadok Ferjani
@sadok_f
Agustín Amenábar Larraín
@ImINaBAR

3. What is Flyimg:
- Dockerized PHP7 application runs as a Microservice to resize and crop images
on the fly.
- Get optimised images with MozJPEG, WebP or PNG using ImageMagick.
- Face detection cropping, face detection blurring, image rotation and many other
options.
- Abstract storage based on Flysystem in order to store images on any provider
(local, AWS S3...).
@sadok_f
@ImINaBAR
http://flyimg.io

4. @sadok_f
@ImINaBAR
http://flyimg.io
webp
png
jpg
Source image
1080 x 1639
w_300
w_300,h_300,c_1
One service to handle the all image transformations
usually needed by an application.
Make a request with what you need:
● Get the image back
● Get the path of the image back (to store
somewhere)
w_300,h_300,o_jpg
h_300,o_webp
h_300,o_png

5. Technology stack:
- Server: nginx
- Application: Silex , a PHP micro-framework.
- Image manipulation: ImageMagick
- JPEG encoder: MozJpeg
- Storage: Flysystem
- Containerisation: Docker
@sadok_f
@ImINaBAR
http://flyimg.io

6. Easy to deploy:
- Because it’s a dockerized application.
- You can spin up your own working server in 10 minutes in AWS Elastic
Beanstalk or the DigitalOcean Ubuntu Droplets.
- More in the documentation.
@sadok_f
@ImINaBAR
http://flyimg.io

7. How it works:
- You pass the parameters / The image link
https://oi.flyimg.io/upload/w_300,h_250/https://oi.flyimg.io/faces.jpg
@sadok_f
@ImINaBAR
http://flyimg.io

8. Parameters List:
@sadok_f
@ImINaBAR
http://flyimg.io
moz: mozjpeg
q: quality
o: output
unsh: unsharp
fc: face-crop
fcp: face-crop-position
fb: face-blur
w: width
h: height
c: crop
bg: background
st: strip
rz: resize
g: gravity
f: filter
r: rotate
sc: scale
sf: sampling-factor
rf: refresh
ett: extent
par: preserve-aspect-ratio
pns: preserve-natural-size
webpl: webp-lossless
gf: gif-frame
e: extract
p1x: extract-top-x
p1y: extract-top-y
p2x: extract-bottom-x
p2y: extract-bottom-y

9. Original image:
@sadok_f
@ImINaBAR
http://flyimg.io

10. Examples:
- Image: https://oi.flyimg.io/faces.jpg
- Width: 300
- Height: 250
https://oi.flyimg.io/upload/w_300,h_250/https://oi.flyimg.io/faces.jpg
@sadok_f
@ImINaBAR
http://flyimg.io

11. @sadok_f
@ImINaBAR
http://flyimg.io

12. Examples:
- Image: https://oi.flyimg.io/faces.jpg
- Width: 200
- Height: 250
- Crop: 1
- Rotate: 90
https://oi.flyimg.io/upload/w_200,h_250,c_1,r_90/https://oi.flyimg.io/faces.jpg
@sadok_f
@ImINaBAR
http://flyimg.io

13. @sadok_f
@ImINaBAR
http://flyimg.io

14. More examples:
- Face detection crop
- Face detection blur
@sadok_f
@ImINaBAR
http://flyimg.io

15. Face detection crop:
https://oi.flyimg.io/upload/fc_1/https://oi.flyimg.io/faces.jpg
@sadok_f
@ImINaBAR
http://flyimg.io

16. Face detection blur:
https://oi.flyimg.io/upload/fb_1/https://oi.flyimg.io/faces.jpg
@sadok_f
@ImINaBAR
http://flyimg.io

17. The Refresh option: rf_1
- Refresh the image (fetch it again from the origin)
- Debug props (in the Response Headers)
im-command:
/usr/bin/convert /var/www/html/var/tmp/original-c8ef920665ea6cf65500e8b8fb0abb5a -thumbnail '300'x'250''>' -
colorspace 'sRGB' -strip TGA:- | '/opt/mozjpeg/bin/cjpeg' -quality '90' -outfile
'/var/www/html/var/tmp/dfa74e5939654c9b71cd05a1579b4b53-5af68e4bb18512.33417420.jpg' -targa
im-identify:
/var/www/html/var/tmp/dfa74e5939654c9b71cd05a1579b4b53-5af68e4bb18512.33417420.jpg JPEG 300x169
300x169+0+0 8-bit sRGB 19.4KB 0.010u 0:00.009
@sadok_f
@ImINaBAR
http://flyimg.io

18. More options:
- Gif manipulation
- Security (restricted domains)
- Hashed file paths
- Auto file format (depending on browsers request headers)
- Local and remote storage of source files and output files
- ...
https://github.com/flyimg/flyimg
@sadok_f
@ImINaBAR
http://flyimg.io

19. @sadok_f
@ImINaBAR
http://flyimg.io
A special thanks to JetBrains for their support!

20. Grazie!
@sadok_f
@ImINaBAR
http://flyimg.io