WordPressのアイキャッチを自動でbase64化して表示を高速化する方法
自分の中では画像のbase64化してHTMLやCSSに直接書き込むことがトレンドなんですが
今回はWordPressでアイキャッチを呼び出すときにbase64化して表示する方法です
WordPressでアイキャッチをbase64化して高速表示させる
最初に画像をbase64化すると、何がいいことあるのか？
base64化することで、HTML、CSSに埋め込むことが出来てサーバーとのセッション数の節約ができるのでサーバーとのやりとりが高速が出来る。また、レンダリングが高速になりる
というメリットがあります、base64はメリットが多いのですが
画像をbase64化するにはサーバーのリソースを消費しますので、サーバーに負荷がかかります
WordPressの場合はキャッシュプラグインと組み合わせることで、base64化を最小限に出来ます
それでは本題の、アイキャッチをbase64化する方法
コード
<?php
//タイトル取得
$title= mb_substr($post->post_title,0,25);
//url取得
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,array(177,133), true);
//拡張子を取り出すために
$img_type = end(explode('.', $image_url[0]));
//base64変換
$img = file_get_contents( $image_url[0] );
$img = base64_encode( $img );
?>
<img src="data:image/<?php echo $img_type; ?>;base64,<?php echo $img; ?>" title="<?php echo $title; ?>" alt="<?php echo $title; ?>" width="177" height="133">
解説します
これは、実際に使っているコードで。base64化だけだともう少し短くなります
まずはアイキャッチのURLを取得する必要があります
//url取得 $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,array(177,133), true);
ここではアイキャッチのURLを取得しています
アイキャッチに登録されている画像の177×133サイズの画像を取り出しています、画像のサイズはそれぞれの環境に合わせてください。最適な画像サイズを利用することで、より効果を発揮します
画像のタイプを拡張子から取り出す
//拡張子を取り出すために
$img_type = end(explode('.', $image_url[0]));
base64で画像を記入するときには画像のタイプが必要になるので、アイキャッチのURLから判別して取り出しておきます、[0]は一番最初の情報を取り出しています。一番最初の情報にURLが入っているからです
取得は文字列の後ろから. ドットまでの文字列を $img_typeに格納します
画像をbase64に変換する
//base64変換 $img = file_get_contents( $image_url[0] ); $img = base64_encode( $img );
$img に画像のURLを格納します
そして$imgをbase64に変換して、$imgに戻します
imgタグに書き出す
<img src="data:image/<?php echo $img_type; ?>;base64,<?php echo $img; ?>" />
最後に今まで取得した情報を元にimgタグの中身を書き出します
これで画像がbase64したもので表示されます
これでアイキャッチを取得してbase64化して表示させることが出来るようになります。
COMMENT