ぬるま湯デザイン塾 – 公式ブログ

皆さんこんにちは！
ぬるま湯エキスパート講師の太田です。

もうすぐ年の瀬ですね。皆さんにとって今年はどんな年でしたか？
ぬるま湯での学習を通して何か１つでも良い方向に動いていることを願っています！

さて今回のブログの内容ですがタイトル通り
次世代画像フォーマット「Webp」
皆さんご存知でしょうか？

そもそも画像形式についてですが
スクリーンショットや参考元をGoogleChromeから保存する際
「〇〇◯.png」や「〇〇◯.jpg」など、
拡張子がついているのはご存知ですか？
これが画像形式といって実はそれぞれ、できることできないことが異なります。
そんな中でも今回は「Webp」にフォーカスを当てて解説させていただきますね！

”各種画像形式の特徴”

各種形式をまとめるとこのようになっています。
この中でもWebpについて解説すると

”Webpとは”

Webp（ウェッピー）とは、ウェブサイトのトラフィック量を削減し表示高速化を
目的としてGoogleが開発した、次世代画像フォーマットです。ファイルの拡張子は
「.webp」。2010年に発表された当時は、対応するブラウザが限られていることから、
高性能な画像形式ではあるものの長らく普及が進まないままでした。その後、
2018年には主要ブラウザであるFirefoxやMicrosoft Edgeに、
2020年にはAppleのiOS14とSafariに対応することが発表され、
主要ブラウザでWebPが利用できるようになりました。
また、WordPressでも以前はWebPは非対応でしたが、WordPress 5.8以降、
WebPをサポートするようになりました。
今後は加速度的に普及していくことが予測されています。

難しく書きましたが、ざっくりまとめると
とにかく軽いです、その上png同様に背景の透過処理にも対応しています。
少し前までは使用できる媒体も少なかったのですが近年は
各サイトで対応が進んで使用できる場面が増えてきました。
こんな感じです。

軽いとどういう事ができるのか、
そうです、WEBサイトの読み込みが早くなります。
これはWEBサイトにとっては命ともいえる大切な要素ですね！

”Webpのメリット”

”Webpのデメリット”

特徴をまとめると上記のようになっています。
次に肝心のWebpへの画像の変換方法を解説していきます！

”画像の変換方法”

1.画像データの変換サイトを活用する
画像形式を変換する一般的な方法は、変換サイトを活用することです。
現在、ブラウザ上で形式を変換するためのサービスは数多く提供されているます。
たとえば、Google社が開発した「Squoosh」の場合、サイトにアクセスし指定の場所に
変換したい画像をドラッグ・アンド・ドロップするだけで変換が可能です。
画像の圧縮形式は、WebP以外にJPEGやPNGなど全9種類あり、
画像の品質やサイズ、色数なども選ぶことができます。
https://squoosh.app/

2.Photoshopで開く/保存する
最近までWebPの画像データをそのままPhotoshopに読むことはできませんでしたが、
2022年2月のアップデートver.23.2にてWebP ファイル形式が
完全にサポートされるようになりました。プラグインや環境設定を必要とせずに、
Photoshop で WebP ファイルを開き、作成、編集、および保存できるようになりました。
保存方法は「コピーを保存」を開き、ファイル形式ドロップダウンメニューの
オプションから「WebP」を選択して WebP ファイルを保存します。

3.コマンドを使用して変換する
キーボードで入力したテキストで命令を出し、
コンピューターと直接対話できるコマンドラインの操作に慣れている方の場合は、
コマンドラインツールを使用するのがおすすめです。コマンドラインツールには
「cwebp」と「dwebp」の2種類があり、それぞれ開発者向けに立ち上げられたサイト
「Google Developers」から直接ダウンロードできます。
コマンドラインツールを活用すれば、複数のファイルを一度に変換することも可能です。

”まとめ”

PhotoshopだけでなくWordPressでも対応が進んでおり
サイト内の画像をWebpに置き換えてくれるプラグインなどもあるようです。
今後はWEBサイトのデータ軽量化などにも活躍が見込めそうですね。

画像形式について興味の出てきた方は
ご自身のポートフォリオサイト、制作したLPなどの画像は
何の形式でアップされているのか一度確認してみてはいかがでしょうか。

今回はこのへんで、それでは！