web-dev-qa-db-ja.com

記事画像の画像スプリッティングは良い解決策ですか？

私はオンラインポータルを開始しており、約102個の画像（記事の量に基づく）が必要であると計算しました。問題は、ページ全体を800KB（すべてのアセットを含む）未満に保ちたいことです。リクエストを最小化すると速度が向上するという記事を読んでいたのでこれをやりたいですし、リソースのpingdomによると非常に悪い「待機」時間もあります（最大150ミリ秒）ので、「待機」時間を減らしたい。

ここに来る前に、これは不可能だと言った他のプログラマーに尋ねましたが、MSNとYahooの両方がこれを達成しているので、私はそれが可能であることを知っています。

これまでのところ、これらは私が持っているリソースです（Javascriptなし、まだ）：

  1. ウェブページ：54.KB（53.7KB-実際のサイズ）
  2. CSS：190KB

私のウェブサイトは記事を表示しなければならないブログ/記事のウェブサイトなので（私のウェブサイトの他のページにあります）、すべての記事の画像をスプライトし、圧縮をより少なくすることができれば役立つと思いますか？もしそうなら、このプロセスをどのように自動化しますか？このページを更新する新しい記事を投稿できる管理ポータルがあるためです（および画像も！）。

注意してください管理ポータルには、このプロセスに役立つ可能性のある画像の固定画像寸法があります。

また、問題を解決できる他の解決策も受け入れています。

前もって感謝します。

phphtmlcsscompression
1
user3511245

いいえ。画像スプライトは写真や複雑な画像には適していません。

これは、ファイルサイズが単純に大きくなりすぎて、ページの読み込みが遅れ、ユーザーがコンテンツを表示するのにかかる時間が長くなるためです。

スプライトは、サイト全体で再利用される基本的なテンプレートスタイリング画像に適しています。これは、多くの理由により、PNG Lossly Compressionなどのおかげでキャッシュされ、単一のファイルダウンロードが小さくなります。基本画像にJpegを使用するとPNGよりも大きくなり、PNGに複雑な画像を使用するとJPGよりも大きくなります。デザイナーがテンプレートファイルにPNGを使用するもう1つの理由は、テンプレートの品質を失いたくないことです。また、小さいサイズのPNGは基本的なロスレス画像のWIN WIN圧縮の選択肢であり、JPEGは写真のWIN WINです。その他の複雑なイメージング。

コンテンツ画像のダウンロード速度を上げるオプションは次のとおりです。

  • JPGには約8〜10の品質の圧縮を使用します
  • 次に、非可逆圧縮を使用して、品質を損なうことなくさらに小さくします。
  • これらのファイルを別のドメインまたはより優れたイエタCDNで提供します。これにより、並行ダウンロードが可能になります。

ロスレス圧縮を使用して画像を作成する方法は次のとおりです。

2
Simon Hayter