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

Last time, I created a program to format images in various formats such as PNG and JPEG into formats such as WebP and AVIF. This time, GIGAZINE’s editorial staff will use a library called “pkg” to format it into an executable file so that anyone can use it easily.

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

Please check the article below to learn more about the contents of the program and environment construction.

A story about creating a program that can format various images into a specific format in one go – GIGAZINE

First, install the pkg library by typing the command “npm install pkg”. Once installed, open package.json with a text editor and change the “scripts” item to “build”: “pkg -t latest-win -o bin/webp.exe index.js” as shown below. Rewrite.

Save package.json and type “npm run build” to export the program as an executable file named “webp.exe”. However, this time I got a warning saying “Some files could not be included in the executable.”

As specified in the warning message, create a folder called “sharp” in the folder where “webp.exe” is located, and copy the folders “build” and “vendor” in “sharp” in the “node_modules” folder. .

Since it is a command line tool, the correct method is to start it using the command line, but in Windows, by dragging and dropping a file, you can run the command line tool with that file as an argument. Drag the file to “webp.exe” and drop it with “Open in Node.js JavaScript Runtime” written on it.

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

A fallback PNG image is also generated so that the site can be viewed with browsers that do not support the WebP format. If you use the original PNG image as is, the file size will be large, so sharppng()” to create a palette.

If you build it again, make it an executable file, and convert the prepared images all at once, it will look like this.

If you upload these images and use the HTML tags below, WebP format images will be displayed on browsers that support WebP, and PNG format will be displayed on browsers that do not support WebP. In this article, all images are displayed in this tag format.

If there is something strange about the display of this article,This article page “I created a tool to convert image files into WebP format in one go”If you contact us using the “Report typographical errors” form at the bottom while displaying , you will be able to contact the person in charge directly, so we would appreciate your cooperation.