最近のホームページの多くで採用されているワイドデザイン。
弊社のホームページもそうなのですが↓
ブラウザの幅100パーセントまで広げて画像を表示する表現方法です。
インパクトもありイメージも伝えやすくて良いのですが、
「コーディング時にどれくらいのサイズで書き出すのか」
これ、よく悩みます。
フルHDのモニターですと解像度は1920×1080ですが、
そうなると幅2000px程度はあった方が良いのかなーと思いながらも
ちょっと大きすぎる気がしますし。
デザインのまとめサイトに掲載されているホームページを見ていると
・幅1600px
・幅2000px
以上の2パターンが多くみられます。
幅2000pxの場合でも容量を上手く抑えていたり、
幅1600pxでもテクスチャ等で違和感なく配置していたり。
ちなみに私は幅2000pxで書き出す場合が多いです。
が、レスポンシブデザインの場合
スマートフォンではその大きな画像を読み込まないように
srcset等を使って使い分けるような配慮が必要ですね。
画質も大切ですが表示速度の方がもっと大切…！
SEO対策にも繋がりますよ！
ぴの子
