写真1枚で1MB超はちょっと大きすぎますね・・・
Retina環境の対策としては実寸の2倍が相場です。
スマホに限るとして最大640〜750くらいですね。
中にはデバイスピクセル比が3という端末もありますが、
3倍で作るとさすがに重くなりすぎるので、現状は3倍環境には対応していないところが多いと思います。
レスポンシブの場合PCの大画面モニタ環境に合わせて画像を作るとそれこそ2000px近いサイズが
等倍サイズでも必要となってきますが、そうなってきた場合はサイズ違いを複数用意して、
環境に応じて出力しわける仕組みが必要となってきます。
●img画像の場合:Retina.jsなどを使って等倍→2倍の自動差替
●背景画像の場合:メディアクエリで背景画像の等倍→2倍の自動切替
上記がこれまでの一般的なRetina対策の手法でしたが、実はこの方法だといずれも
最初に等倍画像を読み込んだ後、新たに2倍画像に差し替えるという挙動となっており、
クオリティは保たれますがデータは二重ロードされる状態となってしまっています。
従って、最初から2倍画像だけを読み込んだ場合よりも重い、ということになります。
二重ロードせず、それぞれの環境に最適な画像をブラウザ側が判断して選択的にロードする仕組みは
「レスポンシブイメージ」といい、HTML5.1、CSS4の仕様として用意されています。
現状まだ正式にこれらをサポートしている環境は限られますが、ある程度polyfillスクリプトなどで
補助もできますので、どうしても必要であればこれらの仕組みを検討すると良いと思います。
・srcset属性
・picture要素
・-webkit-image-set()
このあたりを検索してみるとよろしいかと思います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/09/16 03:04 編集