Compressing your web app's images using the tinyJpg API.

While working on a Progressive web app, I ran lighthouse tests and I sorta failed woefully on the part of optimizing my images, so I set out to find ways of compressing and optimizing images.

So while searching google for ideas and solutions, I stumbled upon this article written by Richard Lazazzera(my namesake). The article was well detailed and contained almost all the information I needed to move forward.

On the article he listed several image compression services/apps. E.g
TinyJpg
Compressor.io
ImageOptim.

Also, reducing the size of your images to fit your site's specifications can go a long way in optimizing your images and speeding up your site. You can check out the article for the full gist, but I'm going to talk about how to use TinyJpg to compress images for your website or web app.

So before I settled for tinyJpg, I tried out several other image compression services/apps, but I stuck with TinyJpg because they provided a well detailed API for developers. They have client libraries in various languages like Ruby, PHP, node, JS, Python, Java and .NET. I mostly work with python and JS, so for the sake of this post, I'll make use of their NodeJS module.

Before I continue, this post is based off my personal opinion and I'm in no way affiliated with TinyJpg/TinyPNG.

Now to the business end. To install tinify, run the command below.

npm install tinify --save

To make use of their API, you'll need to acquire an API key. You just need to provide a username and email to sign up and you're up and running.

With the tinyJpg API, you can compress, resize images from your system and external urls, you can save the compressed image to amazon S3 and other exciting options, you can find the detailed documentation here. You can compress 500 images/month for free and after that you pay $0.002 per image for the next 10,000 images.

Now that we're through with all the jibi jabba, let's take it for a spin. I'm going to create a file called compress.js and we'll enter the code below into it.

//compress.js

var tinify = require('tinify');

tinify.key = YOUR_API_KEY

var source = tinify.fromFile("unoptimized.jpg");
source.toFile("optimized.jpg");

Okay let me explain all the craziness going on here, we first require tinify and then we provide our API_KEY that is on our developer section on tinyJpg's website. Then we ask tinify to compress an image named "unoptimized.jpg" and save it as "optimized.jpg". It is as simple as that.

We can use this even in complex cases where we need to compress a whole folder of images. Here we'll make us of the fs node module.

//compress.js

var tinify = require('tinify'),
    fs = require('fs');

tinify.key = YOUR_API_KEY

let folderName = './dev/images/',
    destFolder = './dist/images/';

fs.readdir(folderName , (err, files) => {
    if (err) {
        console.log(err);
        return;
    }

    files.forEach(file => {
        let fileName = `${folderName }${file}`,
            compressedFile = `${destFolder}${file}`;
        if (fileName.includes('.jpg') || fileName.includes('.png') || fileName.includes('.jpeg')) {
            let source = tinify.fromFile(fileName);
            source.toFile(compressedFile);
        }
   })
});

In this second example, we're basically compressing all the images in our dev/images folder and saving them in our dist/images folder. You can save up to 80% data because of compression, and you can do this with just a few lines of code

The tinify module is an exciting one, you can include it in your npm run scripts or even a build tool like gulp, the options are limitless. You can have a look at the documentation page for the node package here, run wild with it I suggest. I hope you enjoyed this post as it is my first on dev.to.