TumblrレスポンシブWebデザインの問題の一つに、PCと同じ画像を回線速度の低いモバイルデバイスでも表示させるのか、といった点が挙げられます。そこでこの問題に対する解決策を調べてみました。Javascriptを使って表示画像を変えるJavascript(jQuery)を使う方法です。幾つもの手法が発表されてますが動作も様々です。picturefillscottjehl/picturefilldata属性を使って複数サイズの画像を指定します。指定したウインドウサイズによって表示する画像を切り替えます。ソースは下記のように書きます。alt="DUCK"></noscript></span>data-srcに表示する画像、deta-mediaにメディアクエリを書きます。deta-mediaを指定しない画像がデフォルトで表示されます。JS非対応ブラウザのフォオールバックとしてimg要素で画像を指定しておきます。大きい場合は大きいサイズの画像に差し替えます。ソースは下記のように書きます。/>javascriptと.htaccessを設置する必要があります。画像もそれぞれのサイズが必要です。ブレークポイントはデフォルトで480に設定されてますが、オプションで変更可能です。GitHub最初にモバイル用の画像を表示し、指定したウインドウサイズ以上からのアクセスであれば大きい画像に差し替えます。それぞれの画像が必要になります。ソースは下記のように書きます。data-fullsrc="../img/largeImage.jpg">DEMOHiSRCteleject/hisrc最初にモバイル用の画像を表示させます。jQueryで帯域をチェックしてナローバンドならばモバイル用の画像をそのまま表示、ブロードバンドならば大きいサイズの画像を表示します。Phoneのような解像度が2倍のデバイスには大きい画像を表示させます。ソースは下記のように書きます。それぞれの画像を用意する必要があります。画像を切り替える帯域の基準値を設定できます。JS、stowballなどもあります。自分が知らないだけでこれ以外にも存在すると思います。HTMLアクセスしたデバイスによって最適な画像を自動生成します。ソースに手を加えることがないので導入が容易です。下記の環境が必須です。libPHP内のconfigでブレークポイントや生成する画像の質などの設定もできます。Srcは、画像を渡すと各デバイスに最適なサイズの画像を返してくれるAPIです。ソースを変更する必要がありますが、画像は1つで済みます。ソースは下記のように書きます。これは一例で他にも様々な書き方があります。Agentで判別してますが、javascriptを使うことでウインドウサイズでの判別にも対応できます。画像をimgではなく別の方法を使って表示します。CSSを使う特にCSS3からは描画に関するプロパティが充実してます。それらを使えば下記のボタンような簡単なエレメントを作ることができます。Fontsを使って画像を表示させます。Fontsで表示してます。123456789ただし、あくまでテキストを画像として見せてるだけなので、HTMLの構造的には適切ではありません。(疑似クラス「:after」「:before」を使用すれば解決します。URIはドキュメントに埋め込まれたデータに直接アクセスするスキームです。このスキームを使うとサーバーにリクエストせずに画像を表示できるので、HTTPリクエストを減らせます。HTMLのファイルサイズが増えてしまうので、キャッシュされるcss内に書くとか、gzipによる圧縮を利用するなど工夫が必要です。URIへの変更はオンラインのツールで行えます。画像そのもののサイズを小さくすることで対応します。色数を減らす単純に画像の質を下げればファイルサイズは小さくなりますが、画像は荒くなります。そこで最近は画像の質を保ったままサイズを小さくするため一工夫されてます。2012は2色刷りのような画像にすることでデザインしつつファイル容量も落としてます。2012サンプルを作ってみました。PNG-24(54.98kb)PNG-24(41.28kb)PNG-8(24.03kb)その他、「周囲をぼかしてサイズを下げる」などの方法もあります。ナローバンドの時代にファイルサイズを下げるために試行錯誤した経験がまた活きてきそうです。ファイル圧縮ツールjpeg、png、gifの画像ファイルを更に圧縮するツールも沢山存在します。それらを利用するのもひとつの方法です。transparency終わりにデバイスごとの回線速度の差をレスポンシブWebデザインの問題とするのであれば、これは画像に限ったことでなくhtmlやプログラムのレスポンスも同様の問題と捉えることができます。要はサイトの高速化が重要になってきます。いうことで画像だけ対応すれば良いのではなく、サイト全体で考えてかなきゃらないなと思う次第です。ちなみに画像に関しては下記の仕様の今後を注目していきたいです。2012で知った情報です。その他、たいへん面白い話が聞けたので自分の中で咀嚼して別の記事でアウトプットしたいと思います。Spiceさんのエントリです。PMとおりすがり参考になる記事で、勉強になりました。ところで、以下のリンクURLが間違っているように思いますので、ご連絡いたします。私のPCからだと、画像が表示され、サイトへのリンクではないようです。PMhiroご指摘ありがとうございます。記事に修正反映しました。方法はいろいろなところで紹介されております。当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。Spiceサービス作りましたAbout自分で得た情報、学んだことのアウトプットのために始めたblogです。して情報を共有することで少しでもWEB業界に貢献できたらなと思ってます。このblogが誰かの役に立てたら幸いです。内容で間違いなどありましたら指摘頂けると助かります。AuthortooltipHiro東京在住のフリーランスwebデザイナー。TSUKURIBEと言う屋号で活動してます。お問い合せは右のフォームまたはTSUKURIBEのサイトよりお願いします。Formフォームまたはこちらよりお問い合わせください。