質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • レスポンシブWebデザイン

    217questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 3,751
退会済みユーザー

退会済みユーザー

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

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

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



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

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/26 20:39


    完全に内容が変わる場合はダメですが、ブレイクポイントによってアスペクト比が変わる程度なら
    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の画像を使うということでよろしいでしょうか?

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/26 07:04

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

    キャンセル

  • 2015/08/26 18:26

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


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

    キャンセル

  • 2015/08/26 19:18

    一応こちらに補足です。

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

    キャンセル

  • 2015/08/26 20:51


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

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

    キャンセル

  • 2015/08/26 23:46

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • レスポンシブWebデザイン

    217questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。