PCサイトのretina対応ってみなさんされていますか。通常1920pxでデザインしてるのですが、単純に3840pxでデザインすればいいのでしょうか。コーダーさんはどのような形だとコーディングしやすいでしょうか。PSDでデザインしています。

2:ID:gQ3GpA · 2018-02-16

レイヤー名を200% sample.jpgみたいにすれば、アセットジェネレーターで書き出せるはずだけど、
PCのレティーナ対応を求められた事がなかったので、画質がどうなるかは不明なので試して教えてほしいです。
ただレスポンシブだとファイルサイズがでかすぎてスマホNGになる場合があるよ。

3:ID:WVnsI4 · 2018-02-16

バナーや背景画像等のパーツごとに別ファイルでデザインし、それをライブラリにして、1920pxのアートボードに取り込めばいいんじゃないかな。
画像以外はCSSで作り込めるんだから。
3840なんかでぜーんぶ作ったらファイル重たくて仕方がないよ。

4:ID:8AH8OH · 2018-02-16

アップサンプリングを信じろ。
少なくともiPhone-Retinaでは独自のアップスケールをやってしまうので、CSSやJSで対応するのはベターではない（この辺はMac-Retinaでも同様だろう）。
加えてこの手の小細工は8Kが主流になったら8K用の画像とか用意する必要が出てくるし、そうなってくるとイタチゴッコでしかないし、今時点においては巨大サイズの画像とか、複数枚の画像を用意するのはリソース管理やトラフィックを鑑みても悪手でしかない。

…というのがコーダー側の一般的な意見だと思う。
俺が勝手に思ってるだけかも知れんが。

1いいね!

5:ID:6E2uzI · 2018-02-16

デカイ画像でsrcset使ってる。

6:ID:6x5PBL · 2018-02-17

srcsetを使うのが普通じゃない？
今時js使ってリサイズする理由はないし、wordpressは解像度に合わせて自動的にリサイズしてくれる機能が準備中。
カンプの書き出しだったら、Photoshopだったらバナー類はRetinaサイズで作ってCCライブラリに登録。パーツ化してからカンプに貼り付ける。書き出しは通常、2倍の2種類でsrcsetで分ける。
８ｋ解像度主流になったら８ｋ画像を用意するのは当然。DTPだってポスター作るのに名刺サイズのデータ渡さないでしょ？

7:ID:8AH8OH · 2018-02-18

Re:6
煽りなしで聞きたいんだが、Re:6 は5kRatina対応してるの？

8:ID:6x5PBL · 2018-02-18

Re:7
してるよー。クライアントがimacでサイトを見ない保証なんてないし、そこに言い訳をするならIE対応しない素人と一緒でしょ。
全ての画像をsrcsetで切り替えるのは表示速度を犠牲にするから逆効果だけど、ビジュアルを効果的に見せたい箇所は対応するべき。

2いいね!

9:ID:8AH8OH · 2018-02-19

Re:8
なるほど。IE対応しない素人と一緒というのは言い過ぎだとは思うが、自分だったら対応断るレベルのことをやってるのであれば素直に敬服する。

10:ID:UsQFnq · 2018-02-22

それそうと、その画像サイズに耐えられる画像の支給、提供が前提でしょうね。

コメントの受付は終了しました。

9 件の回答

一緒に読まれている質問