Base64 Images:自動的に画像ファイルをBase64でエンコードし埋め込める

2018年5月10日

Google 検索での表示順位に影響を与えている要素の一つとして、
Web ページの表示速度があります。
表示速度を上げる方法の一つに HTTP リクエストを減らすという方法があります。

img タグで指定されている画像は、
Web ブラウザーで表示される度に Web サーバーとの通信が発生するので、
必ず HTTP リクエストが発生します。

そのため、表示する HTML 中に複数 img タグが記述されていると、
その数だけ HTTP リクエストが発生することになります。
ただし、画像ファイルに関しては「インラインイメージ」と言う方法を使うと、
HTTP リクエストを発生しないようにすることができます。

そのような時に便利な WordPress 用プラグインがあります。
それは「Base64 Images」です。
そのインストール手順から日本語化・使い方と設定などを解説していきます。

Base64 Images

Screenshot of wordpress.org

Base64 Images は、サイトを表示する際にテーマや記事中で使用している画像ファイルを自動的に Base64 でエンコードして WordPress が出力する HTML に埋め込んで表示できます。

記事を作成もしくは更新時点でのバージョン:v 1.1.4
マルチサイトでの利用:可

インストール手順

下記の URL から ZIP ファイルを入手して、管理画面からアップロードして有効化するか
Base64 Images – WordPress.org

もしくは、WordPress.org の公式プラグインディレクトリにリリースされているので、
管理画面から入手できます。

ダッシュボードから「プラグイン」メニューの「新規追加」を選択し、
プラグイン追加画面右上の検索窓に「Base64 Images」と入力します。

WordPressプラグイン「Base64 Images」のスクリーンショット

検索結果の一番左上に表示されると思うので、「今すぐインストール」をクリックします。
※一番左上に表示されない場合は、上記の画像から探して下さい。
インストールが完了したら、プラグインを「有効化」します。

プラグインのインストールに慣れていない方は、
下記の記事にて詳しく解説していますので、御覧ください。

WordPressプラグインのインストール手順を解説 – WordPress活用術

日本語化

Base64 Images は、バックグラウンドで動作します。
専用メニュー・設定画面も含めて何も無いので、日本語化を気にする必要は無いです。

専用メニュー

Base64 Images には、専用メニューは無いです。

使い方

バックグラウンドで動作するので、何もすることは無いです。
有効化するだけで大丈夫です。

WordPressプラグイン「Base64 Images」のスクリーンショット

有効化した後で、記事を表示して HTML ソースを確認すると、
上のような感じで Base64 でエンコードされて HTML に埋め込まれているのが分かります。

注意点

インラインイメージとは、
画像ファイルを Base64 にエンコードして HTML に埋め込んでいく方法です。
埋め込むと言っても文字列(テキストデータ)として HTML に埋め込みますので、
HTTP リクエストが減る反面、Base64 にエンコードすることによって、
画像ファイルのままよりもデータサイズが大きくなってしまいます。

なので、テーマ自体が使用している画像ファイルは小さいと思うので、
その影響は少ないと思いますが、毎回記事中に画像ファイルを挿入する場合には、
Gzip 圧縮などを行うようにしておきましょう。

URL

Base64 Images – WordPress.org

本ページはアフィリエイトプログラムによる収益を得ています

Base64

Posted by 管理人