srcsetに対応してみた

ギャラリーページを作るまで

1. JPGファイルをアップロードしたら縮小画像を自動作成
2. ギャラリーを作成する
3. srcsetに対応してみた

常に大きい画像を表示するのは無駄でしかない。

srcsetとは?

ブラウザの幅によって読み込む画像を変更できるHTML5のタグです。

スマホで大きい画像を表示しても無駄でしかないので、レスポンシブデザインのサイトでは必要になると思います。

Wordpressでは4.4以降の対応のようです。もちろんEvolution CMSでは対応していません。

詳細な説明はHTML5/埋め込み/img要素 レスポンシブイメージ(画像サイズの最適化) - TAG indexでわかります。

準備

異なるサイズの同じ画像を用意します。

「JPGファイルをアップロードしたら縮小画像を自動作成」でアップロードした画像を自動縮小させるのに成功しました。

下記の三つのサイズを自動で作成します。

//XLサイズ
 Resize($src, 1600); 
//Lサイズ
 Resize($src, 1200);
 //Mサイズ
 Resize($src, 960);
 //Sサイズ
 Resize($src, 640);

スニペット「srcSet」

スニペットを新しく作成します。

<?php
//[[srcSet?&src=`画像ファイル`&alt=`alt属性`]]
if(!isset($src)) return;

//画像の情報取得
$pathData = pathinfo($src);
$dir = $pathData['dirname'].'/';
$filename = $pathData['filename'];

//画像のパスと横幅の値を入れた配列を作る
if (file_exists($dir)) {
	if( is_dir( $dir ) && $handle = opendir( $dir ) ) {
		$i = 0;
		while( ($file = readdir($handle)) !== false) {
			if( filetype( $path = $dir . $file ) == "file" && strpos($path, $filename) !== false) {
				$result[$i]['path']=$path;
				$result[$i]['width']=getimagesize($path)[0];
				++$i;
			}
		}
	}

//画像の横幅が広い順にソート
	foreach ($result as $key => $value) {
    	$sort[$key] = $value['width'];
	}
	array_multisort($sort, SORT_DESC, $result);
}

//src属性
$src = ' src="'.$result[0]['path'].'"';

//srcset属性
foreach($result as $image){
	 $images[] = $image['path'].' '.$image['width'].'w';
}
$srcset=' srcset="'.implode(',', $images).'"';

//ビューポートの設定は最大幅の画像に合わせる
$width = $result[0]['width'];
$height = getimagesize($result[0]['path'])[1];
$sizes = ' sizes="(max-width: '.$width.'px) 100vw, '.$width.'px" width="'.$width.'" height="'.$height.'"';

//出力
echo '<img'.$src.$srcset.$sizes.' alt="'.$alt.'">';

出力テスト

次のように記述します。

[[srcSet?&src=`assets/images/uploaded-image-resize/sample.jpg`]]

すると下記のように出力されます。

<img src="assets/images/uploaded-image-resize/sample.jpg" 
srcset="assets/images/uploaded-image-resize/sample.jpg 1280w,
assets/images/uploaded-image-resize/sample_1200x900.jpg 1200w,
assets/images/uploaded-image-resize/sample_960x720.jpg 960w,
assets/images/uploaded-image-resize/sample_640x480.jpg 640w" 
sizes="(max-width: 1280px) 100vw, 1280px" width="1280" height="960" alt="">

ブラウザが対応していれば、最初に読み込まれるブラウザの幅によって読み込まれる画像が変わります。

元の画像の幅が1280pxなので1600px幅の画像は作成されていません。

テストはシークレットウィンドウで幅を変えてから読み込みました。

このスニペットを使用しているページは大きな画像を表示しているページです。(例:)

• 前の記事
• 次の記事