Batch Convert Images to Webp in Hugo

Today, I had some free time and decided to compress the images in my Hugo site to Webp format.

Previously, images were mainly in png, jpg, and jpeg formats. While using simple image editors on Windows, I noticed that many photos were quite large in size, especially screenshots taken on my 4K monitor, which often exceeded 3 million pixels, resulting in large file sizes.

My Hugo directory once exceeded 3GB, which is not very friendly to Github’s free repository, as the recommended capacity for free repositories is between 1-5GB. Additionally, it consumes extra bandwidth, which is not conducive to the long-term stable operation of the blog.

Webp can significantly reduce image size. I tested some Windows screenshots around 5MB, and they were compressed to less than 300KB, making it the best image format for the web today.

Webp Format

So, I started looking for conversion solutions.

Conversion Requirements

My requirements were quite simple: convert all jpg, jpeg, and png images in the Hugo Content directory to Webp and replace the original files.

DeepSeek Failed to Deliver

I opened the commonly used domestic AI, DeepSeek, and it immediately provided an answer.

Install cwebp on Windows Download the precompiled binary from the Google WebP official page and add it to the system’s PATH environment variable.
Write a batch script Create a new batch file (.bat), for example, convert_to_webp.bat, and copy the following content into it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@echo off
setlocal enabledelayedexpansion

:: Define the input directory
set input_dir=D:\Hugo\content

:: Traverse the input directory and its subdirectories
for /r "%input_dir%" %%f in (*.jpg *.jpeg *.png) do (
    set "filename=%%~nf"
    set "extension=%%~xf"
    set "output_file=%%~dpnf.webp"

    :: Convert the file to webp format
    cwebp "%%f" -o "!output_file!"
)

echo Conversion complete
pause

Run the batch script Save the convert_to_webp.bat file to your preferred directory and run the script in the command prompt: convert_to_webp.bat

However, this did not work as expected. Although the images were converted, they were all saved in the directory where the bat file was located. So, I started working on solving this issue.

Unfortunately, after several attempts on DeepSeek, I couldn’t achieve the desired result. The provided bat script always converted the files to the bat file’s directory and did not replace the original files.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@echo off
setlocal enabledelayedexpansion

:: Define the input directory
set input_dir=D:\Hugo\content

:: Traverse the input directory and its subdirectories
for /r "%input_dir%" %%f in (*.jpg *.jpeg *.png) do (
    set "filename=%%~nf"
    set "extension=%%~xf"
    set "output_file=%%~dpn!filename!.webp"

    :: Convert the file to webp format
    cwebp "%%f" -o "!output_file!"

    :: Delete the original file
    del "%%f"

    :: Rename the webp file to the original filename
    ren "!output_file!" "!filename!!extension!"
)

echo Conversion complete
pause

Additionally, since some folders had png, jpg, and webp files with the same names, I wanted to append a letter to each generated file name to avoid conflicts and make it easier to batch replace file extensions in VSCode.

Unfortunately, this also didn’t work.

Tongyi Qianwen and Zhipu Qingyan Also Failed

Tongyi Qianwen provided the following solution:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@echo off
setlocal enabledelayedexpansion

REM Set the path to cwebp (if not in the PATH environment variable)
REM set CWEBP_PATH=C:\path\to\your\cwebp.exe

REM Set the source directory
set SOURCE_DIR=D:\Hugo\content

REM Start traversing the directory for images
for /r "%SOURCE_DIR%" %%f in (*.png *.jpg *.jpeg) do (
    REM Get the full file name and file name (without extension)
    set "file=%%f"
    set "filename=%%~nf"
    set "webp_file=%%~dpnwf.webp"  %%%% dp = drive and path, n = name, f = extension
    
    REM Execute the cwebp command to convert
    if defined CWEBP_PATH (
        "!CWEBP_PATH!" -q 75 "%%f" -o "!webp_file!"
    ) else (
        cwebp -q 75 "%%f" -o "!webp_file!"
    )
    
    REM Check if the conversion was successful, if so, delete the original file
    if exist "!webp_file!" (
        del "%%f"
    ) else (
        echo Failed to convert: %%f
    )
)

echo Conversion completed.
pause

But the problem remained; the original files were not replaced. The new images were generated in the directory where the bat file was located, and the original files were deleted.

Zhipu Qingyan had a similar issue. The provided bat code even failed to run initially.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
@echo off
setlocal enabledelayedexpansion

REM Set the path to the cwebp tool
set "cwebp_path=cwebp.exe"

REM Set the directory for image conversion
set "source_dir=D:\Hugo\content"

REM Traverse all files in the directory
for /r "%source_dir%" %%i in (*.png *.jpg *.jpeg) do (
    REM Set the converted webp file name
    set "output_file=%%~dpni.webp"
    
    REM Convert the image
    "%cwebp_path%" "%%i" -o "%%~dpni.webp" -q 80
    
    REM Delete the original image
    del "%%i"
    
    REM Rename the webp file to replace the original file name
    ren "%%~dpni.webp" "%%~nxi"
)

echo Image conversion completed.
endlocal

The Correct Solution Came from ChatGPT

In the end, I had to turn back to ChatGPT, using ChatGPT 3.5, which provided a more concise script.

I initially thought it was a bluff.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
@echo off
setlocal enabledelayedexpansion

for /r %%i in (*.jpg *.jpeg *.png) do (
    set "newFile=%%~dpi%%~ni.webp"
    cwebp -q 80 "%%i" -o "!newFile!"
    del "%%i"
    rename "!newFile!" "%%~nxi"
    echo Converted %%i to "%%~nxi"
)

echo All images converted and originals deleted.
pause

ChatGPT

Surprisingly, ChatGPT’s script ran smoothly.

However, during the process, I noticed something strange: the image files still appeared to be the original files, seemingly not converted.

It wasn’t until I checked the folder size that I realized the size had indeed decreased.

It turns out that ChatGPT’s solution converted the jpg, png, and jpeg files to Webp and replaced the original files without changing the file names, keeping the original file extensions. The files still looked like jpg or png, but their content had been converted to Webp.

This way, I only needed to convert the images in the Content folder, and the image extensions in the blog’s md files didn’t need to be modified.

The simplest solution is often the best.

After this compression, my Hugo Content folder was reduced to 150MB, and after generating the public and resources folders, the total size was only 780MB, a significant improvement compared to before.