サイト表示速度を改善!「Converter for Media」で簡単WebP変換

サイト表示速度を改善!「Converter for Media」で簡単WebP変換

サイトに画像を入れると、見た目がわかりやすくなります。

特に、ホームページやブログでは、写真や図解があるだけで読みやすさがぐっと変わりますね。

ただし、画像の容量が大きいままだと、ページの表示が遅くなる原因に。スマートフォンで撮影した写真も、そのまま使うとかなりの容量になることがあります。

表示が遅いと、読者は待ちきれずに離れてしまうかもしれません。

そこで整えておきたいのが、画像の軽量化です。

WordPressでは「Converter for Media」というプラグインを使うと、JPEGやPNGなどの画像をWebP(ウェッピー)形式に変換できます。WebPに変換すると、画像の見た目を大きく崩さずに容量を抑えられるため、表示速度が速くなります。サクサク表示されると、サイト全体の評価やSEOにも、よい影響につながるでしょう。

この記事では、Converter for Mediaを使って、WordPressの画像をWebP形式に変換する方法を説明していきます。

目次

Converter for Media とは

WordPressプラグインConverter for Mediaを使えば、サイト内のJPEG、PNG、GIF 画像を簡単にWebP(ウェッピー)形式に変換できます。

WebP(ウェッピー)とは

花子

WebP(ウェッピー)って何?

すずのり

WebPとは、2010年にGoogleが開発した比較的新しい画像フォーマットで、拡張子は.webp

特徴としては、JPEGやPNGと比べてファイルサイズを大幅に削減できるのに、画質の低下がほとんどない点です。つまり、軽くて高画質な画像を実現できるのがWebPの強みです。

すずのり

画像を軽くしつつ、きれいさはキープ!

WebPの主な目的は、サイトの表示速度を改善すること。画像を軽くすることで、ページが早く表示され、ユーザーの満足度も向上しますね。

たとえば、軽い荷物を持った人と、重い荷物を持った人が競争するようなものです。軽い方が断然速いのは明らかです。

軽いと速い、重いと遅い

GoogleのPageSpeed Insightsでも、WebPへの変換が推奨されます。

「WebP 形式」への変換は、WordPressに専用プラグイン「Converter for Media」をインストールするだけ

すずのり

683KBの画像が64KBに減りました。驚きのマイナス91%です。

すでにアップロードした画像はまとめてWebPに変換でき、 新しくアップロードされる画像は自動でWebPに変換されます。

元画像はそのまま残せる

WebP 形式に変換された画像とは別に、元の画像もそのまま保存されます。 万が一、WebP 形式で表示できないブラウザから閲覧された場合は、元の画像を表示します。

なぜ、元の画像を残すことが良いの?

  • 万が一、WebP 形式に変換した画像に問題が発生した場合でも、元の画像に戻すことができます。
  • 将来的に WebP 形式に対応していないサービスで画像を使用する場合に備えることができます。

下記のように、元画像とは別のフォルダーにWebPファイルは作成されます。

元の画像フォルダー
wp-content > uploads > 2024 > 08

WebPの画像フォルダー
wp-content > uploads-webpc > uploads > 2024 > 08

初期設定が簡単

プラグインをインストールして有効化するだけで、基本的な機能を利用できます。

「.htaccessファイル」の編集や複雑な設定項目はほぼなく、WordPress初心者でも簡単にインストールできます。

インストール後は、WebP 形式への変換はプラグインが自動で行うため、ユーザーが手動で設定する必要がありません。

花子

インストールするのみ!

それでは、インストール方法を見ていきましょう。

Converter for Media のインストール手順

STEP
プラグインの検索
プラグインの検索

左サイドメニュープラグインから新規プラグインを追加を選択します。画面右上のプラグインの検索の枠にconverter for mediaと入力。

STEP
今すぐインストール
今すぐインストール

converter for mediaを見つけて今すぐインストールをクリック。

STEP
有効化
有効化

インストールが完了すると青いボタンで有効化と表示されるのでクリック。

STEP
自動更新を有効化
自動更新を有効化

自動更新を有効化をクリック。

これでインストールは完了です。

Converter for Media の使い方

画像を新規アップロード時の自動変換

新しく画像(メディア)をアップロードする場合は自動でWebPに変換されるので、今まで通りです。

すずのり

特別に何かすることはありません。

メディアファイルの一括変換方法

すでに、WordPressにアップロード済の画像がある場合は、一括でファイル形式をWebPに変換します。

STEP
プラグインの設定へ
プラグインの設定へ

プラグインの設定に移動するをクリック。もしくは左サイドメニューの設定からConverter for Mediaを選択。

STEP
一般設定
一般設定

デフォルトの設定のままでOKです。

・コンバージョン戦略:真ん中にチェック

・対応する出力フォーマット:WebPにチェック

・対応ディレクトリー:/uploadsにチェック

・新しい画像の変換:自動変換するにチェック(緑色)

STEP
一括最適化開始
一括最適化開始

画像の一括最適化で一括最適化開始をクリック。

STEP
メッセージ

有料バージョンへの案内メッセージが表示されますが、右上の×をクリックして閉じる。

STEP
WebPに変換完了
WebPに変換完了

緑の丸枠内に100%と表示されたらWebP変換は完了です。

※この例では「ファイル変換の思考が失敗スキップされました:18」と表示され、変換できなかった画像がいくつかありますが、ひとまずこのままにします。

すべてのファイルが変換できなくても問題はありません。

WebPになっているか確認

ブラウザからサイト内の画像がWebPに変換されているか確認してみましょう。

サイト内のどれか画像の上でマウスを右クリックし、名前をつけて画像を保存…を選びます。

画像をどこに保存するかの画面が表示されるので、そこでWebPファイルになっていることを確認します。ファイル名の拡張子が「.webp」になっていればWebPファイルに変換できています。

確認できたら保存はしないのでキャンセルをクリック。

Converter for Media の補足

互換性の問題

webpは古いブラウザには対応していませんが、2024年8月時点では、主要ブラウザはWebPに対応してます。

もしも、対応してない場合は画像が空白にはならず、WebP変換前の元画像が表示されるので大丈夫です。

EWWW Image Optimizerとの比較

画像を圧縮したり、webpに変換するプラグインでもっともポピュラーなのが「EWWW Image Optimizer」。

私も今まで何年もずっと利用してきましたが、WebPに変換するには、サーバー管理画面で「.htaccessファイル」を編集する必要があり、その編集がやや複雑です。

また、プラグインの機能の一部がSWELLの持つ機能とぶつかるため、部分的にOFFにしなければならないなど、SWELLとの相性が気になっていました。

「Converter for Media」はSWELLと相性が悪いという情報もなく、WebP変換に特化しているので、設定が簡単で初心者でも使いやすいことからご紹介しました。

まとめ

ページの表示が遅い原因のひとつが、画像の容量です。特に、スマートフォンで撮影した写真やブログ記事に使う画像が多いサイトでは、そのままアップロードするとファイルサイズがかさみがちです。

そこで活用したいのが、画像をWebP形式に変換するという方法。WebPは、JPEGやPNGと比べて容量を抑えやすい画像形式で、表示速度の改善につながります。

Converter for Mediaを使うと、WordPressにアップロードした画像を自動でWebPに変換できます。元画像を残したまま変換できるので、初心者でも安心して試しやすいプラグインです。

ただし、WebP化だけですべての表示速度の問題が解決するわけではありません。画像の横幅や容量をあらかじめ調整してからアップロードすることも大切です。画像サイズの基本については、こちらの記事でまとめています。

よかったらシェアしてね!
  • URLをコピーしました!
目次