画像を書き出す時の注意点まとめ

HTML

・1920px以上のモニターを使っている人は全体の2%程しかいないので、基本1920pxで画像がちゃんと表示出来ていればOK。もし指摘されたら、その時は2560pxで書き出して表示させる。しかし、大きいpxで書き出すとページ遷移が重たくなるので要相談。

・retina(スマホ)で画像がぼやけないようにsrcsetを使ってPCとスマホで適切な画像を切り替える。そうすることで必要でない画像は読み込まれないから便利。

・retinaでは表示サイズの2倍で書き出し、実際は2分の1で表示すると綺麗になる。
(例えば、100pxの画像であれば、200pxで書き出して100pxで表示する)

・IllustratorやPhotoshopで画像を書き出すときは、画像の縦横の数値が小数点になっていないか注意する。もし小数点が入っていたら必ず整数値に変更してから書き出すこと。

・必ず書き出すときは80%くらいまで圧縮してから画像を書き出すこと。画質が粗くならない程度に圧縮することで、容量が軽くなる。