【WebPとは】JPEG(JPG)、GIF、PNGを一括でWebPファイルに変換する方法についても解説

「WebP (ウェッピー)」と言う読み方の「.webp」拡張子で表される画像のファイル形式はご存じですか？

Webコーダーの方やブログを書いている人であれば一度は耳にしたことがあるのでないでしょうか？

比較的新しいファイル形式と言うこともあり導入に踏み切るか悩んでいる方や、「JPEG(JPG)、GIF、PNG」からの変換方法が分からないと言った人も多いかと思います。

そこで、WebPファイルの特徴や様々な変換方法と併せて、Webサイト (WordPressなど) への組み込み方や、ツールの導入方法についても解説していきたいと思います。

WebPファイルの特徴とは何か

「WebP (ウェッピー)」はGoogleが開発しているWeb用の画像形式でして、ファイルの拡張子には「.webp」と書く必要があります。

WebPは優れた可逆・非可逆圧縮で画像のファイルサイズを軽量化できる特徴を持っており、同等な画質のままPNGでは26%、JPEG(JPG)では25%〜34%ほど容量を削減することができます。

さらにJPEG(JPG)のように非可逆圧縮に対応しているので容量の大幅な削減が可能であったり、PNGのような背景透過、GIFのようなアニメーションも可能という、まさに万能なファイル形式なのです。

WebPの特徴まとめ

ファイルサイズが軽量 (PNGと比べて26%削減、JPEG(JPG)と比べて25%〜34%削減)
JPEG(JPG)のように非可逆圧縮が可能
PNGのように背景透過が可能
GIFのようにアニメーションが可能

WebPと他の画像ファイルフォーマットとの比較

ファイル形式 (拡張子)	圧縮方式	透過	アニメーション
WebP (.webp)	可逆圧縮非可逆圧縮	可	可
JPEG (.jepg、.jpg)	非可逆圧縮	不可	不可
GIF (.gif)	可逆圧縮	可 (半透明は不可)	可
PNG (.png)	可逆圧縮	可	不可 (APNG (.apng) の場合は可能)

WebPに変換することのメリット

画像をWebPに変換することによって、大幅にファイルサイズを軽減することが可能になるためウェブサイトの表示速度がアップします。

ウェブサイトの表示速度がアップすることによって、ストレスの少ないユーザー体験が可能になるため、WebPを導入していないサイトに比べて検索順位が上昇する可能性があります。

つまり、ブログなど自身のサイトを運営している方であれば、今まで以上に多くのユーザーからウェブページを見てもらえる可能性があるのです。

SEO (検索エンジン最適化) 的に重要な「ウェブページの読み込み時間」がJavaScriptやCSSなどのコードに手を加えるよりも画像の変換だけで手軽に改善できるため、ブロガーの方達にとっては導入は必須と言えるでしょう。

ちなみに、ウェブサイトの表示速度はGoogleが提供している「PageSpeed Insights」を使うことで確認することができます。

また、Web制作を仕事にしている方であれば今まで「.jpg、.png、.gif」と複数の拡張子を使い分けていた開発が、「.webp」だけで統一することができるので画像の管理がしやすくなります。

WebP変換のメリットまとめ

サイトの表示速度UPでユーザー体験を高められる
WebP化されていないサイトよりもSEO的に優位に立てる
画像の拡張子管理が「.webp」だけで一元化できる

WebPに変換することのデメリット

WordPressを除く既存サイトをWebP仕様に変換する場合は、HTMLコードの改修や変換画像の再アップロードの手間がかかる可能性があるため多少の手間と時間がかかってしまいます。

さらに、画像編集ソフトによってはWebPに対応していない場合もあるため、専用のプラグインを導入しなければならない手間も発生します。

ですが、今はWebPへの画像の一括変換が可能な「WebP相互変換ツール」があったり、WordPressでは「EWWW Image Optimizer」と言った自動で画像の最適化を行ってくれるプラグインが用意されているので、比較的短い時間で導入作業を終えることができるでしょう。

WebP変換のデメリットまとめ

