たびたびW3Qに上がるたびに言ってるけど、自分は「何もしない」。通信量とか考えると、デカくすることにメリットはない。で、こういうことを書くたびに叩かれるまでがテンプレ
Re:2 それが通用する場合と通用しない場合があるからなあたとえば、ロゴとかどうするの？SVG化すると4倍jpgよりもデータ量が多くなるものなんていくらでもあるわけで。
最低幅600で作るぐらい。それオーバーはそのまんま。画像は SVG 含め gulp-imagemin で小さくしてる。jpg は画像にもよるが、mozjpeg を併用すればなかなか小さくしてくれる。
2倍でいいでしょ、アイコン周りはsvgで。３倍なんて5gくらいにならないと無理かな
制作サイドが「画質重視だ！」って言ってもその負担を『通信量やデバイス負荷』という形で全部ユーザーに押し付ける事になるので2xあたりまでで止めておいてますね。svgかpngかの選定は2xのpngファイルのサイズがsvgをオーバーしてたり、色違いの同一絵柄が複数箇所ある場合とかでsvgを使うようにしてます。
俺も無視派だな。4Kディスプレイ使ってるけど、そんなに気にならん。
つーか、クライアントからRetinaの話とか出た事ある？重要なのはそこじゃないだろ。制作側がごちゃごちゃ騒いでるだけ。
Re:8 あるけど、必要ないショップさんが頭でっかちになってる感
結局ケースバイケース。アパレルとかEC系は結構大事だけどそれでも2倍までかな。遅延読み込みとか駆使して体感的に早くなる工夫はしっかりやってる。
ケースバイケースが正しい。案件ごと、主要ユーザーの利用デバイスによって変えるべき、すくないPCユーザーののRetina対応は愚の骨頂対応間違ってたらSEO順位すら落としかねないそれとsrcset 2xを使え
Re:3 SVG化してデータ量が上がるなんてものは、そもそもSVG化する意味がないので論外。SVG化するかどうかは、ベクタ形式で表現できるかどうかであって、それ以外は、jpegでもpngでもいいよ。1.5倍〜2倍で十分。スマホなら1番ユーザーが多いiphoneのデバイスを基本として、750pxが最大。PCは知らん。PCはこそ案件による。
srcset使ってブラウザ幅と解像度で表示画像変えればええやん。いまだに書き出しにスライスでも使ってるんか。
12 件の回答
たびたびW3Qに上がるたびに言ってるけど、自分は「何もしない」。通信量とか考えると、デカくすることにメリットはない。
で、こういうことを書くたびに叩かれるまでがテンプレ
Re:2
それが通用する場合と通用しない場合があるからなあ
たとえば、ロゴとかどうするの？
SVG化すると4倍jpgよりもデータ量が多くなるものなんていくらでもあるわけで。
最低幅600で作るぐらい。それオーバーはそのまんま。画像は SVG 含め gulp-imagemin で小さくしてる。jpg は画像にもよるが、mozjpeg を併用すればなかなか小さくしてくれる。
2倍でいいでしょ、アイコン周りはsvgで。
３倍なんて5gくらいにならないと無理かな
制作サイドが「画質重視だ！」って言ってもその負担を『通信量やデバイス負荷』という形で全部ユーザーに押し付ける事になるので2xあたりまでで止めておいてますね。
svgかpngかの選定は2xのpngファイルのサイズがsvgをオーバーしてたり、色違いの同一絵柄が複数箇所ある場合とかでsvgを使うようにしてます。
俺も無視派だな。4Kディスプレイ使ってるけど、そんなに気にならん。
つーか、クライアントからRetinaの話とか出た事ある？重要なのはそこじゃないだろ。制作側がごちゃごちゃ騒いでるだけ。
Re:8
あるけど、必要ないショップさんが頭でっかちになってる感
結局ケースバイケース。アパレルとかEC系は結構大事だけどそれでも2倍までかな。
遅延読み込みとか駆使して体感的に早くなる工夫はしっかりやってる。
ケースバイケースが正しい。
案件ごと、主要ユーザーの利用デバイスによって変えるべき、
すくないPCユーザーののRetina対応は愚の骨頂
対応間違ってたらSEO順位すら落としかねない
それとsrcset 2xを使え
Re:3
SVG化してデータ量が上がるなんてものは、そもそもSVG化する意味がないので論外。
SVG化するかどうかは、ベクタ形式で表現できるかどうかであって、
それ以外は、jpegでもpngでもいいよ。
1.5倍〜2倍で十分。
スマホなら1番ユーザーが多いiphoneのデバイスを基本として、750pxが最大。
PCは知らん。PCはこそ案件による。
srcset使ってブラウザ幅と解像度で表示画像変えればええやん。
いまだに書き出しにスライスでも使ってるんか。