ImageMagickを使ってWebP形式の画像を作る

## WebPとは
ウェッピー（ウェブピー？）とよむ
GoogleがWeb用に作った画像形式で、jpegやpngよりファイルサイズが軽量でWebサイトに利用されることが多い。
サイトを見る側にも通信量が少なく、表示も早いのでメリットしかない。

普段から画像変換にはImageMagickを使用しているので、ImageMagickでの変換をしてみた。

環境は　
- Windows 10 Pro 22H2(19045.4529)

## 最新バージョンのImageMagickのインストール
https://imagemagick.org/

- Windowsなので下記から、一番上のexeをDL
- https://imagemagick.org/script/download.php#windows
    - ImageMagick-7.1.1-33-Q16-HDRI-x64-dll.exeを実行
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/4ee8758a-e5ea-7f9e-f281-c205bdfe4bd8.png)
    - I accept the agreement を選びNext
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/c21e6296-4036-47b2-6143-fe58f95138e3.png)
    - Next
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/0ff00d61-73cb-0b75-7118-b1fb22f00db8.png)
    - PATHは自分で設定したいので、全部チェックを外してNext
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/90978d14-8364-c677-de3d-e5e062df4b6b.png)
    - Install
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/ea210873-b575-9689-076a-af824f0207a9.png)
    - Next
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/aead1258-921a-1a05-1bb2-b80814d10593.png)
    - チェックを外して、Finish

- 「C:\Program Files\ImageMagick-7.1.1-Q16-HDRI」にインストールされているのでPATHを設定する。
- PC設定から上記フォルダのパスを環境変数のPATHに追加する。（再起動）
- 以前のバージョンがある人は、前のバージョンはPATHから削除して、アンインストールする。

## コマンドプロンプトでバージョンの確認
```
D:\>magick --version
Version: ImageMagick 7.1.1-33 Q16-HDRI x64 057259c:20240525 https://imagemagick.org
Copyright: (C) 1999 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Channel-masks(64-bit) Cipher DPC HDRI Modules OpenCL OpenMP(2.0)
Delegates (built-in): bzlib cairo flif freetype gslib heic jng jp2 jpeg jxl lcms lqr lzma openexr pangocairo png ps raqm raw rsvg tiff webp xml zip zlib
Compiler: Visual Studio 2022 (193933523)

```

## 変換できる形式の確認

```
> magick identify -list format
    ~ 他省略 ~
     WEBP* WEBP      rw+   WebP Image Format (libwebp 1.4.0 [020F])
```

## ImageMagickによるPNG画像からWebPへの変換

適当にwizard.pngと言うファイル名のpng画像を用意して
```
> magick wizard.png -quality 50 -define webp:lossless=true wizard.webp
```
- quality 50
変換後のWebP画像の画質を50%に設定します。100%が最高画質で、数値が小さいほどファイルサイズは小さくなりますが、画質も低下します。**ファイルサイズは同色が多かったりする画像だと一概に小さくなるとは言えない。**

- define webp:lossless=true
変換後のWebP画像を非可逆圧縮ではなく可逆圧縮で保存します。可逆圧縮では、元の画像情報と完全に一致する画像を生成できますが、ファイルサイズは大きくなります。

- その他のエンコードオプションは公式サイトを参照
https://imagemagick.org/script/webp.php

## Google公式のWebPのダウンロードとインストール
ImageMagickのサイトによると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/2b8903ab-38d8-6df9-b0aa-fc2378c4ba36.png)
とある。
アニメーションPNGなどの場合は、muxing delegate libraryが必要とのこと。
Requires the [WEBP](https://developers.google.com/speed/webp/download?hl=ja) delegate library. のところをクリックすると、Googleの公式のWEBP変換に関するモジュールのサイトにリンクしている。

**アニメーションPNGのWebP変換はImageMagickはできない**

- Windows版のダウンロードをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546030/82f51dbe-70d7-71b9-6a27-ee4dbda9863e.png)
- libwebp-1.4.0-windows-x64.zipがダウンロードできた
- zipを展開してbinフォルダ内にcwebpなどの.exeファイルがある

- 普段コマンドで使える用にしたいため、PATHの通っているフォルダに移動しておく

## Google公式のJPEG画像からWebPへの変換
```
cwebp -q 80 image.png -o image.webp
```
https://developers.google.com/speed/webp/docs/using?hl=ja