こんにちは、GMOアドマーケティングのR.Yです。

今回はRubyでのWebP変換をしていきます。JPEGやPNGの画像をWebPに変換するだけでだいぶ容量が軽くなったのと、意外と変換が簡単にできたのでその方法を書いていこうと思います。

環境

MacBook Pro 11.6.2 (Apple M1)
Ruby 3.1.1
rmagick4.2.4

準備

早速rmagickをインストールしていく訳ですが、何もせずにgem installを行うとエラーがでます。

> gem install rmagick -v 4.2.4
Building native extensions. This could take a while...
ERROR:  Error installing rmagick:
省略

ERROR: Can't install RMagick 4.2.4.
Can't find the ImageMagick library or one of the dependent libraries.
Check the mkmf.log file for more detailed information.

> gem install rmagick -v 4.2.4

Building native extensions. This could take a while...

ERROR: Error installing rmagick:

省略

ERROR: Can't install RMagick 4.2.4.

Can't find the ImageMagick library or one of the dependent libraries.

Check the mkmf.log file for more detailed information.

rmagickを使用する場合はimagemagick＠6が必要なのでそちらを先にインストールしてパスを通します。

>brew install imagemagick@6
>echo 'export PATH="#{インストールしたimagemagick@6のパス}/bin:$PATH"' >> ~/.bash_profile

完了後
>gem install rmagick -v 4.2.
Fetching rmagick-4.2.4.gem
Building native extensions. This could take a while...
Successfully installed rmagick-4.2.4
Parsing documentation for rmagick-4.2.4
Installing ri documentation for rmagick-4.2.4
Done installing documentation for rmagick after 1 seconds
1 gem installed

>brew install imagemagick@6

>echo 'export PATH="#{インストールしたimagemagick@6のパス}/bin:$PATH"' >> ~/.bash_profile

完了後

>gem install rmagick -v 4.2.

Fetching rmagick-4.2.4.gem

Building native extensions. This could take a while...

Successfully installed rmagick-4.2.4

Parsing documentation for rmagick-4.2.4

Installing ri documentation for rmagick-4.2.4

Done installing documentation for rmagick after 1 seconds

1 gem installed

これで準備OK

WebP変換

WebP変換のやり方は簡単。変換したい画像を用意したら以下を実行

require 'RMagick'
# 読み込む画像ファイル名は適宜変更
image = Magick::Image.read("aaa.png").first
image.write("aaa.webp")

require 'RMagick'

# 読み込む画像ファイル名は適宜変更

image = Magick::Image.read("aaa.png").first

image.write("aaa.webp")

Magick::Image.readで変換したい画像を読み込み、その後拡張子を.webpに変更して書き出すとWebP変換されます。簡単ですね！！！！

画像比較

今回は3つの画像を用意しました。※本記事の以降の画像はすべて当社が作成したものです

画像①

画像②

画像③

詳細比較

画像	説明	サイズ	変換前	変換後
画像①	テスト用画像	1176×659	43,518 byte	7,706 byte
画像②	熱海の写真その1	3024×4032	2,040,929 byte	1,653,104 byte
画像③	熱海の写真その2	4032×3024	1,008,748 byte	665,790 byte