ちまたで話題？のWebPファイル形式を知ってますか？WEBサイトの写真を、JPEGやPNGよりも、軽くて速く表示するそうで、2022年2月15日にPhotoshopでプレスリリースしたものを使ってみました。
今回は、自分の得意なPhotoshopを使ってWEBサイトが早くなるなら！！という思いで試してみました。とりあえずは、人気のページだけでも、JPEGからWebPに変更したいと思います。
WebPファイル形式、本当に早いの？劣化は
個人的にヤバいと思っているサイトは、コレ。
このサイトは、写真が多くて重そう。負荷がかかっていると思われるからです。
これ、WebPで保存してみました。
Photoshopのプラグインに入れて動くので、イマイチならまたファイルを消してやろう！と言うつもりでインストールしましたが、まあまあかな。
WebPファイル形式とは
WebPファイル形式とは、Googleが開発した画像フォーマット。拡張子は「webp」。
ファイルサイズの軽さが魅力で、画像添付が多いWebサイトは、 WebPファイル形式にすると、表示速度の改善が期待できる。
先ほどの写真は、保存をかけると、〇〇KBになるか見てみると・・・
- 一番左が「Fastest」でプレビューすると87.6KB
- 真ん中が「Default」で72.2KB
- 右が「Slowest」で68.1KB
ページ速度を気にしないといけない訳は？
WEBサイトの運営をされている方はサーチコンソールなどで、モバイルやデスクトップでの表示されるページ速度をチェックしていると思います。
Webサイトのページに移動すると、ブラウザはバイトと呼ばれる単位 (例：KB、MB) で、情報をダウンロードします。
写真は重要な表現材料ですが、つい重たくなりがち。この写真のデータを軽くすれば、 ページの読み込み時間が早くなりますよね。
このWebPを使うとかなりデータが軽くなりました。
だから、Googleは「WebP」を使って欲しいんでしょうね。
この先、定着していくかは不明ですが、Photoshopで使えるようになったので、そのうち「WebP」 を使わないとGoogleに良いサイトと認められないでしょうね。
ページ速度がSEOにとっても重要になっています
私も試行錯誤しまくりです。
なぜWebサイトのページ速度が重要かと言いますと、読み込みに時間が掛かるWEBサイトをユーザーが待っていられないんですね。 モバイルユーザーの53%は、3秒以内にページが表示されないと、サイトを離れてしまいます。
また、皆さんご存知の通り、 Googleのアルゴリズムは、検索エンジンのページをランク付けにページ速度を見ています。
もし、検索エンジンの検索結果で上位にランクされないなら、ページ速度も合わせて調べてみましょう。写真が重たい可能性もあるでしょう。
私もモバイルの表示が遅くならない様にワードプレスのプラグインで圧縮をかけています。それくらい気を遣わないといけないところになっています。
↑利用しているプラグインTinyPNG
このTinyPNGを使えば、これ一つでPNGとJPEGの両方のファイルサイズを小さくして圧縮できます。
プラグインなどでも、WebP形式に変更可能
まあ、力業で、プラグインで軽くしたり、WebP形式に換えました。
実際にJPEG形式とWebP形式と比べてみると・・・
実際にJPEG形式とWebP形式と比べてみると、確かに半分くらいのサイズにもなっています。
1200px × 800px JPEG形式
1200px × 800px 466KBでした。
1200px × 800px WebP形式
1200px × 800px 264KBでした。
実際に表示を見てみると、確かに早い。ファイルサイズも半分ほどになっています。
そして、しっかり写真全体をみないと分かりませんが、ほとんど変わらない気がします。うーん。どうでしょうか？
Photoshop2022での導入の仕方は？
下をダウンロードして、それをプログラムファイルのAdobeのプラグインに置けば動きます。
直接のダウンロードリンク
Windows（x64）：
https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Win_x64.8bi
macOS（ZIP を抽出）：
https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Mac_Universal.zip
ファイルを置く場所はココ。
Windows：\Program Files\Common Files\Adobe\Plug-Ins\CC
macOS：/Library/Application Support/Adobe/Plug-Ins/CC
私はAdobe Photoshop2022のなかにいれました。
圧縮設定は、「保存」コマンドで調整できます。
品質は、非可逆0（画像が劣化してより少ないバイト数に収まるようになります）から可逆100（ピクセルはまったく同じまま）になります。通常、圧縮サイズは品質とともに増加しますが、一部の画像（画面キャプチャ、無地など）の場合、ロスレスアルゴリズムはより小さなファイルを生成します。
圧縮作業により、エンコード速度が制御されます。遅くすると、視覚的な品質が向上したり、ファイルサイズが減少したりします。
プレビュー機能には、圧縮された画像とその最終的なサイズが表示されます。画像が高すぎたり広すぎたりすると、移動可能なズームイン領域が表示されます。警告：大きな画像や重い圧縮作業の 場合、これを有効にすると、グラフィカルユーザーインターフェイスが遅くなるか、応答しなくなる可能性があります。
アニメーション（「Frame1（123ms）」などの名前に期間を含むいくつかのレイヤー）の場合、スライダーが現在のフレームを選択し、プレビューと期間を表示します。
共通パラメータ
写真撮影の場合、70前後の品質が良いスタートです。サイズがより重要な場合（アイコン、トラフィックの多いWeb写真など）、30まで小さくすることは珍しくありません。人工画像（白黒テキスト、効果の低い3Dレンダリングなど）の場合、98以上の品質の方が見栄えがよく、小さい可能性があります。
これらのオプションでは満足のいく結果を得るのに十分でない場合、 コマンドラインツールはこのPhotoshopプラグインよりも多くの設定を提供します。
https://developers.google.com/speed/webp/docs/webpshop
注意点は？
Adobeブリッジでの利用は無理そうな感じ。試してみたけど、無理そうな感じ。そのうち使えるようになると嬉しいですよね。Adobeブリッジ使えば、一括変換で、WebPに変換も可能になるのかな。
早く、アップデートして欲しい・・・
画像が多い場合は、ワードプレスなどもプラグインを入れて使えるようになるみたいで、少し安心しました。今は様子見でも良いかもしれませんが、Google先生が推奨しているので、やるべきかなといつもは面倒くさがりの私でも思いました。
IEは非対応の模様。まあ使っている人いないでしょうけど。
さいごに
今時、自分でブログやホームページを制作している方も多いはず。このWebPを試してみませんか？
SEOの順位も上がってアフィリにも有利そうな予感。しばらく使って試していこうと思います。
こんな記事もいかがですか？
コメント