A story about creating a program that can convert various images into a specific format in one go
I created a tool for editorial staff that automatically formats images for publishing on GIGAZINE. Since I had the chance, I wrote an article on how to make it.
There are many ways to convert images, but this time we will use the JavaScript library 'sharp.'
sharp-npm
First, install Node.js to prepare your development environment. On the Node.js download page, click 'Prebuilt Installer' and then click 'Download Node.js v○○.○○.○'.
Double-click the downloaded msi file to run it.
The Node.js setup wizard will start, so click 'Next'.
Accept the license and click Next.
Check the installation folder and click 'Next'.
You can set what to install, but this time just click 'Next' without changing anything.
Click “Next”.
Click Install.
Once the installation is complete, click 'Finish' to close the installer.
Next, we will set up the necessary libraries. Start the command prompt, move to the working folder with the 'cd' command, and enter the following command.
[code]npm init -y
npm install sharp@^0.29.3 fs-extra[/code]
Using Explorer, create a file named 'index.js' in the working folder, open it in a text editor such as Notepad, and enter the code below.
[code]const fs = require('fs-extra');
const sharp = require('sharp');
const dirname = process.cwd();
const input = fs.readFileSync(dirname + '/00.png');
sharp(input).toFile(dirname + '/00.webp');[/code]
Save the experimental file as '00.png' in the working folder, then return to the command prompt and run the command 'node index.js', which will generate '00.webp' as shown below. Sharp's standard settings perform lossy compression at quality '80'. The original '00.png' was 81KB, but the size has been reduced to 23KB.
As it is, only image files with the same name can be converted each time, so you can set the file you want to convert with arguments. In Node.js, the entire command is separated by spaces and assigned to 'process.argv', and the first two elements of the array are 'node' and 'index.js', so you can process the contents of 'process.argv' in order using a for statement as shown below.
[code]const fs = require('fs-extra');
const sharp = require('sharp');
const dirname = process.cwd();
for(let i=2; i<process.argv.length; i++){
const fileName = process.argv[i]; // Example: 00.png
const input = fs.readFileSync(dirname + '/' + fileName);
const baseFileName = fileName.split('.')[0]; // Example: 00
sharp(input).toFile(dirname + '/' + baseFileName + '.webp');
}[/code]
Now, if you specify a file like 'node index.js 00.png', it will be converted to WebP format. Also, if you want to convert to AVIF format, which is said to have an even higher compression rate than WebP, change the extension to '.avif'.
The image in AVIF format looks like this. Sharp's standard setting is lossy compression with quality '50'. The size of the WebP format image was 23KB, but with AVIF it was even lighter at 11KB. If you have any problems displaying the AVIF format image below, please let us know your device type and browser information in the 'Spot a typo' form at the bottom of this article '
The PNG image that was converted looks like this. It is hard to tell from the naked eye what is different from the AVIF image above.
AVIF has a higher compression rate, but when considering adopting it at GIGAZINE, there are problems such as the fact that AVIF is set to be supported by major browsers in 2024, but its population coverage rate is only 93.35%, and when you try to open an image in a separate tab to enlarge it, depending on the browser, it will be downloaded instead.
It's been a while since WebP became the baseline, and the population coverage rate is 96.4%. There are no problems with enlarged display. So, from here on, we will focus on converting to WebP.
The general flow of the program is complete, and it seems that it will be usable without any problems if the details are worked out. However, since it is difficult for editorial staff who are not IT engineers to use the program as it is, next time we will make the created program into an executable file so that it can be distributed.
This article was created using WebP format images, except for one image that was posted as an example of the AVIF format. If you have any problems with the display, please report them to us using the 'Spot the typo' form at the bottom of this page: https://gigazine.net/news/20241005-image-webp-avif/ . This will allow you to contact the person in charge directly.
Become a member and support GIGAZINE
Related Posts:
