レスポンシブ対応でスマホ切り替え時に2倍画像にするときどうするのか教えてください。

Question

前提・実現したいこと

具体的にはPhotoshopで2倍で作るのか？
それともこちらのサイトのような
https://note.com/34san_/n/na2eec52af710
srcsetを使って設定するのはどちらが効率的なのでしょうか？

具体的に教えていただけませんでしょうか？
どうぞよろしくお願いいたします。

Answer 1

Retina対応がイマイチ分からない人向けの簡単ガイド【初心者Webデザイナー向け】

こちらで紹介している内容が判りにくい...なぜWindowsとMacで比較するかな...
せめてスマホとPCにしてほしかった...

画像は簡単には

• 縮小は画質があまり落ちない
• 拡大は画質が落ちる

と思ってください。

それなら全て大きなサイズで画像を作っとけばよいじゃないか？
と思うかもしれませんがそうするとファイルサイズが大きくなります。
(スマホなどはパケット量気になりますから)

また縮小でも画質が全く落ちないわけではない。
(文字が書いてある画像を縮小すると読めなくなる場合があります)

その為、「大きな画面で表示する用」と「小さな画面で表示する用」の2種類用意しましょう
というのが話の趣旨。

先にも書いた理由で文字、数字、記号、会社のロゴが入っていないのであれば
1画像で拡大縮小でも構わないと思います。(デザイン的NGは別ですが)

Comments

[oyu]

ご連絡ありがとうございます。

結果的には大きな画像と小さな画像の2種類必要なんですね！！
詳しく教えていただきたいんですが
大きな画像とは2倍サイズで小さな画像とはスマホのデザインカンプのスライスした画像てことでしょうか？

[kuma_kuma_]

> 結果的には大きな画像と小さな画像の2種類必要なんですね！！
正確には「必要な場合がある」です。
全部の画像が2種類必要ではないですよ！という事です。

> スマホのデザインカンプのスライス
「PC用のデザインカンプのスライス」
大きな画面用
「スマホ用のデザインカンプのスライス」
小さな画面用

なのですが問題点があってタブレットをどちらに扱うか？という点です
タッチパネルなので「スマホ用のデザイン」を適用すると画面サイズに合わず
拡大表示される。
今度画面サイズに合わせるとタッチパネル操作に合わない
そんな現象がおきます。

レスポンシブ対応ってみんないうけどその点の考慮がないんだよな...