This is a simple script that compresses images and converts them to WebP and Avif format. The output folder will include both the original images and their WebP and Avif versions - both compressed. Your original image folder will remain untouched. GIFs will be converted to WebM and mp4.
Prior to using for the first time - open the path to the ticket repo in the terminal and run:
npm install
⚠️ NoteIn order to convert gif to webm, you'll need ffmpeg installed on your machine. If you don't have it, you can install it with Homebrew:
brew install ffmpeg
(MacOS only). See the ffmpeg not found section below for more details and instructions for Windows.
-
In the folder for your current ticket, create an
images
folder and place your original images in it -
From the same folder, run the following command:
npm run images
-
The app will run and create a folder named
compressed
at the same level as your images folder.- Inside the
compressed
folder, you will find the compressed images and their corresponding conversions.
- Inside the
That's it! Your images are now compressed and available in both their original format and as WebP and Avif versions.
Adjust the image quality:
Some brands are pickier than other others about their images being blurry. If you need to adjust the image quality, you can do so by following these steps:
- By default, the image quality is set to 80. To change it, provide a command-line argument when running the script.
- Specify the desired image quality as an integer between 10 and 99.
- For example, to set the image quality to 70, run the following command:
Note: GIFs are not affected by the image quality setting
npm run images:quality 70
If you encounter an error stating "ffmpeg not found", it's likely that either:
- You haven't installed ffmpeg.
- ffmpeg is installed but not accessible in your PATH.
If you installed ffmpeg with Homebrew, ensure it's in your PATH by adding the following command to your shell startup file (e.g., ~/.zshrc or ~/.bash_profile):
export PATH="/opt/homebrew/bin:$PATH"
After adding the above line, restart your terminal or source your startup file:
source ~/.zshrc
If you're using the built in terminal in vscode and it still doesn't work, you may need to explicity set the PATH in your vscode settings. To do that, open your vscode settings and add the following line to your settings.json file:
"terminal.integrated.env.osx": {
"PATH": "/opt/homebrew/bin:$PATH"
}
You can verify that it worked by running which ffmpeg
in your terminal. If it worked, you should see the following output:
/opt/homebrew/bin/ffmpeg
On Windows, the process of adding an executable like ffmpeg
to your PATH
so that it's recognized in any command prompt or terminal window is different from macOS. Here's a step-by-step process to achieve the equivalent result on Windows:
- Download
ffmpeg
for Windows from its official download page. - Extract the downloaded ZIP file to a location on your computer. For example,
C:\ffmpeg
.
- Right-click on the Start button and select
System
. - Click on
Advanced system settings
on the right panel. - In the
System Properties
window, click on theEnvironment Variables
button. - In the
Environment Variables
window, highlight thePath
variable in the "System variables" section and click on theEdit
button. - In the
Edit Environment Variable
window, click on theNew
button and then paste in the path to thebin
directory inside where you extractedffmpeg
. If you extractedffmpeg
toC:\ffmpeg
, the path to add would beC:\ffmpeg\bin
. - Click
OK
to close each window.
Open a new Command Prompt or PowerShell window and type:
ffmpeg -version
This should display the version of ffmpeg
you installed, indicating that the program is accessible from the command line.
If you're using the integrated terminal in Visual Studio Code and it doesn't recognize ffmpeg
even after adding it to the system PATH
, ensure that you restart Visual Studio Code. If there's still an issue, you can try adding the path explicitly to VSCode's settings:
- Open VSCode settings (
File
>Preferences
>Settings
orCtrl
+,
). - Search for "terminal.integrated.env" in the search bar.
- Add the following setting (modify the path if you installed
ffmpeg
in a different location):
"terminal.integrated.env.windows": {
"PATH": "C:\\ffmpeg\\bin;$PATH"
}
- Save and restart VSCode.
This process ensures that ffmpeg
is globally accessible from any command prompt or terminal on your Windows machine, as well as from within the integrated terminal in Visual Studio Code.