WEB制作時のRatine対応の画像の作成について

WEB制作のRetina対応について質問です。
2020年現在はどれが正解？最適解なのでしょうか？
例えば、
非Retinaで表示させたい画像のサイズを100-100pxとする
この画像をRetinaで綺麗（ぼやけずに）に表示させるための画像は、

A）単純に2倍に拡大して200-200pxにした画像（そのまま非Retinaで見るとぼやける）
B）もともとの画像を200-200pxで作成（拡大ではなく）

これまで（B）だと思ってやってきたのですが、
PhotoshopやXDの書き出しでできる@2xの場合（A）なので、もしかして単純に2倍したものでもいいのかな？
と思いまして。。。

No.1 ベストアンサー 回答者： wanderer1 回答日時： 2020/07/02 15:19

PhotoshopやXDの書き出しで@2xする場合のことを考えて、元になる写真は2倍以上の解像度を持った画像を配置しています。

単に2倍に拡大する方法はとりません。

解像度問題は、Webがどうのという以前に印刷物でも言われてきたことでして、そちらの業界ではそれこそ25年くらいの知見があります。
「もともと解像度の足りないデータは、いくら拡大して必要解像度に持っていってもドロドロの絵しか吐かない」という結論に至っています。

印刷業界はモニタ表示に対して約4.86倍の解像度を必要としていました。Retinaとか言われても「へー」ぐらいの感覚です。（72dpiに対して350dpi）
ですから、ものすごくデータ量の多い画像をレイアウトして、書き出しの時点で自由自在のサイズを生み出す、という形に落ち着いています。

過去にイラストレータでレイアウトしたWebデザインデータを納品した時に、画像解像度が必要以上に高いものを添付したにも関わらず、x1で全て書き出されて怒り狂った経験があります。
単にレイアウトの単位がx1だからそれで書き出した、という言い訳をしていましたが、x2で書き出せば問題なく処理されたはずのものをいい加減に扱われたのです。
レイアウト幅を320pxで作っていた（640pxで作っていないから）という理由で、です。

この業界にいれば、画像のデータ量を見れば問題ないと判断できるはずなのに、杓子定規で処理されたことに怒りを覚えました。
当時のイラストレータでは、Web用画像書き出しはx2でもx3でもOKだったのに。

ちゃんと理解していない人が扱うと、本質を理解せずトンチンカンな処理で報酬を取る、実に不実なお仕事がまかりとおってしまったのです。

もともとのデータが100%ではなく、200%以上の解像度を持っていることが大前提と思っていただいて間違いないです。
そこはちゃんと検証してください。

ですから

＞PhotoshopやXDの書き出しでできる@2xの場合（A）なので、もしかして単純に2倍したものでもいいのかな？
＞と思いまして。。。

なんてことはありません。

Photoshopなら、どんな解像度のデータでも配置できることはご存知ですよね。
XDでもそれは変わりません。

必ず検証してください。
Retinaに関わらず、iPhoneもAndroidもx1のデータではクォリティ的にデータ量が不足します。
見た目がおかしい。

それを実感していただければ、理解が深まると思います。