画像のサイズ、解像度、品質の推奨

Question

私は現在、ウェブサイトに影響を与えているウェブページの画像解像度、サイズ、品質に関する記事を探しています。

私はクライアントのためのウェブサイトに取り組んでいます。芸術とデザインの名誉卒業生として、顧客は7メガバイト〜10メガバイトのイメージがウェブサイトには十分で、合計で約400メガバイトです。私は帯域幅の制限とパフォーマンスを議論しようとしましたが、これらは地面を保持していません。

画像の標準は72dpiで、標準の画面解像度（1024x768）より大きくなく、1mb以上のサイズです（私の意見では既に大きすぎます）。私の主張は、ページロード時に7MB以上のファイルをギャラリーにロードすると、ページがロードされる前に最初にキャッシュにストリーミングされるために7〜10枚の画像を長時間待たなければならない場合、レイジーローディングプラグイン（私たちはフラッシュには行きたくはありません）と遅延ロードにはパフォーマンス上のペナルティがあります。

ここにいる人には、画像サイズ、解像度、品質に関する推奨事項はありますか？ユーザーがギャラリーをナビゲートすると、画像のHD画質が失われることはありません（最初にサムネイルする必要があります）。

Answer 1

私は（我々はまだ1Mbpsの接続以下を使用する場合）と、今まで、これらを次されている前に、ガイドラインを読んでいる：

• 高解像度の画像が1.5よりも大きくすべきではない - 2メガバイトこれを大きくすることは、ウェブページのコンテンツ自体よりも大きくなります。圧縮をテストする
、彼らは自分のサイトに大きな写真を配置する方法に http://deviantart.comをチェックしようとすると、任意の
• 寸法は、ブラウザで閲覧可能（およびスクロールを避ける）のに十分でなければならない場合はEXIFを使用して画像のプロパティを確認してください。それは大文字と小文字の区別であり、誰も同じ設定ではありません。目に見える品質の損失のない高品質で高い圧縮率は、ウェブ設計における慣行である。
• JPEGはレイアウトにはPNG、アイコンにはGIFが最適です。
• javascriptを使用してブラウザがアイドル状態のときに、バックグラウンドで画像を読み込もうとします。そのようにして、ユーザはそれを知る前にキャッシュに入っています。 Webページの設計上の
• より、私たちは画像だけを待つ速いサイトを作り、サイト自体に重いグラフィックスを使用しないでください。

Answer 2

あなたが本当にそれを煮詰めるなら、あなたは選択肢がありません。

あなたは、現実的ではない巨大なファイルサイズについて話しています。

小さいバージョンをダウンロードする必要があります。その後、品質の高いバージョンをダウンロードしたり、オンマウスオーバーまたはクリックしてフルイメージを提供することができます。

Answer 3

いくつかの一般的なガイドライン：（もちろん）

• サムネイル

• オファー複数の画像サイズ（小、中、大）。巨大な画像のUXの意味を理解しているうちに、doは、高速接続と大型ディスプレイを備えているか、高解像度バージョンを待っています。 しかし、これは唯一の選択肢ではありません。

• 異なる圧縮レベルを試して、さまざまなサイズに適したものを確認してください。ボード全体で1つの圧縮レベルを使用しても必ずしも機能するとは限りません。再び（ソースの材料に依存して）、ハイエンドでほぼ損失のない圧縮が必要になることがあります。たとえば、印刷用の画像、細かいディテールのCAD図面など。

• 適用可能な場合は、順次読み込み技術を使用します。たとえば、ロードするイメージが10個（最適化されているかどうか）である場合は、最初に表示されたものが実際にサーバーから要求された最初のイメージであることを確認します。

Answer 4

あなたのクライアントは、自分のイメージを縮小するよう求めているという印象を受けて、ユーザーが受け取ったイメージの品質を損なうだけの「妥協」を表しています。

真実は8〜10メガバイトの画像は、それが直帰率を増加させる恐ろしいユーザーエクスペリエンスを作成し、ダウンロードするには、ほとんどのユーザーが何秒を取るほど大きいこと、もちろん、です。

クライアントにのサイドバイサイドデモ彼女のウェブサイトのいくつかのウェブ最適化された画像を読み込んで、8-10MBの画像をロードしているサイトを表示して、彼女に決定させます。結局のところ、プロとしてのあなたの仕事は、彼女が良い選択をするのを助けることですが、彼女はそれを主張すると悪いものを作ることは自由です（それは彼女のブランド、お金、そして権利です）。あなたが潜在的に行うことができ、他の

何かが、ウィンドウの大きさを検出し、ユーザーは、超高解像度のモニタであるかのウィンドウが表示された場合に特に大きいことがあれば、より大きな画像を読み込むです。

運が良かった！