Webサイト表示が速くなるなどSEO対策にも有効な「WebP」ですが、
新しいフォーマットだけに分からないことも少なくありません。
そこで既存の画像データを変換するにはどうすれば良いのか、
対応ブラウザはどうなっているのかなどWebPについて詳しく見ていきましょう。
WebPって何?
「WebP」はGoogleが開発した次世代画像フォーマットです。
(参照:https://developers.google.com/speed/webp?hl=ja)
画像のクオリティを落とすことなく、一般的によく使われる「JPG」や「PNG」などよりも
ファイルサイズを小さくすることができます。
JPGの高圧縮、PNGの背景透過処理、GIFのアニメーションといった
他の画像フォーマットの代替となる機能をWebPは備えているのです。
現在進行形で多くのWebサイトでWebP形式の画像の使用が始まっており、
近い将来にはほとんどのWeb画像がWebP形式になるという予想もあります。
手持ちの画像をWebPに変換する方法
現在パソコンに保存しているJPGやPNGといった形式の画像は、
オンラインサービスを使えば簡単にWebP形式に変換可能です。
手持ちの画像をWebP形式に変換するのによく使われるオンラインサービスが
「Squoosh」です。
(参照:https://squoosh.app/)
Googleが提供している画像の変換・圧縮ツールで、WebP形式への変換だけでなく
圧縮率の調整やリサイズなどかんたんな画像編集もできます。
使い方も簡単で、Squooshサイトにアクセスして
トップページにWebP形式に変換したい手持ちの画像を貼り付けます。
画像を貼り付けると画面の真ん中に中心線と両サイドにメニューが表示されます。
右側のメニュー内にある「Compress」の項目で「Webp」を選択、「Effort」と「Quality」で
画質や圧縮率を調整して、画面下のダウンロードボタンを押してください。
あとはダウンロードした画像の拡張子が「.webp」になっているのを確認すればOKです。
Squooshのトップページ右上にある「インストール」ボタンを押すと、
パソコンにSquooshをインストールしてオフラインで使えるようになります。
画像をWebp形式に変換できるツール:CDKM
手持ちの画像をWebP形式に変換できるオンラインツール2つ目は「CDKM」です。
(参照:https://cdkm.com/jp/webp-to-png)
ちなみにCDKMのトップページに「WEBPをPNGに変換」と記載されていますが、
他の形式からWebP形式に変換することも可能です。
トップページの「ファイルを選択」からWebP形式に変換したい手持ちの画像を
選択します。
Web上の画像をWebP形式に変換してダウンロードする場合は、
「URLを入寮してください」で画像のURLを入力します。
初期設定で「PNG」になっている「目標」の項目を「WEBP」に変更して、
「変換開始」を押して変換が完了するのを待つだけです。
残念ながら細かい調整はできませんし、ファイルサイズが200MBまでの画像しか
変換できず、変換にも少し時間がかかります。
画像をWebP形式に変換できるツール:Convertio
手持ちの画像をWebP形式に変換できるオンラインツール3つ目は「Convertio」です。
(参照:https://convertio.co/ja/jpg-webp/)
Convertioにアクセスしたら、
「ファイルを選ぶ」でWebP形式に変換したい手持ちの画像を選択します。
もしくは、画像を保存しているフォルダから画像を直接Convertioのページに
ドロップしても構いません。
画像を選択したら画面真ん中辺りにあるプルダウンメニューで、
画像の項目から「WEBP」を選択、「変換」ボタンを押します。
変換が完了したら「ダウンロード」から、
拡張子が「.webp」になった画像をパソコンにダウンロードすればOKです。
Convertioも細かい調整はできませんし、
サイト上に変換した画像の情報が24時間保存されるので注意してください。
画像をWebP形式に変換できるオンラインツール:サルワカ道具箱
手持ちの画像をWebP形式に変換できるオンラインツール4つ目は
「サルワカ道具箱」です。
(参照:https://saruwakakun.com/tools/png-jpeg-to-webp/)
トップページの「ファイルを追加」から、WebP形式に変換したい手持ちの画像を
選択します。
もしくは、画像が保存されているフォルダから直接サルワカ道具箱のページに
ドロップしてもOKです。
アップロードした画像の下に「WEBPをダウンロード」というボタンがあるので、
それを押せば拡張子が「.webp」に変換された画像がダウンロードできます。
細かい調整はできませんが、
複数枚の画像を一括で変換してダウンロードすることも可能です。
またJPGやPNG、GIFなど異なった形式の画像を、
一括でWebP形式に変換することもできます。
ただしWebP形式への変換のみで、WebP形式の画像をJPG形式に変換したり、
JPG形式をPNG形式に変換したりといったことはできません。
WordPressやPhotoshopにはWebP形式に変換できるプラグインがある
Web制作で使用するノーコードツール「WordPress」や画像編集ソフト「Photoshop」には、
手持ちの画像をWebP形式に変換できるプラグインがあります。
WordPressでは
・Imagify-Optimize Images & Convert WebP
・ShortPixel Image Optimizer
・WebP Converter for Media-Convert WebP and AVIF & Optimize Images
などのプラグインでWebP形式への変換が可能です。
月200MBや100枚など制限はあるものの、3つとも無料で使えます。
Photoshopは最新バージョンはWebP形式に対応しているので、
プラグインが無くても手持ちの画像をWebP形式に変換できます。
PhotoshopにWebP形式に変換したい画像を読み込み、
メニューから「ファイル」→「コピーを保存」と進んでください。
画像の保存画面の「ファイルの種類」で「WebP」を選択して保存すればOKです。
WebP形式に対応していない古いバージョンのPhotoshopでは、「WebPShop」という
プラグインを使うとWebP形式の画像の読み込みや書き出しができます。
WebP形式の画像が使えないブラウザがある!?
WebP形式は2010年にリリースされた比較的新しい形式で、
リリース当初は対応ブラウザがGoogle Chromeぐらいしかありませんでした。
しかし2021年の時点でIEとKaiOSブラウザ以外は最新バージョンなら
対応していましたし、2023年現在はIE以外全てのブラウザに対応しています。
(参照:https://caniuse.com/webp)
Google ChromeはもちろんMicrosoftのEdge、AppleのSafari、Firefox、Operaといった
主要なブラウザは最新バージョンであれば全てWebP対応です。
スマホでも
・Chrome
・Safari
・Samsung Internet
・Opera mini、Opera mobile
・Android Browser
・Firefox
などほぼ全てのブラウザでWebP形式の画像が利用可能です。
IEでは2023年現在でもWebP形式に対応していませんが、Microsoftは既にIEの
サポートを終了しておりEdgeへの乗り換えを進めているので問題はありません。
まとめ
WebPはGoogleの次世代画像フォーマットで、
従来の画像フォーマットよりもファイルサイズが小さくなっています。
サイズが小さくなっても画質はそのままで、PNGの背景透過、GIFのアニメーションなど
他の画像フォーマットの機能も使用可能です。
画像のファイルサイズを小さくすることはSEO対策にも有効ですから、
Webサイトで使う画像はWebP形式に変換するのがおすすめです。