WordPressの記事内の画像をData URIで扱ってサイトを高速化させる方法

WordPressの記事内の画像をData URIで扱ってサイトを高速化させる方法

Kazuya Takato

Kazuya Takato

こんにちは、CTOのづやです。

WordPressを利用していた際、サイト高速化の実験として記事詳細ページで使用する画像をData URIにできないかなと思い、以下のことを試してみました。

記事詳細ページで使用する画像をData URIで扱ってみた

なるべくすぐ戻せるように、通常の画像サイズも選べるような作りを目指して、アップロード時点でBase64エンコード版のサイズを用意する形で実装しています。
functions.phpに記載する形です。

// 画像サイズ名を定数で宣言(今回はbase64って名前で作成しています)
define("BASE64_IMAGE_KEY" , "base64");

// エンコードする画像のサイズを追加しておく
add_image_size(BASE64_IMAGE_KEY , 400 , 400);

// 画像ファイルアップロードのメタデータ保存の際にエンコードデータと置き換える
add_filter("wp_update_attachment_metadata" , up_load_attachment_metadata , 30 , 2);
function up_load_attachment_metadata( $data , $post_id) {

	// 設定したいサイズがある場合のみ動作させる
	if(!empty($data['sizes'][BASE64_IMAGE_KEY])) {
		// 対象となるファイル
		$targetSize = $data['sizes'][BASE64_IMAGE_KEY];

		// アップロード用のディレクトリ
		$uploads = wp_upload_dir();

		// フルサイズのパスを取得
		$fullSizeFile =  $uploads['basedir'] . DIRECTORY_SEPARATOR  . $data['file'];
		$fullSizeBaseName = wp_basename($fullSizeFile);

		// ディレクトリまでのパスを取り出す
		$baseImgDir = str_replace($fullSizeBaseName , "" , $fullSizeFile);

		// 欲しいサイズのファイル名を取得
		$targetFilePath = $baseImgDir . $targetSize['file'];

		// 画像の形式を取得
		$targetFileType = $targetSize['mime-type'];

		// base64にエンコード
		$imageData = base64_encode(file_get_contents($targetFilePath));

		// 対象のサイズ情報を上書き
		$data['sizes'][BASE64_IMAGE_KEY]['file'] = 'data: ' . $targetFileType .';base64,'.$imageData;

	}

	return $data;
}

// 表示側も影響がでるので指定サイズの場合用の処理を書く
add_filter("image_downsize" , returnBase64Src , 10 , 4);

// 指定されたサイズがエンコード版の時は、エンコードされた画像情報を返す処理
function returnBase64Src($ret , $id, $size){

	if($size !== BASE64_IMAGE_KEY) {
		return $ret;
	}

	$meta = wp_get_attachment_metadata($id);

	// metaデータが存在する場合
	if(!empty($meta["sizes"][BASE64_IMAGE_KEY])) {
		$ret = array(
			$meta["sizes"][BASE64_IMAGE_KEY]['file'] ,
			$meta["sizes"][BASE64_IMAGE_KEY]['width'] ,
			$meta["sizes"][BASE64_IMAGE_KEY]['height'] ,
			true
		);
	}

	return $ret;
}

こんなコードを書いておくと、アップした画像のBase64エンコード版がサイズの1つとして保存されます。

これでエンコードされた画像が保存されます。
あとは管理画面で選択できるようにする必要がありますが、そこは対応してくれるプラグインがあったので以下を利用させてもらいます。

また、管理画面のビジュアルデータがそのままだとビジュアルエディタでエンコードした画像の表示が行えないので、そちらを解消するための処理も行います。
林家次男ブログ様にちょうどそちらに対応する記事がありましたので、参考に対応しました。

これで画像をアップしてみますと、無事に管理画面では表示されました。

投稿に挿入する際に、サイズでbase64を選択します。
 

表側もばっちり表示されています。
※当然ですが対応されてないブラウザは表示されませんが。
 

ソースをみるとしっかりエンコードされております。

さいごに

リクエスト数を減らせるというメリットは大きいと思うので、状況に応じて上手く使っていきたいものです。

それでは、また。

 

【WordPressをカスタマイズ】

メディア運営に最適!WordPressでバナー管理機能を実装する5つのステップ

WordPressカスタマイズの幅が劇的に広がる、フィルターフックとアクションフックの使い方

「PC表示」の実装が簡単なWordPress表示切替プラグイン、Multi Device Switcherの使い方

WordPressのカスタマイズでよく使う!初心者が覚えておきたい条件分岐タグ9選

フックって?WordPressのカスタマイズ方法を説明します!

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

1983年生まれ。SIerとしてのキャリアをスタートし、JavaやC#を中心に多岐にわたる開発プロジェクトにエンジニアとして参加。その経験を活かし、LIGを創業。バックエンドおよびフロントエンドエンジニアとしての深い知識と経験をもとに、多様なプロジェクトに従事。2023年7月には社長室室長に就任にし、社内の体制やルールの最適化、AI技術の推進など、経営戦略の一翼を担っています。

このメンバーの記事をもっと読む