WordPressで画像をWebPに変換・対応する方法！

この記事は上記の課題に向けて作成しています。

WordPressはデフォルトのままだとWebPに対応出来ません。

そのためWebPに対応させる必要があります。

この記事ではWordPressにWebPを対応させる方法を紹介します。

この記事を読むメリット

• WordPressにWebPを対応させる方法がわかる

WordPressでWebPに変換・対応する方法

早速WordPressにwebpを対応させる方法を説明します。

webpを対応させる手順は下記の通りです。

WordPressにwebpを対応させる手順

1. プラグインのインストール
2. .htaccessファイルの編集
3. 既存の画像もWebPに変更

プラグインのインストール

始めにプラグインをインストールします。

今回インストールするプラグインは下記のものです。

インストールするプラグイン

• 「EWWW Image Optimizer」

①「プラグイン」→「新規追加」

WordPress管理画面の「プラグイン」→「新規追加」を選択します。

②「プラグインの検索…」にプラグイン名を追加

画面右上にある「プラグインの検索…」で検索します。

③プラグインをインストール&有効化

プラグインをインストールして有効化します。

プラグインのインストールは以上です。

.htaccessファイルの編集

続いて.htaccessファイルを編集します。

表示されるコードを.htaccessファイルに追加します。

①コードを取得する

WordPress管理画面から「設定」→「EWWW Image Optimizer」→「webp変換」を選択します。

するとコードが表示されます。

このコードを.htaccessファイルにコピペします。

②.htaccessファイルをダウンロード

まず.htaccessファイルをダウンロードします。

.htaccessファイルはFTPツールでダウンロード出来ます。

Macユーザーは「FileZilla」がおすすめです。

PCに入っていない方は無料でダウンロードしてください。

自分のサーバー情報を元にアクセスしてダウンロードします。

※ログイン情報はサーバー契約時に送られるメール文に記載してあります。エックスサーバーの場合は【Xserverアカウント】■重要■ サーバーアカウント設定完了のお知らせ[試用期間]という件名のメール文の中の【6】作成したホームページデータのアップロードについて（FTP情報）に情報が記入されています。この3つの情報でログインしてください。

③.htaccessファイルを編集

ダウンロードしたファイルがテキストエディターで編集します。

エディター上で.htaccessファイルを開き先ほどのコードを貼り付けます。

※.htaccessファイルは隠れファイルなのでPC上では表示されません。「Command + Shift + .」を押すと表示されるようになります。

④.htaccessファイルをアップロード

コピペしたら.htaccessファイルをアップロードします。

先ほどと同様にFTPツールを使ってアップロードしてください。

WordPress管理画面からもう一度「設定」→「EWWW Image Optimizer」を開きます。

「WEBP」と記入されていたら完成です。

既存の画像もWebPに変更

先ほどまでの作業は今後アップロードする画像を自動でWebPにする方法です。

ここからは既にアップロードした画像をWebPに変更する方法を説明します。

①WordPress管理画面から「メディア」→「一括最適化」を選ぶ

②「最適化されていない画像をスキャンする」を選択

③「〇〇点の画像を最適化」を選択

すると既にアップロードした画像もWebPに変換されます。

WordPressでwebpに変更する方法は以上です。

WebPに変換・対応されてるか確認する方法

実際に画像がwebpに変換されたか確認します。

始めに画像を保存します。

画像を右クリックして「名前をつけて画像を保存」を選択します。

続いて保存した画像の拡張子を確認します。

拡張子が「.webp」になっていれば無事に反映されています。

WebPに対応するメリット

webpに対応するメリットは「画像の容量を削減できる」からです。

WebPは容量削減に繋がる

拡張子をwebpに変換すると画像の容量が削減されます。

Googleが示したデータによると、25~34%削減することが出来ます。

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

出典：Google developers

画像の容量を削減し、サイトの読み込み速度を向上させることで、SEOに良い影響を及ぼすことが出来るのです。

WordPressにWebPを対応するのは簡単

この記事ではWordPressにWebPを対応する方法を紹介しました。

WebPはSEOに良い影響を与えます。

まだ対応していない方は是非行ってみてください。

WordPressに関する他の記事はこちら

あわせて読みたい

WordPressにBasic認証を設定する方法を紹介！ WordPressでBasic認証を設定する方法を知りたい この記事は上記の課題に向けて作成しています。 WordPressではBasic認証を設定することが出来ます。 設定方法が2つある...

あわせて読みたい

WordPressで吹き出しを作成する方法を紹介！ WordPressで吹き出しを作成する方法を知りたい この記事は上記の課題に向けて作成しています。 WordPressでは簡単に吹き出しを作成出来ます。 まだ吹き出しを作成してい...

あわせて読みたい

WordPressで予約投稿する方法を説明します！ WordPressで予約投稿する方法を知りたい この記事は上記の課題に向けて作成しています。 WordPressには予約投稿機能がついています。 予約投稿機能を使うことで指定した...