web-dev-qa-db-ja.com

背景画像のベストプラクティスは何ですか？

繰り返しのない大きな背景画像を配置しています。とても重いです。ページの読み込み時間のほぼ60％を占めています。 MSNまたはその他の注目度の高いサイトにアクセスした場合、それらは10kb以下の繰り返しの背景画像を使用しており、背景画像は読み込み時間に影響しません。

そう;背景画像のベストプラクティスは何ですか？背景に大きな背景画像を使用し、ページの読み込み時間を忘れる必要がありますか？

response-timebackground-images
48
Pir Abdul

付属品、必要ではない

背景は必需品ではなく、アクセサリーであるべきです。背景がない場合でも、ユーザビリティに悪影響を与えることはありません。必要に応じて背景を使用する、デザインが不十分なWebサイトの例は Project Swole です。背景が読み込まれる前は、テキストを読み取るのに十分なコントラストがありません。低速のモバイルネットワークでこのサイトにアクセスすると、テキストのスキャンを開始するまでに長い時間がかかります。一方、 Legendary Aircraft のようなWebサイトは、バックグラウンドが読み込まれる前でも非常に使用できます。

悪い

beforeafter

良い

beforeafter

ノンブロッキング

背景は、このbackground: url(whatever.jpg)のようなCSSで設定する必要があります。 <img src="whatever.jpg">タグであってはなりません。前者は window onload event をブロックしません。後者はそれをブロックします。一部のJavascriptがウィンドウのonloadイベントをリッスンしている可能性があります。 <img>タグで大きな背景を使用すると、このJavaScriptの実行が遅れ、ユーザーがページを操作できなくなります。

高速読み込み

私は古くから大きな背景を使用していませんが、前回確認したとき、プログレッシブJPEGはCSSバックグラウンドとして徐々に読み込まれません。むしろ、彼らはゆっくりと涙を流します。これはユーザーに当惑させる効果をもたらします。それは56Kモデム時代に招かれます。このティアリングの影響を軽減するには、画像のファイルサイズを小さくするとよいでしょう。大きな背景のデザインの多くは、背景の細部をあまり必要としないため、圧縮の影響を受けません。詳細が必要な場合は、背景がメインコンテンツの邪魔になることを意味します。

画像を最適化する

保存された多くの画像は、最適な圧縮形式で保存されません。メタデータが含まれているため、多くの場合に役立ちますが、ブラウザでの使用には適していません。また、使用される圧縮は最適ではない場合があります。画像をウェブに公開する前に、画像オプティマイザーで実行します。世の中にはたくさんありますが、最も簡単な方法の1つは、このWebサービスを介して実行することです。 kraken.io

モバイルデバイスでは使用しないでください

Webサイトのモバイルバージョンでは、大きな背景画像を使用しないでください。多くのモバイルユーザーは、3Gなどのブロードバンドよりも10倍遅いインターネット接続を使用しています。モバイルユーザーはデスクトップユーザーよりも急いでいるので、凝った背景を見るのにこだわることはありません。大きな背景は、モバイルユーザーのデータプランにも影響を与えます。これは、多くのブロードバンドサービスのように無制限ではない場合もあります。最後に、ネットワーク操作は、モバイルデバイスのバッテリーを消耗させる主要なタスクの1つです。これは、iOS開発に関するAppleの入門チュートリアルを見ながら学んだものです。

CSSメディアクエリ でデスクトップの背景スタイルを上書きできます。

body {
 background: #ABCDEF url(largeBackground.jpg);
}

@media screen and (max-width: 640px){
 body {
  /* option 1: remove background altogether */
  background: #fff;

  /* option 2: serve a much smaller background */
  background: #ABCDEF url(muchSmallerBackground.jpg);
 }
}
86
JoJo

ページの読み込み時間を忘れないでください。読み込み時間は、ビジターからリーダー/ユーザーへの変換における重要な要素であり、遅いページは操作するのに非常にイライラします。

問題の大きな画像を置き換えることができない場合は、次の5つの方法で影響を軽減できます。

  1. 新しいデザインの背景画像のほとんどは、コンテンツで覆われています。画像を2つに切り、それぞれを半分に切り取って、表示される部分だけが最初に読み込まれるようにしないのはなぜですか？

  2. 画像の大部分が黒一色にフェードアウトします。これをトリミングして、CSSでページの下半分を「自然な」黒の背景にしませんか？

  3. 画像圧縮で遊ぶことができます。各リソースから貴重なKBをシェービングできるPNGおよびJPEG再圧縮アルゴリズムがあります。

  4. JoJoが示唆するように、画像をCSS背景プロパティとして指定できます。これにより、ページの残りの部分が最初に読み込まれます。ただし、画像が提供されなくても、ページは読みやすく、（合理的に）魅力的である必要があります。

  5. CDNプロバイダーを使用すると、イメージを必要とするユーザーを自分のリージョンのCDNキャッシュにリダイレクトできます。しかし、これはあなたにとってやり過ぎのようです。

編集ここ-上記の方法1、2、3を使用して画像のサイズを変更しました。切り刻み、トリミング、サイズ変更を行った後の完成品（ http://i.imgur.com/DLoey.jpg ）は21.4kbです。それは元のサイズの4％未満です！

あなたがしなければならないすべては、ページのコンテンツのいずれかの側にその画像を配置することです。元の「逆」の外観を保持したい場合は、 このCSS-tricksの記事 の指示に従って、右側の画像にスタイルを設定するだけです。

19
Jimmy Breck-McKye

可能な場合はbackground-position: fixedを避けてください。

固定背景 ブラウザのレンダリングが指数関数的に増加します であり、スムーズなスクロールサイトと遅いサイトの違いになる可能性があります。

3
pyronite

「画像を背景として設定できる設定メニューがあります。そのため、サイズ変更やスクレイピングは本当の解決策ではありません。」とコメントで述べています。

ユーザーがバックグラウンドをアップロードできる場合でも、バックグラウンドをいじることはできます。自動化された画像操作プログラム（ImageMagickなど）で実行することをお勧めします。必要な部分だけ（画像の左側と右側）を切り取って、品質を下げ、適切なサイズに設定できます。

2
Brendan Long