問題タブ [image-optimization]

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

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

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

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

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

- - 編集

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

---- 2014年11月編集

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

大きな画像 (1.1 MB) を iPad アプリ バンドルに追加すると、ipa ファイルのサイズが 2 MB から 4.1 MB に変わります。誰かがなぜそれが起こるのか説明してもらえますか?それは正常な動作ですか? Xcode は png ファイルを最適化すると思っていましたか、それとも間違っていますか?

現在、画像が最適化されていることを確認しようとして問題が発生しています。可能な限りすべての画像を手動で最適化しましたが、この便利な宝石をこれと組み合わせて、将来のプロセスを自動化することができました.

pagespeedが警告している残りの 2 つの画像があります。これらはコンパスで生成されたスプライト ファイルです。image_optim gem は優れていますが、生成された画像を圧縮していません。

私はすでに heroku ruby​​ buildpack を他の理由で変更するためにフォークしたので、それを含む解決策を受け入れます。私はこれを試しました：

しかし、私には関係のないように思われるこのエラーが発生しましたが、それを引き起こしたのは間違いなくこのコードでした:

どんな助けでも大歓迎です！

ASP.NET スプライトおよび画像最適化フレームワーク内で生成された CSS クラス名を制御することは可能ですか?

さらに詳しい情報：

現在、16x16 アイコン用と 32x32 アイコン用の 2 つのスプライトがあります。現在、クラス名の形式は.icon-16.[imagename]and .icon-32.[imagename].

マークアップ内のクラスを手動で参照します (つまり、フレームワーク ヘルパー経由ではありません)。

例えばclass="icon-16 my-image"。

フレームワークでこれを達成する方法はありますか？

ここで私の php ファイルでは、シェル コマンドを実行しようとしています。ターミナルでコマンド変数の値を問題なく実行できました。しかし、どういうわけか shell_exec は私のためにそれをしません。

ここでは「git status」も機能しないようです

更新：最終的にエラーが発生しました

sh: jpegoptim: コマンドが見つかりません

ウェブサイトのメイン ページに読み込まれる巨大な画像があります。1366*690pxこれは巨大であることに気付き、読み込み時間を短縮することを検討することにしました。

最初にSmush.itで実行しました

次に、ブラウザの解像度に応じて動的に異なる画像をロードするようにいくつかの JavaScript をコーディングしました。

プロセスをさらに高速化する方法について提案を求めています。画像を 2 つの部分に分割するとページが高速化されるとどこかで読んだことを覚えていると思います。これが、画像からグラデーションを作成するときに作成する理由ではありませんか1px 幅?(繰り返します)?

ブラウザの幅別の現在のファイル サイズは次のようになります。

注: これらの画像はすべて、css で 100% の幅を持っています。

また、ビット深度 (8、16、24、32) の量に関連するものがあることも知っています。aplha 画質をあまり下げたくないのですが、Web で許容できる範囲はどれくらいだと思いますか? 現在のビット深度は 24 ですが、多すぎますか?

このような画像を Web 用に最適化するには、他にどのような方法がありますか?

サーバー上で継続的に実行され、フォルダー（できればサブフォルダーを含む）画像ファイルを監視し、それらを最適化するLinuxベースのスクリプト/プログラムを知っている人はいますか、ala smash.it pngout、jpegtransなど。できればこれらすべてのツール。

これらのツールを呼び出す Linux アプリがたくさんあることは知っていますが、Web サイトの画像を含むフォルダーを監視し、新しい画像を最適化するアプリが必要です (以前に最適化された画像を無視します)。最初の実行ではすべてを実行する必要がありますが、その後、すでに処理されたものを知る必要があります。

そのようなツールは存在しますか？