レティーナに対応させるsrcsetはjavascriptと一緒に使う

2日連続で更新してるのはモロモロ作業が終わったからなワケですが、今回やってた作業は画像の最適化。最適化といっても圧縮したりとか、遅延させるとか、そーゆーのじゃなくて、各端末での最適化です。
IE大国とか言われていたらしい日本ですが、スマホやタブレットの登場でそーゆーワケでも無くなったワケですし、スマホの登場でwebサイトはレスポンシブが推奨されるようになったみたいだけど、何が大変ってヤッパリ画像の扱い。
ディスプレイも通信環境もブラウザも様々になったから面倒極まり無いワケですが、出来る限り取り組んでみました。

グリッドデザインにはsrcsetを使ってjavascriptで制御

僕のやってるメインのHPはグリッドデザインってヤツ。画像が並ぶヤツ。
あの部分のデザインはwordpressの2014テーマのデフォルトのままなワケですが、レスポンシブなグリッドデザインはウィンドウの大きさによって、画像の表示サイズも可変する訳ですがコレが実に厄介。

PCの解像度の1300px前後で画像を最適にした場合、タブレットの解像度800px前後位？で最適になってないケースって多い。当然ながらスマホだともっと合ってないかも。

その辺対応させる為に、まずPCとモバイルで条件分岐させたのは今まで同じなんですが、それだけだとチョット厳しくてsrcsetを使ったワケです。

<img src="***.jpg" alt="" srcset="***2.jpg 350w" width="***" height="***">

こんな感じで書くsecsetですが、対応してるブラウザにはコッチの指定したブレイクポイントやピクセルレートにscrsetの画像のみ読み込ませる事が出来る。
『srcsetの画像のみ』っての結構キモで、必要以上に画像読ませないからデータ制限のある端末には優しい設定になるワケです。

対応してないブラウザも多いからjavascriptも使う

問題なのは見出しの通り、対応してないブラウザも多いよねって事。みんなの環境なんて多種多様で本当に分からないですからjavascriptも使わないと対応しきれないと思う。

例えばpcでは300pxが理想で、タブレットでは600pxが理想の場合、pcに合わせればタブレットでは小さいし、タブレットに合わせればpcでは大きい。

でこんな感じにしてみる。
html

<img class="spset" src="***.jpg" alt="" srcset="***2.jpg 300w" width="300" height="***">

ブレイクポイントが300wになってるのはモバイルの事もあるから。
こうしておけば高精度ディスプレイでsrcsetに対応してればホボsrcsetの画像を読むはず。

javascript

    $(window).on('load resize',function(){
        if (1008 > $(window).width()) {
             $('.spset').each(function(){
                var bigimg = $(this).attr('srcset');
                $(this).attr({ src: bigimg });
                $(this).attr('src',$(this).attr('src').replace(' 300w',''));
             });
            $('.spset').removeAttr('srcset');
            $('.spset').attr({ 'width': 'auto', 'height': 'auto' });
        }
        });

javascript(jquery)で画面サイズから判断させて、srcsetの画像をsrcに入れ替え。
上では1008px未満の画面サイズで入れ替えが発生。
そのまま入れ替えると、『300w』の文字が邪魔するから消して、removeAttrでsrcsetも消しちゃう。widthとかは上ではautoにしてるけど、サイトの構成で変わるかも。
少なくともimg要素にはwidth、heightがあったほうがレンダリングは早いって話だから、それを指定していた場合入れ替え時のwidth、heightを開放する必要がある。

サンプルとしてはこんな感じになります。

サンプル

pcとスマホで見ると違いが分かると思います。
pcでは150pxの画像が入ってて、スマホ(srcset対応の場合)やタブレット(高精度ディスプレイ)は違う画像が入ってるはず。
あと、PCでウィンドウを1080px未満にすると画像が300pxに切り替わります。
つまり、srcsetに対応しててピクセルレートが高い端末には常時300pxの画像を読ませてるので、無駄な150pxの画像の読み込みは無く、srcsetに対応してない場合はウィンドウサイズによっては2枚の画像を読んじゃうけど、ウィンドウサイズはjQueryで制御出来るから必要最低限に留める事が出来るってワケです。

ちなみに、srcsetやpicture要素を未対応ブラウザに対応させるライブラリもあるようですが、多用しなければ自分で書いたほうが軽くて良い。

まとめ

srcsetとかpicture要素とか、対応ブラウザの有る無しとか、cssのブレイクポイントとか、html5にcss3、さらにはブラウザも以前より多様になって、デバイスも色々で、真剣に取り組むと本当に難しいなと思います。
ですが、自由である事は間違いワケで、自由な事が良い事か、不便な事か考えさせられますね。

僕の場合、専門書も一冊も持っておらず、webサイトと様々なサイトのソースコードで勉強した完全な独学なので、正しいのか正しくないのかすら未だ分かりませんが、専門でPCに張り付く事が出来れば、僕程度でももっともっと面白く色々出来る時代になったのは間違いようです。

ではでは

---

---