全幅ブラウザ画像のベストプラクティスは？

より大きなビューポートの画像に関して人々が従うベストプラクティスは何ですか？

どのサイズのブラウザを設計すればよいですか？高解像度のモニターをどのように扱い、大画面のユーザーは何％ですか？

どの解像度を使用するかを本当に決定する必要があるので、ヒーロー画像の高さをどのように最も適切に処理できますか？

もちろん、これはすべて、12列グリッドの哲学を守っている間です;）

アスプリラ、

上記のコメントは非常に優れた技術的ポイントですが、特定のクライアントに合わせて作業を調整することをお勧めします。まず、現在のサイトのGoogle Analytics-Reporting / Technology / Browser＆OS / Screen Resolutionを確認します。このように、一般的なガイドラインを実装するのではなく、クライアントの特定のニーズに対処することで、時間とクライアントの予算を賢く費やします。実際には、デスクトップ以外のトラフィックが費用を正当化しないという理由だけで、完全にレスポンシブなデザインを実行しないようにクライアントに時々アドバイスする必要がありました。

視聴者に画像を提供する際には、いくつかの点に留意する必要があります。

1. 画像の比率を元の寸法と同じに保つ

これは、画像がゆがむのを防ぎ、画像がぼやけるのを防ぐためです。寸法比を同じにするか、適合しない部品を切り取ることができます。

<img>要素または類似のものを使用する場合、これは非常に簡単です。セットwidthまたはheightORセットmax-widthまたはを使用する必要があるだけmax-heightです。

ただし、完全なビューポート幅の画像の場合、これはもう少し複雑です。CSSを使用する方法はいくつかありますが、その最良のbackground-size:cover方法は、記事およびTalkingrockの回答ショーで最初にリンクされた例のようなものです。

さらに、および要素を含むレスポンシブ画像仕様にある機能を使用できるようになりました。これは非常に便利です。これについては、この回答の後半で詳しく説明します。srcset<picture>

2. 視聴者に必要な画像のみを提供する

ページの読み込みを高速化し、ユーザーがより多くのデータを転送する必要がないようにするには、必要なときに必要な画像のみをエンドユーザーに提供することが非常に重要です。これは、彼らが使用しているビューポートと同じサイズまたは少し大きいイメージを提供し、最初のページのロード後すぐに表示されないイメージのロードを待機していることを意味します。

@media背景画像を使用しているときにクエリを使用することにより、CSSを使用してより適切なサイズの画像を提供できます。使用されているメディアクエリにない画像は読み込まれません。少なくとも3つの写真サイズ（少なくとも3つのメディアクエリを意味します）を使用することをお勧めしますが、さらに2つ以上使用するとパフォーマンスが大幅に向上する可能性があります。以下は例ですが、通常はサイトのレイアウトのいくつかの一般的なブレークポイントと一致する必要があります。

@media (max-width: 320px) { /* For phones (this breakpoint is the one I'm least sure about) */
    ... background-image(imageURLforPhones.png); ...
}
@media (min-width:501px) and (max-width: 1024px) { /* For tablets and such */
    ... background-image(imageURLforTablets.png); ...
}
@media (min-width: 1025px) { /* For large screens */
    ... background-image(imageURLforLargeScreens.png); ...
}

しかし、現実に立ち向かいましょう。ブレークポイントを選択するのは得意ではなく、特定の画面サイズを前提として画像の寸法を選択することも完璧ではありません。私たちに何かを「魔法のように」させることができたら、すばらしいと思いませんか？

素晴らしいニュースは、今やできることです！

レスポンシブな画像の仕様では、少しでも手助けをしていただければ、ブラウザにすべてを任せることができます。非常に便利なsrcsetプロパティは、<img>または<picture>要素で使用できます。ここで行うように解像度を切り替えるには、<img>要素を使用する必要があります。

以下は、srcsetその仕事をするために必要なHTMLの例です。詳細については、Yoav Weissの素晴らしい記事をご覧ください。例はそれから引き出されています。

<img src="cat_500px.jpg"
     srcset="cat_750px.jpg 1.5x, cat_1000px.jpg 2x"
     width="500" alt="lolcat">

_{注：特定のビューポートサイズで異なる画像を同じ画像で提供する必要がある場合は、sizes属性を使用できます。}

