2

私はブートストラップには少し慣れていませんが、サイト開発と css にはかなり精通しています...ブートストラップがさまざまなビューポート サイズに最適化された画像をどのように処理するかについて頭を悩ませています。

私の経験では、画像が表示されているデバイスに合わせて画像を最適化する必要がありますが、Bootstrap で見たすべてのことから、それはそうではないと私は信じています。単純に 1 つの大きな画像を使用し、css を使用して縮小 (または拡大) しているようです。これは、モバイル デバイスに豊富なエクスペリエンスを提供しながら、小さなファイルで速度を最適化することを望む場合、直感に反するように思えます。

たとえば、幅 900px (~200k) のレイアウトでデスクトップに画像をきれいに表示したい場合は、そのサイズに合わせて画像を最適化します。レイアウト幅のあるモバイルの場合、最適化されたバージョンは 400px (~50k) と言えます。

私自身のシステムでは、ユーザーエージェントを介して事前に検出し、コンパイル中に適切な画像を詰め込んでいます。これらすべてを単純にブートストラップに入れることもできることに気付きましたが、同様のメカニズムが何らかの形で存在することを期待していました。期待しすぎたかな？

そのサイズに最適化された正しいファイルが利用されるように、ビューポート サイズが検出されるまで、Bootstrap がページ コンテンツ内の画像の読み込みを延期する方法がわかりません。ここで何か不足していますか？

- - 編集

ビューポートのサイズに基づいて Bootstraps CSS で画像パスを定義できると確信していますが、どちらが最初に読み込まれるかという質問には答えていませんか?

---- 2014年11月編集

参考までに、この質問はかなり古くなっています... @media クエリは個別のファイル要求を実行しますが、各サイズの個々のファイルまたはそれらを動的に生成する何らかの方法が必要です。いずれにせよ、一致しない場合は読み込みが延期されるため、ある程度最適化されています。モバイル ユーザーにとっては、要求時にユーザー エージェントを特定し、さらに最適化することは依然として有益です。モバイル固有のファイル/クラス以外をロードすることは役に立たず、処理を遅くするだけだからです。

4

1 に答える 1

5

デフォルトでは、Bootstrap は CSS のみを使用して画像をスケーリングしているため、ファイル サイズの観点からは理想的ではありません。

アダプティブ イメージは良いオプションの 1 つです。画面サイズに基づいてさまざまなサイズのイメージを提供します。さかのぼって追加するのは簡単なので、それが機能するかどうかを簡単に確認できます.

背景画像を使用することも可能です。メディア クエリを使用すると、さまざまなビューポートでさまざまな背景画像を指定できますが、画像がたくさんある場合は少し面倒です。

凝りたい場合は、http://responsejs.comが技術的にうまく機能するはずです。

確かに他のオプションもあります。

幸運を！

編集

別のフレームワークを使用するオプションがある場合、Zurb Foundationには、異なるビューポートで異なる画像を指定できる新しい交換コンポーネントがあります。とても滑らかです。例えば

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">
<!-- or your own queries -->
<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))],  [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">
于 2013-11-25T20:22:55.177 に答える