WordPressのアイキャッチを自動でbase64化して表示を高速化する方法

WordPressのアイキャッチを自動でbase64化して表示を高速化する方法
このエントリーをはてなブックマークに追加
PR

自分の中では画像の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化して表示させることが出来るようになります。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)