私が使用していることは言わないよsrcset、必然である優れた CSSの背景画像を使用するよりも、私は自分自身は確かにそう言ってそれで十分な仕事を行っていないが、それはある潜在的により良い方法。

また、パフォーマンスを向上させるために、最初は表示されない画像を「遅延読み込み」することができます。つまり、最初のページの読み込みはできませんが、最初のページの読み込みが完了するとすぐに読み込まれます。そうすれば、できるだけ早く閲覧者にページを見てもらい、後で詳細を入力することができます。これを行う方法があります。今は詳しく説明しません。

3. 表示したい画像のコンテンツが表示されていることを確認してください

私たちが正しい寸法と素晴らしいパフォーマンスを持っている場合、それは素晴らしいことですが、視聴者が私たちに見たいものを見ていない場合は、意味がありません。常に完全に画像を表示している場合、これは問題ではありませんが、画像をトリミングする必要がある場合、これは問題になる可能性があります。

およびbackground-imageを使用してCSSを使用してsをトリミングできます（およびを使用することもできますが、通常はより芸術的で複雑な形状に使用されます）。この詳細は、実装方法に応じて、画像ごとに異なります。background-sizebackground-positionclip

2番目のオプションは、<picture>要素を使用することです。ここに示すように、画像の一部のみを表示したい場合に使用しますが、実際の簡単な例を次に示します（このテーマに関する Jason Grigsbyの素晴らしい記事から抜粋）。

<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 32em)" srcset="med.jpg">
    <img src="small.jpg" alt="The president giving an award.">
</picture>

繰り返しますが、解像度の切り替えのみを行う必要がある場合は、<picture>要素を使用せず、で<img>要素を使用しsrcsetます。<picture>要素が必要なのは、このアートディレクション、つまりクリッピングなどだけです。

サーバー側のトリミング、SVGマスクの使用、またはCanvasでの処理の可能性もありますが、それはこの回答の範囲外です。

その他の注意事項

特定のブレークポイントはそれほど重要ではありません。すべての応答の設計と同じように、それは我々ができるよう最善を行うことが重要ですすべてのビューポートが、すべてのサイトのために完璧になります何のメディアクエリはありません。

ページの読み込み時間は非常に重要であり、画像は初期読み込み時間を大幅に遅くする可能性があります。最初にすぐに表示される画像をロードしてから、他の画像をロードしてください。画像（JPEGなど）が残りをロードしている間、画像の一部が表示されないようにします。また、すべての画像を最適化して、必要な品質を維持しながら、可能な限り最小のファイルサイズになるようにします。

ほとんどの場合、画像は必需品ではなく付属品であることを覚えておくことは重要です。Webページが画像なしでどのように表示されるかを常にテストして、使用できることを確認することをお勧めします。

注：Picturefillと呼ばれるポリフィルを使用して、レスポンシブな画像の仕様をサポートしていない古いブラウザに対応できます。

全幅ブラウザ画像のサイズを選択するためのガイドライン

私はこれらを昨年の研究を通して、そしてこの特定のユースケースについて過去数日間の実験を通して学びました。

• 焦点が1つだけの画像、または焦点がまったくない画像を選択します。

• 解像度に依存する多くの画像を提供する場合、ソース画像ファイルは巨大（最小5000 x 5000）である必要があります。

• ポートレートバージョンでは、アスペクト比を使用する必要があります9w:16h。

• 横長バージョンでは、アスペクト比を使用する必要があります4w:3h。

• 両方のイメージの中で、そこにあるコンテンツの安全なエリアは、イメージの一部が見られることを保証することができ、またはある上、倍、彼らはクリンゴン語で言うように。

• これら5つのアスペクト比に基づいて、両画像のためのコンテンツの安全な領域は、： 、3:2、、4:3 および、おおよそ両画像の上部四分の三です。5:316:1016:9

  

• srcsetレスポンシブ画像を実装する聖杯です。 <picture>おそらく将来的にsrcsetはさらに良くなるでしょうが、今のところ王様です。詳細については、ザックソーシエの回答を確認してください。

これは私が大規模な実験の後に作成した例です。

これらの画像は、ほぼすべての画面をカバーする必要があります。プレビューパネルのサイズを変更して、さまざまな画像を表示します。フォールバックはミッドレンジの画像の1つにする必要がありますが、マイナーな属性のようなものとして画像を入手したページにリンクしました。

