How I created a free image optimization service FlashImg.ru

Hi all. In this article I will tell you how I created a free image optimization service. FlashImg.ru

Why optimize images

Today, any website contains a huge number of images. The target audience of the service is webmasters.

The size of the site is determined by the amount of media content (images, video, audio).

First on this list are images. If you open the webmaster toolbar in your browser and look at the Network tab, you can see a picture like this:

A large number of loaded images directly affects the loading time of the site. Today, every millisecond of site loading is of particular importance in the super competitive race for visitors.

I won’t go into the details of image caching, but it’s a useful thing, but what should you do when loading a site for the first time?

Therefore, to optimize performance and reduce the size of sites, I strongly recommend image optimization to everyone.

This will make your site load faster and save a significant amount of disk space on image storage servers. Image optimization also plays a role in SEO, as effectively compressed images contribute to faster page loading speeds and improve your site's search engine rankings.

FlashImg – a completely free image optimization service. We do not have paid subscriptions or paid features. To use the functions of the service, you do not need to create an account or go through authorization; everything is available without registration.

Using the service, you can reduce the image size up to 2 times without losing quality.

A very simple and intuitive interface will help you optimize your images. The speed of optimization and ease of use will pleasantly surprise you.

Optimization example

The example shows that for JPG images we managed to save 67% from the original size.

What's under the hood

The service is written in Next.js + Tailwind as a basis for the UI and Express.js as a server API. Optimization based on library sharp.

We store an archive with images on our server 30 minutesthis allows you to maintain free and fast work.

Where is the application deployed?

Vercel is a cloud platform for developing, deploying and hosting web applications and static sites. Vercel is especially popular among React and Next.js developers, although it also supports other frameworks and technologies.

It turned out to be a very convenient tool for deploying a web application. All you need to do is log in to the service via github and give access to the repository with the project, and then it will automatically deploy the project when updating the main branch in git.

Very simple, convenient and understandable. The free version is enough for me, although there is also a paid version with detailed analytics and advanced settings and server characteristics. I deployed the server API on my VPS server, because… there I need additional configuration.

WebP format

WebP is an image format that uses advanced compression algorithms to reduce image size without loss of quality.

Using our service, you can convert an image of any format (JPG, PNG, GIF, AVIF) to WebP format.

WebP was developed by Google and is recommended for use on websites and applications.

FlashImg has the ability convert image to WebP and get an optimized image for the site.

Restrictions

There are currently optimization limitations. 100 images at a time, file size no more than 25 Mb and formats: jpg, png, gif, avif and webp.

Total

I will be glad to new users and feedback.

Optimize your images with FlashImg.

Thank you