高速化の一つの手段として。
状況例
BTOでPCを販売する感じに各パーツを指定できる商品があったとして、WEB上で視覚的にシミュレーションできたらいいよねって場面があったりする。ベースになるイメージがあって、選択肢により各パーツが切り替わる。こういうの、ECでカスタマイズ可能な商品を販売する場合、あったらいいですよね。
そういうのを作る場合、パーツごとに画像を用意して表示するものを切り替えるわけで。選択肢が多くなれば画像も増えるし、画像を重ねる前提であれば透過pngじゃないといけなかったりして、読み込む量は相当なものになる。普通に組めば選択するたびに画像を読み込むことになって、画像が重ければ重いほど表示が遅延する。作った方は理解できても、使う方はめっちゃだるいよねってなる。
どうしようねって話。
解決方法
画像の切り替えが早くなればいい。早くするにはどうすればいいかを考えることになる。
画像を軽くする
高画質で書き出したjpgは当然として、pngも地味に重い。なので、画像が大きければかなりやばいことになる。
まずは縦横のサイズを許容できるギリギリに削る。
次に思いつくのは圧縮。オンラインでそういうやつの無料サービスがあったりする。
もう一つはwebP化。現行版のphotoshopであれば標準で扱える。単純にwebP形式にするだけでかなり軽くなるし、設定で更に調整することもできる。
気になるのは対応ブラウザだけど、IEのサポートが切れたしもうスタンダードでいいんじゃないですかね。
プリロード
画像の表示が遅い場合、改善策として使用する画像をhtml側でpreload（事前読み込み）する方法がある。画像表示の発火がcssだろうがjsだろうが関係なく効果がある。
<link href="img/example.jpg" as="image" rel="preload">数個程度ならこれでいいんだけど、沢山あるとめんどくさい。そういう場合はjQueryでpreload。
記事は古いけど現役で使える。
jsで拾うわけだからどんな形にでも対応できる。例えばこんな感じで切り替えを仕込んでたとして。
<div id="target">
<img src="img/example.png">
</div>
<ul class="select_list">
<li><a data-filepath="img/1.png">select</a></li>
<li><a data-filepath="img/2.png">select</a></li>
<li><a data-filepath="img/3.png">select</a></li>
<li><a data-filepath="img/4.png">select</a></li>
<li><a data-filepath="img/5.png">select</a></li>
<li><a data-filepath="img/6.png">select</a></li>
<li><a data-filepath="img/7.png">select</a></li>
<li><a data-filepath="img/8.png">select</a></li>
<li><a data-filepath="img/9.png">select</a></li>
<li><a data-filepath="img/10.png">select</a></li>
<li><a data-filepath="img/11.png">select</a></li>
</ul>こんな感じで書ける。
$(function(){
$('.select_list a').each(function(){
//プリロード
filePath = $(this).data('filepath');
$('<img>').attr('src',filePath);
}).on('click', function(){
//切り替え
filePath = $(this).data('filepath');
$('#target img').attr('src',filePath);
})
})1つずつ書かなくていいのは助かる。これなら後付でも簡単にできる。
外部ファイル上で書いてもしっかり効果があった。
懸念点
preloadは素晴らしい機能だと思うけど、こちらが指定するファイル全ての読み込みを強制してるわけで、閲覧中に表示しなかったとしても通信が発生しちゃうわけで、閲覧者に優しくない感じがする。
あとはまあ、最初に一気に読ませるわけだからそれはそれで遅くなりそうな感じ。
その他
cssでmask-imageを使えば軽く作ったjpgで済むから脱透過pngができるように思ったんだけど、対象になるバリエーションが全て同じ形状じゃないとそれぞれにマスク用の画像を作らなきゃいけないから意味ないなってことで実用性としていまいちだった。
コメント