GraphicConverter(グラフィックコンバーター)で WebP形式の画像を作る方法

公開:

WebP は GraphicConverter という MacOS用のソフトウエアで他の画像形式から変換して作成しています。

ウェブページでどの画像形式が表示されているかは、画像上で右クリックして画像だけを「新しいタブで画像を開く」すればわかります。

GraphicConverterによるWebP変換の手順

なお、ウェブブラウザによって JPG/PNG や WebP を振り分けて表示させる方法は「pictureタグを使って閲覧デバイスに合わせた画像を表示させる方法」を参考にしてください。

入手

GraphicConverter は有料ソフトウエアで、App Store(GraphicConverter 10)購入 や、開発元サイトから試用/購入できます。

変換手順

WebP 形式の画像だけだと Google Chrome 以外のウェブブラウザで表示できなくなってしまうので JPG 形式(あるいは PNG 形式)の画像も準備しておきます。当サイトでは元画像として PSD(フォトショップ)形式の画像を作り、そこから JPG/PNG と WebP を作成しています。

GraphicConverterを起動して、ファイル > 変換と修正(最後に使った機能で)を実行。

GraphicConverterによるWebP変換の手順

「アクション:変換」に設定して画像形式を変換するための画面にします。「保存フォーマット:」で変換後に保存する形式を選びます。なお、下記画像では画面サイズを狭くしているため変換前/変換後フォルダの階層を選ぶボタンが省略されています(サイズを広げると現れます)。

GraphicConverterによるWebP変換の手順

保存フォーマットのプルダウンメニューで「WebP」を選択。メニューにないときは最下部の「すべてを表示」を選んでからメニューを再度開くと変換可能な形式が表示されます。

GraphicConverterによるWebP変換の手順

保存フォーマットの「オプション…」で、その保存形式で設定できる項目が選べます。

GraphicConverterによるWebP変換の手順

「WebP」では JPG と同様に品質(圧縮率)が選べ、品質を高くするとデータ容量が増えます。

どの程度の品質にすればいいかは、ウェブページの目的に応じて容量と画質を検討する必要があります。当サイトでは画質重視のページを除いては、軽量化(低画質)傾向に調整しています。

このオプション設定画面ではサイズ比較とプレビュー画面が準備されていますが、私の環境の GraphicConverter 10.6.8 / MacOS High Sierra 10.13.6 / iMac 2017 では機能していません。

画面中央に変換する画像を表示させます。画像の上部にあるメニューで階層(フォルダ)を選ぶことができます。変換したい画像をクリックで選んでから(全部選択はCommand+A)、左側の「選択した機能を開始する」をクリック。

GraphicConverterによるWebP変換の手順

変換された画像は、右側のフォルダに保存されます。

GraphicConverterによるWebP変換の手順

WebP画像の確認

WebP画像を確認するためには GraphicConverter など WebPに対応しているソフトウエアが必要です。

GraphicConverter のブラウザでは表示できる。

GraphicConverterによるWebP変換の手順

Photoshop や Bridge(Photoshop付属の画像ブラウザ)では表示できません。白紙アイコンは表示未対応ということ。

GraphicConverterによるWebP変換の手順

もちろん、Google Chrome では表示できるので、画像の上で右クリックして「このアプリケーションで開く」ことは可能です。

GraphicConverterによるWebP変換の手順

関連記事