Convert Between TIFF and WEBP File Formats with NodeJS

August 15, 2019/NodeJS

Introduction

Do you need to convert TIFF images to a WEBP format? Or WEBP files to a TIFF format? This article will walk you through how to do that quickly and easily using Node.js and the Sharp NPM package.

Let's get started!

Table of Contents

Install Sharp NPM Package

First, you need to install the NPM package. You can install it with either the NPM or Yarn command below:

NPM:
    
      npm install sharp --save
Yarn:
    
      yarn add sharp

Now we're ready to start writing some code and converting images!

Convert TIFF to WEBP

Let's convert a TIFF file to a WEBP format first. Make sure you have a TIFF file in the root of your project directory that you want to convert to a WEBP.

Here's the full code:

    
      const sharp = require("sharp")

      sharp("file.tiff")
        .webp()
        .toFile("new-file.webp")
        .then(function(info) {
          console.log(info)
        })
        .catch(function(err) {
          console.log(err)
        })

Let's break down each part of the code:

  1. First, we import the sharp NPM package and hold it in the sharp variable.
  2. Then, we use the sharp package to read our file.tiff file, convert it to a WEBP and write the new WEBP file to your directory with the .toFile() function.
  3. The sharp method is a promise and we use it to get the info for the file once it has been written to our directory.
  4. Last, we use .catch() method to catch and console.log() any errors.

When you run the code, you should get a similar output to this:

    
      {
        format: 'webp',
        width: 2500,
        height: 527,
        channels: 3,
        premultiplied: false,
        size: 20904
      }

And you should see the new-file.webp file written to your directory.

There are also additional options you can pass to the .webp() method to alter the output image. These include the compression level, quality, colors, and more. You can check them out in their documentation.

Here is an example of how to add different options to the .webp() function:

    
      const sharp = require("sharp")

      sharp("file.tiff")
        .webp({quality: 50, lossless: true})
        .toFile("new-file.webp")
        .then(function(info) {
          console.log(info)
        })
        .catch(function(err) {
          console.log(err)
        })

We simply added an object with values inside the .webp() function. If you run that code, you'll see that the image output will have different qualities.

Convert WEBP to TIFF

Now let's convert a WEBP file to a TIFF format. Make sure you have a WEBP file in the root of your project directory that you want to convert to a TIFF.

Here's the full code:

    
      const sharp = require("sharp")

      sharp("file.webp")
        .tiff()
        .toFile("new-file.tiff")
        .then(function(info) {
          console.log(info)
        })
        .catch(function(err) {
          console.log(err)
        })

Here's the break down each part of the code:

  1. First, we import the sharp NPM package and hold it in the sharp variable.
  2. Then, we use the sharp package to read our file.webp file, convert it to a TIFF and write the new TIFF file to your directory with the .toFile() function.
  3. The sharp method is a promise and we use it to get the info for the file once it has been written to our directory.
  4. Last, we use .catch() method to catch and console.log() any errors.

When you run the code, you should get a similar output to this:

    
      {
        format: 'tiff',
        width: 2500,
        height: 527,
        channels: 3,
        premultiplied: false,
        size: 67022
      }

And you should see the new-file.tiff file written to your directory.

There are also additional options you can pass to the .tiff() method to alter the output image. These include the compression level, quality, and more. You can check them out in their documentation.

You can pass the options object to the .tiff() function the same way as the previous example.

Conclusion

Now you know how to convert back and forth between TIFF and WEBP files using Node.js and the Sharp NPM package!

Thanks for reading and happy coding!