スマホサイト用の画像を作成する場合のサイズについて

質問

現在、個人で作成したWebサイトがあるのですが、パソコン用のみとなっております。

レスポンシブWebデザインで、スマートフォンにも対応するために、取り組んでいるところです。

パソコンサイトと同じ画像を、スマホのデバイスでも併用する場合はスタイルシートでサイズの縮小を指定すれば良いかと思います。

しかし、デバイスのサイズごとに、画像を切り分けることも必要かと思います。
この場合、スマホ用の画像を作成する場合、下記のdevicePixelRatioを考慮し、表示するサイズの2倍の解像度で画像を作成するという認識で問題ないでしょうか？

iPhone 6 Plusのdevice-pixel-ratioは『3』ですが、ファイルサイズによる読み込み速度の影響をふまえて、2倍の解像度の画像で良いのかと思っております。

■devicePixelRatioの例
iPhone 3GS：　devicePixelRatio（1.0）
iPhone 5S：　devicePixelRatio（2.0）
iPhone 6 Plus：　devicePixelRatio（3.0）

初歩的な質問になりますが、ご回答のほど、宜しくお願い致します。
また、関連することや、他のことでのアドバイスなどもありましたら、是非宜しくお願い致します。

回答No.1

aokii

表示するサイズの2倍の解像度で画像を作成するという認識で問題ないです。