2400pxモニターを使用しているデザイナー、1920pxモニターを使用しているコーダー、デザイナーが想定したものと一致しない最終サイト
2400pxモニターを使用しているグラフィックデザイナーと、1920pxモニターでWebデザインをコーディングしているWeb開発者に問題はありますか？
グラフィックスファイルのアートボードの幅が1920pxであるとします。
私が抱えている問題は、デザイナーが私がコーディングしているサイトのデザインが同じではないことを教えてくれていることです。まあ、彼女は1920ピクセル幅で設計し、私は1920ピクセル幅でコーディングしましたが、彼女のモニターは2400ピクセル幅で、私のモニターは1920ピクセル幅です。私のコードでは、すべてのグラフィックスがファイル内のピクセルとフォントのサイズと正確に一致しています。しかし、グラフィックデザイナーは「見た目が同じではない」と言います。私は彼女に尋ねました、あなたはこれを100％ビューで設計し、ズームアウトしませんでしたか？そして彼女はイエスと言います。彼女のアートボードの幅は1920ピクセルです。それでは、1920pxモニターでの彼女のデザインの正確なコーディングが「ズームイン」されているように見えるのはなぜですか？
彼女のデザインと最終的なコードの見た目に違いがあるのは、Mac Retinaディスプレイを使用していることと、通常の1920ピクセル幅のモニターを使用していることだけです。それで、彼女がデザインしたものは、2400のモニターはピクセルが多いので、2400ピクセル幅ではないモニターで大きく見えますか？
これに関する私の理論は実行可能ですか？その場合、2400は480 x 5で、1920は480 x 4であるため、20％の差が生じます。彼女のファイルを1920（1536）未満の20％に縮小すると、すべてが100％で表示されます。 2400ピクセルのRetinaディスプレイに表示されるのと同じ正確なサイズですか？
事実、完璧なものはありません。なぜなら、特にさまざまなサイズの長方形のモニターでは、すべてのモニターが同じというわけではないからです。実際、標準の正方形画面モードと長方形画面モードを使用できる新しい小型フラットスクリーンモニターを所有しています。
あなたができる最善のことは、私のサイトの画像のように、画像をレスポンシブにすることです。ボーナスとして、元の画像をダウンロードとして提供し、クライアントがうるさい場合、少なくとも元の画像と複数の画面サイズできれいにレンダリングされた画像が見えるようにします。
クライアントが過度にうるさい場合は、可能な限り最大の画像サイズを使用し、CSSを使用してユーザーの画面のサイズに縮小します。基本画像サイズが小さすぎる場合、画像が拡大されると、品質が低下します。これを自分で確認するには、描画プログラム（Windowsのmspaintなど）を使用して高品質の画像を貼り付け、画像を縮小してから展開すると、意味がわかります。
作業中のWebページにこのコードを挿入して、画像をロードしてみてください（画像が1900 x 480ピクセルの場合）：
<image src="someimage.jpg" width="1920" height="480" style="width:100%;height:auto;">
スタイルパラメーターは、画面の幅全体に合うように画像のサイズを変更し、スケーリングは維持されます。