レスポンシブでサイズによって、画像を切り替える方法がいくつかありますが、現場では、どの方法を採用していることが多いですか？

Question

レスポンシブでサイズによって、画像を切り替える方法がいくつかありますが、現場では、どの方法を採用していることが多いですか？

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
http://black-flag.net/jquery/20120808-4047.html

breakpoints.jsを使用したレスポンシブでの画像切り替え
http://www.webopixel.net/javascript/804.html

また画像は、ブレークポイント分作っていますか？
下記の三つくらい作るのでしょうか？
320、640、1920（PCもIPHONE6プラスと同じにしてしまう。これ以上はお思いのでつくらない）

Answer 1

少し前までは、user-agentから、サーバサイドでページ自体出しわけ(画像もページサイズ毎に
作成して出しわけ)していた事もありましたが、

今は、media queriesによってスタイルシートで表示を変えるのが多いのではないでしょうか。
で、画像ですが、やはりメディアに合わせて用意しています。。。

縮小・拡大すると滲んだり・ギザギザになったりしませんか？？？
あと、下記サイトの例にあるように、小さな字が入っているとノイズになるので、
やっぱり分けて作るのが良いと思います。費用対効果なので見た目・今後のメンテナンス性など
考慮して決められてはどうでしょうか。
http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/
後は、スマートフォンだと通信量にやさしいページにもしたいですしね・・・
ガラケー時代に比べるとそれ程意識することでもなくなりましたが。

Comments

[Ken.sakanakana]

すみません、全く回答になっていませんでした ;-(
捨て置きください。

[退会済みユーザー]

背景画像なら確かにbackground－imgで画像のフルパスを変える事が出来ますね。
この方法の事でしょうかあ
？

ただ心配なのが、画像を上記方法で変えても結局、大きい画像などほかのサイズのCSSで指定している画像も読み込まれていて、重さは変わらないのかなという所です。
まだ、読み込ませない方法はないのですかね？

[aKusano]

一応こちらに補足です。

拡大縮小して滲んだりギザギザになったりするのはIE7以下とかの古い環境だけだったように認識してますのでそこについてはあまり気にしてませんし、問題になったことは今のところないです。
あと「小さな文字が入っていて縮小したら読めなくなる」とかのケースは
いわゆる「アートディレクション」が必要な画像なので当然ですがこういうのは
サイズに合わせて複数画像用意します。
同じ画像を使いまわすのは主に「写真」を想定してます。

[退会済みユーザー]

＞
あと「小さな文字が入っていて縮小したら読めなくなる」とかのケースは
いわゆる「アートディレクション」が必要な画像なので当然ですがこういうのは
サイズに合わせて複数画像用意します。
同じ画像を使いまわすのは主に「写真」を想定してます。

画像の中にある文字が、1920PXに合わせて作ったら、スマホサイズの時に小さくなりすぎて、見えなくなる場合は、別画像を表記するのですね。

[Ken.sakanakana]

あわわわ、あさっての回答に、コメントありがとうございます。
-webkit-background-size や、background-imgによる背景画像切り替えでは
確かに重さはかわりませんね！

SoftBankも法律スレスレで画像の圧縮を行っていたり(通信の改ざん？)と、
キャリアもあっぷあっぷな事もあり、できれば解像度毎に画像サイズの読み込みを
変えてあげられるのが良いですね。

media queryで読み込むCSSを切り替えて、CSSスプライトを使えば、無駄な
画像転送をおさえられるかな。

回答のつもりが逆にタメになるお話しを頂けてありがとうございました！

Answer 2

他の方がどのようにされているかは分かりませんが、
個人的にはフルードイメージ化されるものについては最大サイズ1枚のみ用意して
それを縮小して使いまわす方法を取っています。
完全に内容が変わる場合はダメですが、ブレイクポイントによってアスペクト比が変わる程度なら
CSSでゴニョゴニョして何とかしてます。

jsで差し替えようとすると今はどうしても基本的に二重ロードになってしまうので、
なら最大サイズを1枚だけ読み込んで使いまわしたほうがまだマシかなと思うので。。。

ちなみにsrcset属性、picture要素、image-set()などのレスポンシブ・イメージ仕様が
ターゲットとなる環境できちんと動作するようになれば、そちらを採用する予定です。

とはいえ、内容同じで解像度違う程度の画像だったらやっぱり一番大きいの
使い回しておしまい、にしちゃうんじゃないかなぁと思いますね・・・
データサイズを最適化することはできても、
今度は複数サイズの画像を準備して管理する方のコストが馬鹿にならないような気がするので。

きちんとブレイクポイントごとに画像を差し替えるメリットが一番大きいのは
アートディレクションされた画像（画面サイズ毎に内容やトリミングを変えてクリエイティブを最適化させたもの）でしょうね。
きちんと意図的にアートディレクションされた画像なら、今でもブレイクポイントごとに画像を差替えて作ると思います。ただ実際にはそこまで要求されたことがあまり無いので、具体的な手法までは精査できてません。今後の課題です。（早くpicture要素実用化されないかなぁ）

Comments

[退会済みユーザー]

＞
完全に内容が変わる場合はダメですが、ブレイクポイントによってアスペクト比が変わる程度なら
CSSでゴニョゴニョして何とかしてます。

https://teratail.com/questions/15113
そこまで考えていませんでした。画像の比率を維持するということですかね。おそらく上記のことですかね。

＞
jsで差し替えようとすると今はどうしても基本的に二重ロードになってしまうので、
なら最大サイズを1枚だけ読み込んで使いまわしたほうがまだマシかなと思うので。。。

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験
http://black-flag.net/jquery/20120808-4047.html
breakpoints.jsを使用したレスポンシブでの画像切り替え
http://www.webopixel.net/javascript/804.html

上記の方法は、スマホはPCの画像を読み込まないようにするわけではないのですね。
適切な画像は表記するが他の端末用の画像も結局読み込んでしまっているのでね。
すると上記を使ったほうが、むしろ重くなってしまうのですね。

＞
ちなみにsrcset属性、picture要素、image-set()などのレスポンシブ・イメージ仕様が
ターゲットとなる環境できちんと動作するようになれば、そちらを採用する予定です。

これらが使えるようになれば、多数の画像をダウンロードせずにすむのですね。

＞
きちんとブレイクポイントごとに画像を差し替えるメリットが一番大きいのは
アートディレクションされた画像（画面サイズ毎に内容やトリミングを変えてクリエイティブを最適化させたもの）でしょうね。

スマホは横幅が小さいので、画像の中心を切り抜いたりした方が、デザインとして適切な際にのみ行うということですね。
ただ、プロでもなければ正直そこまで考える人はいないので、クライアントから要望される事はまずないのですね。
srcset属性、picture要素、image-set()などが使えるようになれば、無用なスキルなのですね。
それなら、仕事で必要と言われた時に調べれば十分そうですね。

最後に話がずれて恐縮ですが、前にレスポンシブサイトでIPHONE6プラスの横幅を二倍として、画像100%表記する場合、2倍として作られていると聞きました。
それは、横にして使った場合の横幅1920PXとして、横幅1920PXの画像を使うということでよろしいでしょうか？

お時間のある時に教えて頂ければ幸いです。