HTMLコードの改修が必要になる可能性がある
画像の再アップロードが必要になる可能性がある
画像編集ソフトに別途プラグインを入れなければならない場合がある

ブラウザ・OSにおけるWebPのサポート状況

記事作成 (2022年4月) 時点の「Can I use」では、WebPは主要な最新ブラウザ (Edge、Firefox、Chrome、Opera、Safari on iOS) では対応している状態となっています。

ですが、iOS Safariのバージョン13以前やIE (Internet Explorer)、Mac OS Catalina 以前のOS非対応となっていますので、WebPを利用したい場合はブラウザを乗り換えるかアップデートする必要があります。

また、Webコーダーの方はWebPが非対応のブラウザでも画像を表示させるための「<picture>タグ」を使ったコーディングが必要になってきます。

WebP非対応のブラウザでも画像を表示させる方法

WebP非対応のブラウザで「.webp」の画像を以下のようなHTMLで記述したとしても表示されません。

<img src="/img/image.webp">

そうした場合に、条件に合致した画像だけを読み込める「<picture>タグ」を使う必要が出てきます。

<picture>タグの中に「<source>タグ」「<img>タグ」の順に記述するのがポイントです。

以下のように記述することで、WebPに対応しているブラウザでは「.webp」の画像が表示されて、非対応のブラウザは「.jpg」の画像が表示されます。

<picture>
    <source srcset="/img/image.webp" type="image/webp">
    <img src="/img/image.jpg">
</picture>

また、IE (Internet Explorer) の場合はpictureタグが使えないため、Polyfill (ポリフィル) を使う必要がありまして、以下のような<script>タグを</body>タグ直前に記述する必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.js"></script>

ちなみに、CSSの「backgroundプロパティ」でWebP画像を表示させる場合は、「Modernizr」と呼ばれる対応環境の検出スクリプトをダウンロードして、<script>タグを<head>タグ内に記述する必要があります。

以下の手順を行うことで、WebP対応環境が検出できるスクリプトをダウンロードできます。

「https://modernizr.com/」にアクセス
「Add your detects」ボタンをクリック
「＋WebP」のボタンをクリック
「BUILD」ボタンをクリック
Buildの項目にある「Download」ボタンをクリック

ダウンロードが完了したら、以下のように<head>タグ内に記述します。

<script src="/js/modernizr-custom.js"></script>

WebPに対応するブラウザが検出された場合は、<html>タグに以下のようなクラス名が追加されます。

<html lang="ja" class="webp webp-alpha webp-animation webp-lossless">

逆にWebP未対応の場合は以下のクラス名が追加されます。

<html lang="ja" class="no-webp">

後は、CSSをクラスで分岐するよう記述をすれば対応環境に応じてWebP画像を表示することができます。

.no-webp .thumbnail { 
    background: url("./img/image.jpg"); 
}
.webp .thumbnail { 
    background: url("./img/image.webp");
}

WebPファイルに変換した時の画像の変化

実際にWebPファイルに変換した場合、元画像に比べてどの程度ファイルサイズや画質に変化が生じるのか気になるかと思いますので、参考用に解説していきたいと思います。

ちなみに、これから紹介するPNGとJPEG(JPG)画像の変換には、Googleが提供しているツールである「Squoosh (スクワッシュ)」と言うサイトを使用しました。

また、アニメーション付きGIF画像の変換には「ACONVERT.COM」を使用しています。

※Squooshは個別にファイル変換はできますが、複数画像の一括変換やアニメーション付きGIF画像の変換には対応していません。

PNGからWebPに変換した場合

上の画像を見て分かる通り、同じ解像度でも画質の劣化はありません。

さらに、ファイルサイズも以下のように90% (Quality：75指定) ほど削減されています。

※WebP非対応の環境でも画質の変化が分かるように変換前と変換後の画像を貼り合わせています。

変換前のファイルサイズ	1.43M
変換後のファイルサイズ	112KB

JPEG(JPG)からWebPに変換した場合

JPEGもPNGと同じように、解像度にしても画像の劣化は起こりません。

