Rino Puji Blog

Hanya Sebuah Blog untuk mengisi masa lapang

Script ringkas untuk convert gambar ke Webp (Node)

Post ini telah di update pada 05 June 2025.

Senarai Kandungan

  1. Problem
  2. Solution
  3. Pastikan node dah di install
  4. Preparation
  5. Run script
  6. Output
  7. Note


1.Problem

Problem/isu yang aku hadapi ialah,kebiasaanyer,aku akan convert gambar kepada Webp menggunakan online converter.Isu akan berlaku sekiranya internet aku problem/slow dan masa yang di ambil akan menjadi panjang sekiranya file gambar dalam kuantiti yang banyak.


2.Solution

Jadi aku ambil keputusan,untuk buat je sendiri node script yang akan bantu aku untuk conver file gambar kepada webp tanpa perlu bantuan online converter.


3.Pastikan node telah di install

Script yang aku buat ni,memerlukan node untuk running.Jadi machine yang kita gunakan,perlu ade node.
https://nodejs.org/en/download


4.Preparation

Pertama sekali download script yang aku dah prepare kat sini : https://github.com/RinoPuji/NodeJpgtoWebp

Kita ada 2 option :

4.1 Fresh installation

  1. Buat Folder baru sebagai contoh : 

    mkdir C:\Users\Rin0\Desktop\Test

  2. cd ke folder tersebut : 

    cd C:\Users\Rin0\Desktop\Test

  3. Init : 

    npm init -y

  4. Install sharp module : 

    npm install sharp

  5. Pindahkan convertwebp.js ke folder Test


4.2 Existing node project folder

Sekiranya kita dah ada node project folder,kita tak perlu nak init -y lagi.Sila pastikan folder node_modules dah tersedia pada root directory project tersebut.Contoh :

\Project\
 - node_modules
 - Project A
 - Project B
 - Project C

  1. Kita hanya perlu cd ker folder project tersebut dan install sharp modules. 

    cd C:\Users\Rin0\Desktop\Project
npm install sharp

  2. Untuk tidak memeningkan kepala di masa akan datang,kita buat la satu folder baru khas untuk script convertwebp.js. 

    cd C:\Users\Rin0\Desktop\Project
mkdir WebpConveter

  3. Dan pindahkan script convertwebp.js ke folder \Project\WebpConverter tadi.


5.Run script

  1. Sila pastikan gambar yang nak di convert berada dalam file yang sama dengan convertwebp.js.

Note 1 : Buat masa kini,anda perlu tukar manual nama file anda kepada "input.jpg"

Note 2 : Buat masa kini juga,script ini hanya boleh process 1 file dalam 1 masa

Update 05 june 2025 :
- Tak perlu tukar nama. ☑
- Script dah boleh process multiple file. ☑

  1. Pastikan kita cd terlebih dahulu ke directory convertwebp.js:

    cd C:\Users\Rin0\Desktop\Project\WebpConveter

  2. Semua dah ok,kita akan execute command

    node convertwebp.js

6. Output Folder

Output file gambar yang telah di convert akan berada di dalam folder converted_images :

webpoutput05062025


7. Note

Sila adjust sendiri quality yang di inginkan untuk webp output.Cari line di bawah pada script convertwebp.js :

const webpQuality = 1; // WebP quality