css - 1つの大きな背景画像または複数の小さな画像？

Question

Web開発者として、私はこれに似たレイアウトをカットする必要があります（Ruben BristianによるWebサイトの例）：

ロゴのような複数の小さな画像をわざわざ切り取る必要があります。

ラベル：

等々？または、次のようなすべての要素を含む1つの大きな背景画像を作成する必要があります。

リンクされたロゴの位置<a href>を設定しますか？display: block;

単一の画像は、複数の要素全体よりもサイズが小さくなります。他の長所と短所は何ですか？

Answer 1

別の画像を使用してください。

理由は次のとおりです。

メンテナンス：すでに持っているものを基に構築したい場合は、将来的にメンテナンスがはるかに簡単になります。さらに（そして主観的に）、背景画像はデザインにとって重要ではありません。背景の一部が切り取られていても壊れていないように見えます。ただし、ロゴが歪んでいると壊れて見えます。

より新しく、より鮮明なディスプレイが開発されていることにも留意してください。標準解像度の背景を表示する方がはるかに簡単で（すでにぼやけているため、明瞭さは必須ではありません）、ロゴの2つのバージョンを維持します。1つは標準ディスプレイ用、もう1つはHD用です。

セマンティクス：ユーザーが画像を無効にしている場合はどうなりますか？確かに、それはありそうもないですが、グーグルはどうですか？実際のコンテンツで適切なマークアップが必要です。Googleのクローラーがサイトに関する情報を収集するには、サイトに実際のテキストコンテンツが必要です。CSS画像置換技術を使用してインターフェイスを構築します。

HDディスプレイに関するもう1つの注意事項： HD（Retina）ディスプレイに大きな画像を提供し、CSSを使用してサイズを小さくし、1インチあたりのドット数を効果的に増やすのが慣例です。画像を1つだけ使用する場合、ユーザーはかなり大きな画像をダウンロードする必要があります。使用する帯域幅が増え、ユーザーのエクスペリエンスが低下します。

さらに、テキストはHDディスプレイではひどく見えます。ブラウザがユーザーに非常に鋭いテキストをレンダリングできるようにする方がはるかに理にかなっています。

アクセシビリティ：最初に、スクリーンリーダーはあなたのサイトが何であるかについての手がかりを持っていません。この場合、これはそれほど重要ではないかもしれませんが、アクセス可能なWebサイトを構築することをお勧めします。サイトに小さなテキストを含めたい場合、一部のユーザーはそれを読むことができない可能性があります。通常はフォントサイズが大きくなりますが、画像を使用する場合は無力です。

---

私はこの答えを過度に脚色したかもしれませんが、アドバイスは善意です。

Answer 2

私は正直に少し違うアプローチを試みます。画像の「写真」部分は1つの画像、ロゴは別の画像、そしておそらく見出しの両側にある二重のバーになります（ただし、必要ない場合もあります）。

写真の部分をdivのbg画像として使用し、残りはコード内で使用します。

画像のテキスト部分は一切作成しません。良いフォントを入手するには、GoogleWebFontsなどのサービスを使用してみてください。

このアプローチにより、メンテナンス時間が大幅に節約され、パフォーマンスも向上します。

Answer 3

長所：

• ロードされた合計バイト数は少なくなります。

• 全体の画像になるために、どのくらい少ない画像が組み合わされるかを心配する必要はありません。

Answer 4

1つの画像を使用するだけで、レイアウトの流動性を維持するのがはるかに簡単になることがわかります。パディング/配置の問題、レンダリングの問題などは発生しません。実際には、読み込み時間はどちらの方法でも同じである必要があります。ブラウザがより多くのcssをレンダリングする必要があるため、複数の画像の場合は少し長くなる可能性がありますが、それほど多くはないと思います。注目に値する。結局、それは本当に仕事にとってより良いものに帰着します。私はかなり1つのきれいな画像に偏っています:)

Answer 5

各要素を個別にどのように使用するのか、そして将来どのように変化するのかを考える必要があると思います。

ロゴを変更したり、アニメーション化したり、他の場所で再利用したりすることができます。背景画像が変更されたり、ある種の移行ギャラリーで複数の画像になる場合があります。

これが（ありそうもない）変更されない場合は、はい、単一の画像に平坦化します。

私は個人的に別の背景画像として持っているでしょう。次に、ロゴとラベルを別の透明なpngに配置し、cssスプライトを使用してサイト全体でそれらを再利用します。これにより、ロゴ/ラベルのダウンロードに必要なリクエストの数が半分になり、複雑な背景写真やよりシンプルなロゴ/ラベルなど、各画像を個別に最適化できるようになります。