そして、ファイルサイズも以下のように44% (Quality：75指定) ほど削減されました。

※WebP非対応の環境でも画質の変化が分かるように変換前と変換後の画像を貼り合わせています。

変換前のファイルサイズ	200KB
変換後のファイルサイズ	112KB

GIFからWebPに変換した場合

画像の大きさをそのままに、GIF画像をWebPファイルに変換した場合、上記の画像ではファイルサイズを37.5%削減することができました。

さらに、変換前のGIFに比べてWebPでは画像のジャギーも少なくなっています。

※WebP非対応の環境でも画質の変化が分かるように変換前と変換後の画像を動画にしています。

変換前のファイルサイズ	264KB
変換後のファイルサイズ	165KB

JPEG(JPG)、GIF、PNGをWebPファイルに変換できるツール

画像をWebPファイルに変換するツールで便利なものは、先ほども少し触れました「WebP相互変換ツール」「Squoosh (スクワッシュ)」「ACONVERT.COM」などがあります。

それぞれのサービスごとに変換方法に特徴があるため、用途に応じて使い分けるのベストでしょう。

そこで、それらのツールの使い方についても解説していきたいと思います。

画像を一括でWebPファイルに変換できるツール

使い方の手順

「WebP相互変換ツール」のサイトにアクセス
変換方法を選ぶ (WebP → PNG、WebP → JPEG(JPG)、JPEG(JPG)、PNG、GIF → WebP)
画像をドラッグ＆ドロップするか「ファイルを追加」のボタンを押して追加していく
変換し終えたら、画像ごとにダウンロードするか「画像を一括ダウンロード」のボタンを押す

WebPへの変換方法を細かく決めることができるツール

使い方の手順

「Squoosh (スクワッシュ)」のサイトにアクセス
トップページに画像をドラッグ＆ドロップ
画面右下の「Compress」の欄から「WebP」を選択
「Quality」を調節
右下のダウンロードアイコンをクリック

GIFアニメーション画像をWebPファイル変換できるツール

使い方の手順

「ACONVERT.COM」のサイトにアクセス
ファイルを選択する
ターゲットフォーマットから「WEBP」を選択
「今すぐ変換」のボタンをクリック
「変換結果」の「出力ファイル」の欄から「●●.webp」のリンクをクリック

PhotoShopで画像をWebPファイルに変換する方法

記事作成 (2022年4月) 時点では、PhotoShopでWebP画像を表示することも、書き出すこともできません。

PhotoShopでWebPファイルを扱うには、「WebPShop」と言うプラグインを導入する必要があります。

WebPShopのインストールはこちらのページから行なってください。

Windows or Mac専用のプラグインをインストール

先ほどの遷移先のページを下っていくと、「Installation」の欄がありますので、お使いのOSに合った直リンクをクリックしてプラグインをダウンロードしてください。

特定のディレクトリ (フォルダ) にプラグインを設置する

Windowsの場合は以下のディレクトリにダウンロードしたプラグインを移動させてください。

移動したら「対象のフォルダーへのアクセスは拒否されました」と言ったダイアログが表示されますので、管理者権限で「続行」ボタンを押してください。

C:\Program Files\Common Files\Adobe\Plug-Ins\CC

Macの場合は以下のディレクトリにダウンロードしたプラグインを移動させてください。

また、移動の際にパスワードの入力を要求されます。

※WebPShopを実行する際に「開発者が確認できないため WebPShop.plugin を開くことができません」と表示される場合がありますので、その際は[システム環境設定] > [セキュリティとプライバシー] > [一般] から「このまま開く」のボタンをクリックしてください。

/Library/Application Support/Adobe/Plug-Ins/CC

PhotoShopで画像を開いて「別名で保存」を実行する

WebPファイルに変換したい画像を開き、[ファイル] > [別名で保存] とボタンを押していってください。

PhotoShopで画像を開いて「別名で保存」を実行する

すると、別名で保存のダイアログが表示されますので、保存するファイル名を決めた後にフォーマットから「WebPShop」を選択して「保存」のボタンを押してください。

PhotoShopで画像を開いて「別名で保存」を実行する

