Nov 02, 2024 23:15:00

I created a tool to convert image files to WebP format in one go and made it into an executable file

Last time, we created a program to convert various image formats such as PNG and JPEG into formats such as WebP and AVIF. This time, we will convert it into an executable file format using a library called 'pkg' so that anyone can easily use it.

pkg-npm

https://www.npmjs.com/package/pkg

For information about the contents of the program and how to set up the environment, please check the article below.

A story about creating a program that can convert various images into a specific format in one shot - GIGAZINE

First, enter the command 'npm install pkg' to install the pkg library. Once installed, open package.json in a text editor and change the 'scripts' section to the following: 'build': 'pkg -t latest-win -o bin/webp.exe index.js'.

Save package.json and type 'npm run build' to write the program as an executable file named 'webp.exe'. However, this time a warning message appears saying 'Some files could not be included in the executable file'.

As specified in the warning message, create a folder called 'sharp' in the folder containing 'webp.exe', and copy the 'build' and 'vendor' folders from 'sharp' in the 'node_modules' folder.

Since it is a command line tool, the correct way to start it is to use the command line, but in Windows, you can drag and drop a file to run the command line tool with that file as an argument. Drag the file onto 'webp.exe' and drop it with the message 'Open with Node.js JavaScript Runtime' written on it.

Then, a folder called 'dist' appeared in the folder where the image file was, and the image converted to WebP format was generated.

A fallback PNG image is also generated so that the site can be viewed in browsers that do not support the WebP format. Since the original PNG image would be too large to use as is, I paletted it using sharp's '

png() '.

Build it again to make it an executable file, and convert all the images you have prepared together to look like this.

If you upload these images and use the HTML tag below, the images will be displayed in WebP format in browsers that support WebP, and in PNG format in browsers that do not. All images in this article are displayed in this tag format.
[code]<picture>
<source srcset='https://i.gzn.jp/img/2024/11/02/webp-png-fallback-exe/00.webp' type='image/webp'/>
<img src='https://i.gzn.jp/img/2024/11/02/webp-png-fallback-exe/00.png' alt='' style='max-width:560px;' border='0'/>
</picture>[/code]

If you notice anything strange about the display of this article, please contact us using the 'Report a typo' form at the bottom of the article page 'I made my own tool to convert image files to WebP format in one go. ' This will allow you to contact the person in charge directly. We would appreciate your cooperation.