web-dev-qa-db-ja.com

写真のウェブサイト:ファイルサイズのためにどれだけの品質を犠牲にしますか?

写真家のためにウェブサイトをデザインしています。明らかに、画像を圧縮して、読み込みを高速化し、すべての訪問者の上限を使用しないようにしました。 (かなりの数の写真があるので、すべてのアルバムを閲覧する場合、1か月分の帯域幅をすべて使用します。)

写真家は、自分のウェブサイトに「ピクセル化された」または低解像度の画像があると、自分にとって無愛想な画像が作成されるのではないかと心配していました。

専門性に対してどれだけの品質を犠牲にできますか?写真の解像度が低い場合、またはウェブの性質を人々が単に理解する場合、それは実際に写真家に反映されますか?

7
Chaim

私の経験では、これはロード速度と写真の品質のバランスに近いものです。私がプロの写真家であるということを考えると、この難しい課題を理解しています。

インターネットは大いに進歩し、この問題を回避するために利用できる優れた技術とツールがいくつかあると感じています。これらの手法はどれも、写真ウェブサイトと密接な関係や特定のものではありません。

最初の質問について:専門性に対してどれだけの品質を犠牲にできますか?

私の経験では、一般的に、jpegイメージの設定で遊んでバランスを見つけることができます。 70〜85の品質の設定で十分です。また、ファイルサイズを最小限に抑えるには、72 DPIを使用するだけで十分です。

あなたの2番目の質問:写真が低解像度であるか、人々がウェブの性質を単に理解するかどうか、それは確かに写真家に反映されますか?

はい。写真の品質があまり高くない場合、画像のピクセル化や品質の低下は反映されません。写真家の作品は、視覚的な品質と視覚的な細部への注意にのみ依存しています。

考慮すべき技術

必要に応じて、極端な圧縮を避けます。インターネットでは、負荷を改善するための多くの優れた手法が提供されています。

  • 優れたユーザーエクスペリエンスを提供する:訪問者に豊富なフィードバックを提供することで、フラストレーションが減り、ウェブサイトに長く留まります。次のUI関連のテクニックを検討してください。
    • ローダーの活用
    • インタラクティブな画像ズームは非常に理にかなっています。
  • 動的画像キャッシング-事前にユーザーにさまざまなサイズの画像を生成するウェブサイトソフトウェアを利用します。 LAMPスタックを使用している場合、PHPは2つの優れたコードライブラリを提供します( GdImagemagick および たくさんのすばらしいスクリプト それはあなたのためにこれを行うことができます。

  • CDNを利用する:アーキテクチャ(サーバー)セットアップを検討します。 CDNまたは別のネットワークから静的イメージをロードする場合と同様に、ロード時間が短縮されます。

  • JavaScriptの遅延読み込みを検討してください:「遅延読み込み」イメージを提供するJavaScriptプラグインには lots があります。絶対に必要になるまでイメージのロードを待機します。

  • 画像サイズ変更サービスを利用する:このまさにトピックに関するこのスレッドのすぐ下に素晴らしいスレッドがあります! Smush.ItまたはAPIを使用した同様の可逆画像縮小

  • 最後に、レビュー YUIパフォーマンスガイド:Yahooはパフォーマンスに関する素晴らしいガイドを提供しています。これらのヒントのいくつかはすでに上記で言及されていますが、このガイドはかなり包括的なものです。

8
chrisjlee