最後にWebPShopが開きますので、「Preview」にチェックを入れて「Quality」などを調節しながら「OK」ボタンを押しましょう。

コマンドラインでWebPファイルを扱う方法

Mac OS、Linuxで使える「Homebrew」を使って、webpパッケージをインストールします。

※Homebrewのインストールが済んだ状態で行なってください。

インストールにはターミナルを開いた状態で、下記のコマンドを実行してください。

$ brew install webp

パッケージのインストールが完了したら、以下のコマンドが使えるようになっています。

コマンド	用途
cwebp	WebPエンコーダツール
dwebp	WebPデコーダツール
vwebp	WebPファイルビューア
webpmux	非アニメーションのWebP画像からアニメーションのWebPファイルを作成したり、アニメーションのWebP画像からフレームを抽出したりするツール
gif2webp	GIF画像をWebPに変換するツール

「JPEG(JPG)、PNG」をWebPファイルに変換する場合

例えば、「●●.jpg、●●.png」を「●●.webp」に変換する場合は以下のようにコマンドを入力します。

$ cwebp input.jpg -o output.webp

アニメーション付きGIF画像をWebPファイルに変換する場合

アニメーション付きのGIF画像をWebPファイルに変換する場合は「gif2webp」コマンドを使います。

特にオプションを指定しなければ、下記のように簡単に実行することができます。

$ gif2webp input.gif -o output.webp

WordPressの画像をWebPで配信する方法

WordPressの画像をWebPとして配信するには「EWWW Image Optimizer」と言うプラグインを使用します。

プラグインの追加と有効化

まずは、WordPress管理画面のメニューから [プラグイン] > [新規追加] と進み、「EWWW Image Optimizer」と検索をかけてください。

そうすると、左上に対象のプラグインが表示されますので、「今すぐインストール」 > 「有効化」とボタンを押していってください。

「EWWW Image Optimizer」の設定方法

インストールが完了したら、左下の「設定」ボタンを押しましょう。

「EWWW Image Optimizer」の設定方法

すると、設定画面が現れますので、「サイトを高速化」「今は無料モードのままにする」にチェックを入れて「次」のボタンを押しましょう。

「EWWW Image Optimizer」の設定方法

次は設定に全てチェックが入った状態で保存するかを聞かれますので、内容に問題がなければ「設定を保存」のボタンを押してください。

※基本的には全てチェックが入っている状態で大丈夫です。

「EWWW Image Optimizer」の設定方法

最後に、上記の画面に移りますので、「完了」ボタンを押してください。

WebPの設定を完了させる

先ほど、「WebP変換」にチェックを入れていましたが、WebP画像を完全に配信するためにはもう少し設定が必要になります。

ですので、プラグインの「設定」ボタンを押して上記の画面に移ってください。

WebPの設定を完了させる

少しスクロールした所に、「WebPの配信方法」と言う欄がありす。

右下に「PNG」と表示されている状態では正しくWebP配信が行われていません。

正しく配信するためには、枠の中にあるコードをコピーして、ブログの「wp-config.php」と同じ階層の「.htacess」ファイルの冒頭部分に以下のようにペーストしましょう。

※環境によって「.htacess」の内容が異なる場合があります。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
    RewriteCond %{REQUEST_FILENAME}\.webp -f
    RewriteCond %{QUERY_STRING} !type=original
    RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
    <FilesMatch "\.(jpe?g|png|gif)$">
        Header append Vary Accept
    </FilesMatch>
</IfModule>
AddType image/webp .webp

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

WebPの設定を完了させる

ここまでの設定が正しくされていれば、先ほどの赤色で「PNG」と表示されていた部分が緑色で「WEBP」と表示されるようになり、ブログがWebP画像での配信に対応するようになります。

まとめ

今回は、WebPにはどんな特徴があるのかについてや、様々な変換方法について解説を行いました。

WebPの有効性や扱い方についての理解は以前に比べて膨らみましたか？

今後、サイトの画像をWebPに置き換えたい場合には、ぜひ本記事を参考にしながら進めてみてください。