私はこの回答を簡潔に（3回書き換えて）保つように努めましたが、アサーションの正当性を提供することはできますが、この回答は膨らむため、そうしていません。上の画像から正当化を推測して、私の例のjsFiddleから証拠を確認できることを願っています。

オン4:3スクリーン：

超ワイドスクリーン：

縦向きの携帯：

役立つと思われる追加情報を以下に示します。

画面サイズ統計

一般的な画面サイズはさまざまであるため、画面サイズの使用率、ブラウザの傾向、オペレーティングシステムなどを一覧にした統計サイトを次に示します。

1. http://www.w3schools.com/browsers/browsers_display.asp
2. http://www.netmarketshare.com/

ヒーローと大きな画像

ヒーローやその他の大きな画像用の優れた簡単なCSSソリューションが存在します。ですねbackground-size:cover。異なる画面サイズで画像をゆがめることなくdiv全体をカバーするため、または親divの形状が変化する場合（テキストの多かれ少なかれ...）は便利です。これは、画像のビットをクリップして適切な比率を維持することで機能し、重要な部分が常に表示されるように背景を配置することもできます（中央中央、右下...）。

もう1つの利点は、画像を背景として表示するため、テキストやその他の情報をdivに簡単に追加できることです。フルサイズの背景としても機能します。これは、background-size：coverをフルスクリーンの背景として使用するJSFiddleの例と、Hero divを使用するJSFiddleの例です。JSFiddleウィンドウのサイズを変更し、CSSの配置を編集して機能することを確認します。

background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:bottom right;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;

バックグラウンドサイズ（CanIUse.com）のブラウザーサポートは非常に優れており、IE7とIE8の修正がここにあります。

すべてのさまざまなデバイスディスプレイサイズ（デスクトップ/タブレット/ハンドヘルド）に対する一般的なソリューションの1つは、大画面TVからハンドヘルドまで、さまざまな画面サイズに合わせて自分自身を再配置するレスポンシブサイトを作成することです。これに興味がある場合は、中級レベルの優れたチュートリアルをご覧ください：http : //www.elated.com/articles/responsive-web-design-demystified/。

レスポンシブデザインはグリッドレイアウトで機能し、サイトがピクセルベースの場合、ピクセルサイズを同等のパーセントに変換する数式があります。「レスポンシブ12カラムグリッド」および「レスポンシブカラムグリッドカリキュレーター」という用語を使用して簡単に検索すると、レスポンシブ12カラムワイヤーフレーム、電卓などの多くの有用なリソースが見つかりました。次に例を示します。http：//onepcssgrid.mattimling.com/

ショートバージョン

最小のビューポート解像度との互換性のために設計してみてください：

デスクトップ：800x600 / 1024x768（ピクセル単位）

古い携帯電話：320x480（ピクセル単位）

タブレット：800x1280（ピクセル単位）

最も低い解像度を選択することで、解像度が小さいだけでなく解像度が大きい人でもデザインが機能するようになります。

ロングバージョン

どちらもブラウザのサイズではなく、さまざまなデバイスのビューポートに興味があるようです。

ブラウザは、視覚的なWebブラウジングのために使用され、完全なウィンドウです。この領域には、ナビゲーションURL入力、タブ、およびツールバーが含まれます。

ビューポートがレンダリングされたウェブサイトを示し、ブラウザの領域です。これは通常、ツールバーとURLの下にあります。これは、デザイナーが通常より関心を持っている領域です。

画面解像度の決定については、まずこれを自問する必要があります。主に何が表示されるのでしょうか。社内で使用する場合は、ラップトップまたはデスクトップで使用される可能性が高いと考えられます。外出先での使用を想定している場合は、主にモバイルデバイスで使用されると推測できます。

Webデザインの現在のトレンドは「モバイルファースト」です。これは、他のプラットフォームでレスポンシブにする前に、モバイル向けにウェブサイトを設計する場所です。これは、デスクトップやラップトップではなく、インターネットアクセスにモバイルデバイスを使用する人が増えているためです。

あなたは見つけることがビューポートのサイズは、ビューポートの大きさについての学習のための非常に役立ちます。このサイトは、多くのモバイルデバイスといくつかのデスクトップのビューポートを提供します。これにより、さまざまなビューポートサイズを探索できます。