Unpacking Flyimg 1.3.0: AVIF format, Smart cropping, New demo page, and more!

Sadok — Thu, 14 Dec 2023 21:19:54 +0000

Introduction:

Embarking on a new journey with Flyimg 1.3.0, let's uncover the latest enhancements that keep this open-source image processing tool at the forefront of innovation. Revisiting the landscape explored in a previous dev.to article, we'll delve into Flyimg's new features, including AVIF support, a smart cropping flag, an interactive demo page, and its steadfast use of the Mozjpeg library for JPEG compression, along with the ability to generate WebP format.

AVIF Support:

Flyimg 1.3.0 now boasts support for the AVIF format, aligning itself with the cutting edge of image compression technology. AVIF brings forth superior quality and efficient compression, presenting developers with a potent option to optimize visuals without compromising loading times. Flyimg's embrace of AVIF enhances its capabilities, ensuring that it remains a versatile and future-proof tool for image processing.

Smart Cropping Flag:

Bid farewell to manual adjustments as Flyimg introduces the smart cropping flag in version 1.3.0. This intelligent feature takes the hassle out of fitting images to various layouts by automatically selecting the most relevant portion. Regardless of screen sizes or aspect ratios, the smart cropping flag ensures that your images consistently look impeccable, requiring minimal effort from developers.

Interactive Demo Page:

Version 1.3.0 introduces an interactive demo page, transforming theoretical discussions into hands-on experiences. Developers and enthusiasts can now experiment with Flyimg's features in real-time, tweaking parameters and witnessing immediate results. The demo page not only makes image manipulation accessible but turns it into an enjoyable journey for users exploring the capabilities of Flyimg.

Mozjpeg and WebP:

Flyimg 1.3.0 continues its commitment to high-quality JPEG compression by leveraging the Mozjpeg library. This ensures that Flyimg maintains its standards in delivering optimized and visually appealing JPEG images. Additionally, Flyimg doesn't stop at JPEG—it also supports the generation of WebP format, providing developers with a versatile range of options for efficient image delivery.

Conclusion:

Flyimg, an open-source project since 2016, has seen gradual growth, with a notable nod from one company in the Adapters.md file. While contributions are modest, Flyimg remains a reliable tool in image processing. In the realm of web development, its steady journey reflects the enduring power of simplicity and reliability.

Flyimg: Dockerized application to resize and crop images on the fly.

Sadok — Tue, 29 May 2018 16:00:03 +0000

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 microservice that will resize, crop, transform and compress images on the fly

What it does

Get images from anywhere on 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 known 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 on the cheapest servers you can get.

Of course, there are a hundred services that will get your money to do it. Also, some open-source projects will do a bunch of things, many with way more features, but they are hard to set up 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://demo.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:

DEV Community: Sadok