web-dev-qa-db-ja.com

プログレッシブJPEGと最適化されたJPEG

プログレッシブjpegは複数のパスでダウンロードされ、最適化されている方が小さい(したがって、ダウンロードが完了するまでの時間が短い)ことを知っていますが、誰かがハードデータやベストプラクティスを持っていますユーザーが実際に好むタイプ

プログレッシブJPEGファイルと非プログレッシブJPEGファイルの違いから始めましょう。非プログレッシブJPGファイルは、プログレッシブJPEGファイルよりも定義上小さくありません。 Stoyan Stefanovが発見した経験則では、10Kより小さいJPEGファイルは非プログレッシブJPEGで圧縮するのが最適ですが、プログレッシブJPEGとして保存すると、大きなJPEGファイルは小さくなります。 ソース プログレッシブJPEGの章を参照してください。

したがって、最小のダウンロードを希望する場合、非プログレッシブが常に最良の選択とは限りません。

この2012年の記事はさらに詳しく説明しています プログレッシブjpegの新しいベストプラクティス

さらに小さなJPEGファイルが必要な場合のヒント mozjpeg

しかし、今あなたの質問に答える。あなたは、誰かが実際にユーザーの好みについて調査したかどうか知りたいと思っていました。まあ実際には誰かがやった。

Tammy Evertsの研究に関する記事はこちらから読むことができます: プログレッシブイメージレンダリング:良いですか、それとも悪いですか? 完全版を入手できる場所へのリンクが含まれています報告する。

スポイラー:ユーザーはプログレッシブよりもベースラインのJPEGファイルを好むようです。

12
Marco Tolk

ここに別の視点があります。絶対的なルールではなく、覚えておくべきこと。

画像の用途によって異なります。内容、または装飾ですか?

背景やその他のデザイン要素の場合は、プログレッシブを使用して、ページをできるだけ早く大丈夫なように見せます。要素を移動する要素の場合は、レイアウトのシフトによってボタンが誤って押されないように、できるだけ早く配置する必要があります。 (モバイルでは数回そこにいます。)

ユーザーがダウンロードするコンテンツである場合、または意識的に注意を払う場合は、通常のJPGを使用してください。これは、まだ完了していないこと、ユーザーが少し待つ必要があることをユーザーに伝えます。これは彼らが未完成のダウンロードを保存することを止め、彼らは悪い品質ではなくサーバー/接続としてサイトを体験することはありません。

5
PixelSnader

+1からDA01

OPが縮小されたファイルサイズを「最適化」と呼ぶ場合、JPEGとして保存するときの標準的な方法をいくつか示します。

  1. カラープロファイルを埋め込まないでください。最近のブラウザーでは、ICCプロファイルのサポートが向上しています。
  2. 画像をsRGBとしてエクスポート
  3. メタデータをなしに設定
  4. 品質を65%に設定 。品質設定の詳細については、 ここ を参照してください。
  5. ファイルのサイズとサイズが要件の範囲内であることを確認してください。つまり、モバイルウェブサイト用に2000x3000pxの画像をエクスポートしないでください。

画像の最適化の詳細 Guide by Google

3
Rayraegah

最近の明確な答えを見つけるのに苦労していますが、私が知ることができることから、Mobile Safariは1つのモバイルブラウザーのみを選択し、プログレッシブJPGをサポートしていますが、実際にはプログレッシブJPGをロードしません。つまり、ダウンロードが完了するまで待機します。完全に表示します。

したがって、視覚的なプログレッシブロード機能は、現在のところそれほど重要ではないようであり、この利点はあまり魅力的ではありません。

そうは言っても、JPGをプログレッシブにすることはmayで全体のサイズを圧縮するのに役立ちます。そのため、どうしても、それはまだメリットですが、広く普及している十分な大きさのメリットではないでしょう。

また、私のコメントで述べたように、これは「対」ではないと思います。問題。私があなたが「最適化された」とはどういう意味かを誤解していない限り、JPGはプログレッシブおよびの両方で最適化できます。実際、Webサイトの画像形式はすべて最適化する必要があります。

2
DA01

主な違いは、画像(jpegファイル)を「プログレッシブ」としてエクスポートすると、フルサイズのイメージが低品質でロードされ、「最適化」としてエクスポートすると、セクションごとに上から下にロードされることです。

0
Radosvet