utility
ただのimgタグをsrcsetによるレスポンシブ対応へ変換するコード
作成日: 2023年11月19日
GoogleがMFIを始めて7年経つが、その頃もそれ以前もPC向けにデザイン・設計をしていた。
自身20年を超えるサイトを持つが、DWでの手書きからティタートッターなるCMSを使い程なくしてMovableTypeを使うようになった。
最新の7x（8のベータは出ているが・・・）でもそうだが、写真を見せるサイトだとスマホ用の小さな解像度の写真はPC向けを併せ考えると使いたくない。
単なる作り手の拘りではあるが、写真の比較的細部のディティールまで見てもらいたいときはPCで見て欲しいと思うのだ。
結論から言うとスマホ/タブレットで80%以上となるのでUI上そんな作り手の想いなどどうでもよいのだが、Mac買えば2560サイズのディスプレイは当たり前、せめて比較的流通の多い1920サイズの画像は使いたくなる。
また住宅関連のサイトのWebマスターを数年やってきたが、こうした耐久消費財やリピートの無いものはCV数はスマホもPCも変わらない傾向があった。住宅関連でも65%くらいはスマホからの流入だが、架電含めたサイトからのCV数は50:50だった。
建築物はその大きさから画面が小さいとちょっとした部位も解り辛い、作り手としてもそういった部分で他社との商品の差別化を図っていることは少なくなく、もちろん寄った画像と引いた画像とを併せるがスマホの小さい画面では伝えたいことが伝えづらいのだ。
話を戻すと、個人の拘りであれディティールをしっかり伝えたいものであれ、UI＝この場合は表示速度を損なわず表示できればOKなのだが、数百からの古いページのimgタグを全部書き換える/やり直すのはとんでもない労力（もちろんCMSでだ）なので、自動生成されたサムネがあるという前提だがphpでsrcsetによるデバイスサイズ毎の画像読み込み変更を行うコードを作ってみた。
前提条件
- 自動生成されたサムネが同一ディレクトリにるある、若しくは作れる
- サムネのサフィックスに統一性がある
- phpでやるからページの拡張子はphpであること
基本MovableTypeベースなので、サムネが欲しけりゃ投稿ページにassetthumbnailurl width=”480″とか書いて一度再構築すれば作ってくれるという前提。これはWordpressだとコードが複雑になるが、mtmlとphpの組合せなら比較的容易。
<?php
$html = '<p><img src="hoge/fuga.jpg" alt="fuga" /></p>';
$pattern = '/<img\s+src="(?<baseImagePath>\/weekdaysurfreport\/images\/[^"]+)"\s+alt="([^"]+)"[^>]*>/i';
preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
foreach ($matches as $match) {
$originalImagePath = $match['baseImagePath'];
$baseDirectory = dirname($originalImagePath);
$thumbsDirectory = $baseDirectory . '/thumbs/';//サムネのディレクトリがhogeディレクトリ内の別のディレクトリに有る場合、MTあるある
$modifiedImagePath = $thumbsDirectory . basename($originalImagePath, '.jpg');
$replacement = '<img src="' . $originalImagePath . '" alt="' . $match[2] . '" srcset="' . $modifiedImagePath . '-480.jpg 480w, ' . $modifiedImagePath . '-1200.jpg 1200w,' . $originalImagePath . ' 2560w" sizes="100vw">';
$html = str_replace($match[0], $replacement, $html);
}
echo $html;
?>
これで出力結果は
<img src=”hoge/fuga.jpg” alt=”fuga” srcset=”hoge/thumbs/fuga-480.jpg 480w,hoge/thumbs/fuga-1200.jpg 1200w,hoge/fuga.jpg 2560w” sizes=”100vw”>
となる。
サムネディレクトリがオリジナルと同一でない場合は、/thumbs/のところをCMSのコードでサムネのディレクトリにすればよい。
srcsetのw値はお好みで、sizesもデバイスによりお好みで変えてもOK。
ちょっとつたないコードで、サフィックスに拡張子を付けているせいで拡張子がダブるので、ダブった拡張子を間引く格好にはなっているが、これでサーバーサイドでpagespeedinsiteで減点の減るページができる。