ウェブ用の背景画像の適切なサイズ

ウェブサイトの作成では、それぞれの画像、テキストボックス、ハイパーリンクがどのように相互に関連して機能するのかを理解することが重要です。これは特に、最少限のレイアウトに色やスタイルを加える背景画像にあてはまります。ただし、この画像を適切な大きさやファイルサイズで最適化しないと、ウェブサイトの動作が遅くなったり、画像が伸びて見栄えが悪くなることがあります。以下では、ウェブの背景画像を選択しサイズを変更するための基本ヒントをいくつか概説しています。


プロジェクトで画像が必要ですか?Shutterstockの7,000万枚以上の印象的なコレクションが役に立ちます! ライブラリのコレクションをご覧ください


サイズが全てです
背景画像はサイトポップの作成に優れていますが、ページが画像に依存すればするほど、ウェブサイトの動作は遅くなります。サイトが大量のデータでダウンするのを避けるには、画質とサイズ間で最適なバランスを取る必要があります。現在の解像度標準を知り、画面に表示されるピクセル数を考慮すれば良いでしょう。 

現在、最も普及しているデスクトップやタブレットの解像度は1280 x 800、1366 x 768、1920 x 1080です。一方、スマートフォンでは、320 x 480や800 x 480といったより低い解像度でウェブサイトを表示します。最後に、Retinaディスプレイを搭載した最新コンピュータは平均的なモニターよりも2倍大きい画像を要求します。 

妥協点を見つける
これらの要件すべてを満たす背景画像を一体どのようにして作成しますか?ディテールが鮮明な背景画像を使用する場合、ファイルサイズを1MB(かつできれば100KB以下)以下に保持するのがベストです。 

1MBの背景画像は通常のユーザーのインターネット速度の限界を押し上げますが、ウェブエクスペリエンスを損なわせることはないのは経験則から言えます。また、同じ背景をサイト全体で使用する場合、解像度を少し高く設定できます、その理由は画像は最初にロードされてからユーザーのキャッシュに保存されるからです。背景画像は比率が1.777対1になるようにサイズを変更することをお勧めします、その比率が解像度1920 x 1080の画面に最適だからです。 

  • この記事は役に立ちましたか?

お探しのものが見つかりませんか?