サイトの高速化の方法のひとつに、表示させる写真や画像に次世代フォーマットを利用するというものがあります。次世代フォーマットにはいくつか案があるのですが、今回はGoogleが開発している WebP (ウェッピー)の利用方法について取り上げます。

サイトの高速化 写真のWebP化の方法 Photoshop利用

1.Photoshopにプラグインをインストールする

1)プラグインのダウンロード

プラグインは、現在は下記の「GitHub」のサイトにて配布されていますので、それを利用することにします。

上記のサイトにアクセスすると、赤枠の部分にダウンロードリンクがあります。

Mac、Windowsのそれぞれでダウンロードします。ダウンロード後はZIPファイルなので解凍します。今現在のバージョンは「WebP_v0.5b9_win.zip」となっていました。

ダウンロードが終わったらZIPファイルなので解凍します。(Windowsならダブルクリック)

2)解凍したファイルをPhotoshopプラグインフォルダに入れる

解凍したファイル「WebP.8bi」をPhotoshopのプラグインフォルダに入れます。

Photoshopのプラグインフォルダは、標準状態では下記にあると思います。

  • Windows:C:\Program Files\Adobe\Adobe Photoshop CC 2019\Plug-ins
  • Mac:\アプリケーション\Adobe Photoshop CC 2019\Plug-ins

2.WebPファイルを利用する

1)Photoshopを起ち上げる

プラグインフォルダに WebP.8bi ファイルを入れると、プラグインがインストールされ、Photoshopを起ち上げると、WebPファイルを読み書きできるようになります。WebPファイルとしたい画像を読み込みます。

2)WebPファイルとして保存する

ファイルの保存メニューのファイルの種類としてWebPが選択できるようになります。

画像の保存をかけると、保存画質の設定パネルが表示されます。

WebPではアルファチャンネルがサポートされるのも大きな違いですね。でも今回は、Webでの画像表示スピードアップのために使うので、

  • Lossy Quality : 下記で変化させて試します(60~80がベスト?)
  • Alpha Channel : None(アルファチャンネルのデータは無しに)
  • Save Metadata : チェックを外します(日付や撮影情報のメタデータを消す)

と設定して利用します。WebP の画質が優れている点については下記にて比較をしています。

3.サイトへのWebPファイルの設置方法

1)ワードプレスにWebPファイルのアップロード許可を設定

WebPファイルは、ワードプレスにアップロードの許可設定をしないと、メディアの新規追加では下記のように「セキュリティ上の理由によりこのファイル形式は許可されていません」と表示されてアップロードできません。

プラグイン「 WP Add Mime Types 」を入れて許可設定を変更しましょう。

インストールし有効化すると、 設定に「Mime Type設定」ができますのでそこをクリックします。

表示される画面の下記の「追加の項目」に「webp = image/webp」と入力して「設定を保存」をクリックします。

そうすると、メディアの新規追加で WebP ファイルをアップロードしてもエラーにはならなくなります。

2)サイトには「picture」要素で設置する

ワードプレスのサイトに設置するには、画像のリンクを入れればいいのですが、WebP ファイルがサポートされていないブラウザでの表示も考えてあげなければなりません。picture 要素を使い表示を切り替えます。

下記の画像が表示サンプルです。WebP ファイルをサポートしている Google Chrome では WebP で表示し、サポートしていないブラウザではJpeg ファイルを表示するようになります。

実際のソースコードは、下記のように<picture>要素を使い記載します。

<picture>
<source type="image/webp" srcset="https://websvr.org/wp-content/uploads/2019/05/photoshop-webp09-loss80.webp" width="600">
<img src="https://websvr.org/wp-content/uploads/2019/05/photoshop-webp14.jpg" alt="" class="wp-image-785" width="600">
</picture>
WebPはGoogleが開発していますが、FirefoxやEdgeも近く対応させると表明しています。新しい画像フォーマットはまだ対応していないブラウザも多いですが、分けて表示できれば先に使っても問題ないですね。

ワードプレス(WordPress)の写真関連情報 画像表示情報

ワードプレスで写真サイトを構築する際に役に立ちそうな設定や情報をまとめています。こちらはワードプレスの写真設定や画像表示に関連する情報の目次ページとしています。なるべく図を用いて簡単に解説するようにしようと思っています。参考にどうぞ。

ワードプレスの素敵なギャラリー Unite Gallery にできること

今回はWordpress(ワードプレス)のギャラリープラグイン「Unite Gallery」について図解説したいと思います。Unite Gallery には無料の「Unite...
WP-Divi-elegant-themes-logo

写真サイトを作るのにワードプレスのDiviがおすすめな理由

今回はワードプレスの「Divi(by Elegant...

画質比較 Compress JPEG & PNG プラグインのインストール

WordPress(ワードプレス)に画像圧縮のためのプラグイン「 Compress JPEG & PNG...

ワードプレス無料ギャラリー Robo Gallery 設定と機能

Wordpress(ワードプレス)の無料ギャラリープラグインにはいろいろありますが、Robo...

ワードプレスで WebP を簡単に作成する方法 EWWW Image

WordPress(ワードプレス)初心者向けに、今回はワードプレスで次世代フォーマットでの画像配信を簡単に行う方法、「EWWW...

Responsive Photo Gallery 操作が簡単なワードプレスの無料写真ギャラリー

今回は操作がわかりやすくて使いやすいギャラリープラグインの「Responsive Photo Gallery – Images Gallery...

Pin It on Pinterest