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

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

※当ブログでは商品・サービスのリンク先にプロモーションを含みます。ご了承ください。

takato(@n8takato)です!

WordPressにWebPを対応させる方法を知りたい

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

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

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

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

この記事を読むメリット

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

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナー・webディレクターとして勤務
  • webデザイナー3年、webディレクター1年目
  • web制作現場で学んだことを発信している人
目次

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

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

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

WordPressにwebpを対応させる手順

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

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

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

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

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

  • EWWW Image Optimizer

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

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

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

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

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

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

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

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

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

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

.htaccessファイルの編集

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

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

①コードを取得する

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

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

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

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

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

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

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

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

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

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

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

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

③.htaccessファイルを編集

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

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

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

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

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

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

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

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

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

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

WordPress管理画面からもう一度「設定」→「EWWW Image Optimizer」を開きます。「WEBP」と記入されていたら完成です。
「WEBP」

既存の画像もWebPに変更

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

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

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

①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には予約投稿機能がついています。 予約投稿機能を使うことで指定した...
  • URLをコピーしました!
目次