目次
問題の発生
Gulpビルドでgulp-webpを使ってJPEG画像をWebP形式に変換する際、以下のエラーが発生しました。
エラーメッセージ:
PluginError: libjpeg error: Unsupported color conversion request Error! Could not process file /private/var/folders/.../[temp-file] fileName: '/Users/pumi/Desktop/shopify/dev/assets/img/cr106-black.jpg'
原因の特定
fileコマンドで画像ファイルの詳細を確認したところ、問題が明らかになりました。
エラーが出たファイル
$ file cr106-black.jpg JPEG image data, ..., components 4
正常に変換できたファイル
$ file cr106-black-back.jpg JPEG image data, ..., components 3
原因: CMYK色空間（4コンポーネント）のJPEGファイルは
cwebpで正しく処理できません。通常のRGB形式（3コンポーネント）である必要があります。
解決方法
1. ImageMagickのインストール
Homebrewを使ってImageMagickをインストールします。
brew install imagemagick
2. バックアップの作成
念のため、元の画像をバックアップしておきます。
cd ~/Desktop/shopify/dev/assets/img/ cp -r ~/Desktop/shopify/dev/assets/img ~/Desktop/shopify/dev/assets/img_backup
3. 画像を一括でRGB形式に変換
すべてのJPEG画像をRGB（3コンポーネント）に変換します。
cd ~/Desktop/shopify/dev/assets/img/
for file in *.jpg; do
if [ -f "$file" ]; then
echo "Converting: $file"
magick "$file" -colorspace sRGB -strip "${file}.tmp"
mv "${file}.tmp" "$file"
fi
done
注意: ImageMagick 7では
convertコマンドは非推奨になっており、magickコマンドを使用することが推奨されています。
4. ビルドの実行
変換後、Gulpビルドを再実行します。
cd ~/Desktop/shopify/dev npx gulp build
結果: すべての画像が正常にWebP形式に変換されました！
確認方法
個別のファイルがRGB形式になったか確認するには：
file cr106-black.jpg
components 3と表示されればOKです。
まとめ
gulp-webp（cwebp）はCMYK形式のJPEGを処理できないfileコマンドでcomponents 4と表示される画像はCMYK形式- ImageMagickを使ってRGB形式（sRGB）に変換することで解決
- 一括変換スクリプトで複数ファイルを効率的に処理可能
参考: この問題は、PhotoshopやIllustratorなどのプロフェッショナルな画像編集ソフトで保存したJPEGに発生することがあります。特に印刷用途でCMYK形式を使用している場合に注意が必要です。
