このページは Cloud Translation API によって翻訳されました。

レスポンシブ画像

「百聞は一見にしかず」といいますが、百聞は一見にしかずと言うので、しかし多くの場合、ダウンロードされるデータ容量の大半を占めます。レスポンシブウェブデザインでは、デバイスの特性に応じてレイアウトを変更できるだけでなく、画像も変化させることができます。

Pete LePage

レスポンシブウェブデザインでは、デバイスに応じてレイアウトを変更できるだけでなく、コンテンツも変化する可能性があります。たとえば高解像度のグラフィックスにより鮮明な画像を実現します。画像ブラウザの幅が 800 ピクセルの場合は 50% の幅でも問題なく機能する場合もありますが、スペースがあまりにも広く、また同じ帯域幅のオーバーヘッドが必要サイズが小さくなります

アートディレクション

また、画像を大幅に変更する必要がある場合もあります。縦横比の調整、切り抜き、画像全体の置き換えも可能ですこの例では画像の変更は通常、アートディレクションと呼ばれます。詳しくは、詳しくは、responsiveimages.org/demos/ をご覧ください。説明します。

レスポンシブ画像

ウェブページの読み込みに必要な平均バイト数のうち、画像は 60% 以上を占めていることをご存じですか？

このコースでは、最新のウェブで画像を扱う方法について学びます。どのデバイスでも画像をきれいに表示できます

その過程で、さまざまなスキルやテクニックを習得し、開発ワークフローにレスポンシブ画像を統合できます年末までそれに適応し、応答するイメージを使用して開発します。使用シナリオに応じて異なる可能性があります。

これは、Udacity が提供する無料のコースです。

コースを受講する

マークアップ内の画像

img 要素はダウンロード、デコード、レンダリングを行う強力な要素最新のブラウザではさまざまな画像形式がサポートされています。以下を含むどのデバイスでも動作する画像は、パソコンの場合と変わらずわずかな調整で良好な結果が得られます

概要

画像が誤ってオーバーフローしないように、相対サイズを使用する作成されます。
環境に応じて異なる画像を指定するには、picture 要素を使用します。デバイスの特性（アートディレクション）に応じて最適化されます。
img 要素で srcset と x 記述子を使用して、さまざまな画面密度から最適な画像を選んでブラウザに提供します。
ページに画像が 1 つか 2 つしかなく、それらが Google のインライン画像を使用して、ファイルリクエストを減らすことを検討してください。

画像の相対サイズを使用する

画像の幅を指定する場合は、相対単位を使用して画像の幅を指定する自動的に表示されなくなりますたとえば、width: 50%; は、次の原因になります。画像の幅を、含まれる要素の 50% にする（ビューポートの 50% や実際のピクセルサイズの 50%）。

CSS ではコンテンツをコンテナからオーバーフローさせることができるため、 width: 100% に設定して、画像やその他のコンテンツがオーバーフローしないようにします。例:

img, embed, object, video {
    max-width: 100%;
}

img の alt 属性を使用して、わかりやすい説明を入力してください。要素コンテキストを画面に提供することで、サイトのアクセシビリティを高めることができます支援するテクノロジーです

高 DPI デバイスの `srcset` で `img` を強化

srcset 属性は、terraform apply の img 要素を使用すると、複数の画像ファイルを簡単に提供できます。デバイス特性に応じて異なります。image-set の類似ユーザー CSS 関数 CSS ネイティブで srcset を使用すると、ブラウザが最適なものを選択できるようになります。使用する必要があります。たとえば、デバイスの特性に応じて、 2 倍のディスプレイに 2 倍の画像、将来は 1 倍の画像を帯域幅が限られているネットワークでは、デバイスの 2 台目になります。

<img src="photo.png" srcset="photo@2x.png 2x" ...>

srcset をサポートしていないブラウザでは、デフォルトの src 属性で指定された画像ファイル。このため、データアナリストはデバイスに関係なく表示可能な 1x の画像を常に含めます。提供しますsrcset がサポートされている場合、リクエストが行われる前に画像/条件が解析され、最も適切なイメージがダウンロードされて表示されます。

条件にはピクセル密度から幅や長さまで現在適切にサポートされているのはピクセル密度のみです。現在のバランスを取るため将来的な機能で動作を保証したい場合は、この 2x の画像を作成します。

`picture` を使用したレスポンシブ画像でのアートディレクション

デバイスの特性（アートとも呼ばれます）に基づいて画像を変更する picture 要素を使用します。「 picture 要素は、次の宣言型ソリューションを定義します。さまざまなユースケースに基づいて、複数のバージョンのデバイスのサイズ、解像度、画面の向き、使用できます。

注: picture 要素はブラウザに配置され始めています。一部のブラウザではまだ利用できませんが、強い下位互換性があり、Picturefill ポリフィルを使用できる可能性があるため、この機能を利用することをおすすめします。詳しくは、ResponsiveImages.org をご覧ください。

画像ソースが画像の場合は、picture 要素を使用するまたはレスポンシブデザインの要件が画面によって若干異なる画像が表示されます。類似の video 要素で、複数の source 要素がこれにより、さまざまな画像ファイルを画像形式に応じて異なります

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

試してみる

上記の例で、ブラウザの幅が 800 ピクセル以上であれば、次のいずれかになります。デバイスの解像度に応じて、head.jpg または head-2x.jpg が使用されます。もしブラウザのサイズが 450 ～ 800 ピクセルである場合は、デバイスの解像度に応じて head-small.jpg または head-small- 2x.jpg が使用されます。画面幅の場合 450 ピクセル未満で、picture 要素がない場合の下位互換性ブラウザは代わりに img 要素をレンダリングします。含まれます。

相対的なサイズの画像

画像の最終的なサイズが不明な場合、画像の画像ソースの密度記述子です。これは特に画像の場合に当てはまりますブラウザの幅に比例し、ブラウザのサイズ。

固定の画像サイズと密度を指定する代わりに、画像サイズをサイズと幅の記述子を追加して、提供された各画像の有効な画像要素がブラウザによって自動的に計算され、最適な画像を選択してダウンロードします

<img src="lighthouse-200.jpg" sizes="50vw"
     srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
             lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
             lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
             lighthouse-1800.jpg 1800w" alt="a lighthouse">

試してみる

上記の例では、ビューポートの幅の半分の画像をレンダリングしています（sizes="50vw"）、ブラウザの幅とデバイスのピクセルに応じてサイズに関係なく、ブラウザが適切な画像を選択することができる表示されます。たとえば、下の表は、Google Cloud Storage バケットにブラウザは以下を選択します。

ブラウザの幅	デバイスのピクセル比	使用された画像	有効な解決策
400 ピクセル	1	`200.jpg`	1x
400 ピクセル	2	`400.jpg`	2 倍
320px	2	`400.jpg`	2.5 倍
600 ピクセル	2	`800.jpg`	2.67 倍
640 ピクセル	3	`1000.jpg`	3.125 倍
1,100 ピクセル	1	`800.png`	1.45 倍

レスポンシブ画像でのブレークポイントを考慮に入れる

多くの場合、画像サイズはサイトのレイアウトによって変わる可能性があります。あります。たとえば、小さな画面では画像をビューポートの全幅に広げますが、大画面では割合は小さくなります

<img src="400.png"
     sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
     srcset="100.png 100w, 200.png 200w, 400.png 400w,
             800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">

試してみる

上記の例の sizes 属性は、複数のメディアクエリを使用して画像のサイズを指定します。ブラウザの幅が 600 ピクセル、画像はビューポートの幅の 25%500 ピクセルの範囲内 600 ピクセル、画像はビューポートの幅の 50% です。500px 未満ではは全幅です。

商品画像を展開可能にする

J.展開可能な商品画像が表示された Crews のウェブサイト — </ph> J.展開可能な商品画像が表示された Crew のウェブサイト。

顧客は何を買っているのか知りたいものです。小売サイトではユーザーが期待する行動は高解像度で商品をクローズアップして詳細、できなかったらイライラするでしょう。

タップ可能で展開可能な画像の好例は、J.乗務員の現場。オーバーレイが消える場合は、画像がタップ可能であることを示します。これにより、画像を拡大できます。高精細な画像で表します

その他の画像テクニック

圧縮画像

「圧縮画像手法あらゆるデバイスに高圧縮の 2 倍速画像を配信。制御します。画像のタイプとレベルによっては、画質は変わらないように見えても、ファイルサイズは小さくなります。大幅に低下しました

試してみる

JavaScript による画像の置換

JavaScript による画像置換ではデバイスの機能を確認し、ということになります。デバイスのピクセル比は、 window.devicePixelRatio、画面の幅と高さの取得、さらに場合によってはネットワーク接続が navigator.connection を介してスニッフィングしているか、偽のトークンを発行しているリクエストできます。これらの情報をすべて収集したら指定します。

この方法の大きな欠点の一つは、JavaScript を使用すると少なくとも先読みパーサーが終了するまで画像の読み込みを遅らせます。この pageload イベントが終了するまで、画像のダウンロードが開始されません。防ぐことができます。さらに、ブラウザはほとんどの場合、1x と 2x その結果、ページのデータ量が増えます。

インライン画像: ラスターとベクター

画像を作成して保存する方法は 2 つあります。これは、イメージをレスポンシブにデプロイする方法に影響します。

ラスター画像（写真やその他の画像など）は、ドットのグリッドとして表されます。ラスター画像は HTML キャンバス要素を使用して作成できます。形式 PNG、JPEG、WebP などのファイル形式を使用します。

ロゴや線画などのベクター画像は、曲線、線、シェイプ、塗りつぶし色、グラデーションを使用できます。ベクター画像はあるいは、Adobe Illustrator や Inkscape などのプログラムで、 SVG などのベクター形式を利用できます。

SVG

SVG を使用すると、ウェブページにレスポンシブなベクターグラフィックを含めることができます。「ベクターファイル形式がラスター形式より優れている点は、ブラウザがあらゆるサイズのベクター画像をレンダリングできます。ベクター形式では、直線、曲線、色などで構成される画像。一方、ラスター形式には個々のドットに関する情報しか含まれていない色があるため、ブラウザは拡大縮小の際に空白をどのように埋めるかを推測する必要があります。

以下は、同じ画像の 2 つのバージョンです。左側の PNG 画像と SVG です。表示されます。SVG はどのサイズでもきれいに見えますが、隣の PNG はまずサイズを大きくすると画像がぼやけてしまいます

ページで行われるファイルリクエストの数を減らすには、 SVG 形式または Data URI 形式を使用してインラインで表示できます。このページのソースを表示すると下の 2 つのロゴ（Data URI と SVG）がインラインで宣言されています。

SVG は、モバイルとデスクトップの両方で優れたサポートを受けています。最適化ツールを使用して SVG のサイズが大幅に縮小されます次の 2 つのインライン SVG ロゴは、同じですが、1 つは約 3 KB、もう 1 つはわずか 2 KB です。

データ URI

データ URI を使用すると、画像などのファイルをインラインで img 要素のソースを、Base64 でエンコードされた文字列として次の形式にします。

<img src="data:image/svg+xml;base64,[data]">

上記の HTML5 ロゴのコードの開始部分は次のようになります。

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">

（完全版の長さは 5,000 文字を超えます）。

[n] をドラッグツールの jpillora.com/base64-encoder を使用して、画像などのバイナリファイルをデータ URI に変換できます。SVG と同じように Data URI は、モバイルとモバイルデバイスでは十分にサポートされており、できます。

CSS でのインライン化

Data URI や SVG は CSS でインライン化することもできます。これはモバイルとパソコンの両方で利用できます。ここでは、2 つの同じ見た目の画像を次のように実装しています。 CSS の背景画像1 つの Data URI、1 つの SVG:

インライン化の長所と短所

画像のインラインコードは、特にデータ URI では冗長になることがあるため、使用しますか？HTTP リクエストを減らすため。SVG と Data URI を使用すると、ウェブページ全体（画像、CSS、JavaScript を含む）を、記述できます。

デメリット:

モバイルでは、データ URI が大幅に遅くなる可能性がある外部 src からの画像よりもモバイルで表示できます。
データ URI を使用すると、HTML リクエストのサイズが大幅に増大する可能性があります。
マークアップやワークフローが複雑になります。
Data URI 形式はバイナリよりかなり大きく（最大 30%）、総ダウンロードサイズが減少しません。
データ URI はキャッシュできないため、データ URI を使用するすべてのページでダウンロードする必要があります。
IE 6 と 7 ではサポートされておらず、IE8 では不完全なサポート。
HTTP/2 では、アセットリクエストの数を減らすことは優先順位が低くなります。

あらゆるレスポンシブコンテンツと同様に、何が最適かをテストする必要があります。デベロッパーを使用するダウンロードファイルのサイズ、リクエスト数、合計バイト数をレイテンシを短縮できます。Data URI はラスター画像で役立つことがあります。たとえば、他の場所で使用されていない写真が 1 つか 2 枚しかないホームページにもしベクター画像をインライン化する必要がない場合は、SVG をお勧めします。

CSS の画像

CSS background プロパティは複雑な画像を追加するための強力なツールです。複数の画像を簡単に追加して繰り返し使用できます。バックグラウンドプロパティをメディアクエリと組み合わせると、さらに強力になり、画面に応じて条件付きの画像読み込みが可能になります。表示間隔を設定できます

概要

ディスプレイの特性に最も適した画像を使用します。画面も考慮してください。サイズ、デバイスの解像度、ページレイアウトです。
次を使用して、高 DPI ディスプレイ用の CSS の background-image プロパティを変更します。 min-resolution と -webkit-min-device-pixel-ratio を使用したメディアクエリ。
srcset を使用して、1x の画像に加えて高解像度の画像を提供マークアップを追加します。
JavaScript の画像置換を使用する場合はパフォーマンスコストを考慮する圧縮された高解像度の画像を低解像度のデバイスに接続できます

メディアクエリを使用して画像の条件付き読み込みやアートディレクションを行う

メディアクエリはページレイアウトだけでなく、また、ビューポートに応じて、条件付きで画像を読み込んだり、アートディレクションを提供したりできますあります。

たとえば、以下のサンプルでは、小さい画面の場合は small.png のみになります。ダウンロードされ、コンテンツ div に適用されました（大画面の場合） background-image: url(body.png) は本文に適用され、background-image: url(large.png) はコンテンツ div に適用されます。

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

試してみる

image-set を使用して高解像度の画像を提供する

CSS の image-set() 関数は、background プロパティの動作を強化します。デバイスごとに複数の画像ファイルを簡単に提供できます。説明します。これにより、ブラウザは状況に応じて最適な画像を選択できデバイスの特性（2 倍のディスプレイで 2 倍の画像を使用するなど）帯域幅が限られているネットワークでは、2 倍のデバイスで 1 倍の画像を撮影できます。

background-image: image-set(
    url(icon1x.jpg) 1x,
    url(icon2x.jpg) 2x
);

正しい画像を読み込むだけでなく、ブラウザは画像をスケーリングします。必要があります。つまりブラウザでは、2 倍の画像が 2 倍の 1 倍の画像として大きくなり、2 倍の画像を 2 分の 1 に縮小します。ページ上で同じサイズに見えることを確認する

image-set() のサポートは新しく、Chrome と Chrome でのみサポートされています。ベンダープレフィックス -webkit を持つ Safari必ず絵文字を含めるように image-set() がサポートされていない場合の代替画像次に例を示します。

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
  background-image: image-set(
    url(icon1x.png) 1x,
    url(icon2x.png) 2x
  );
}

試してみる

上記のコードは、image-set をサポートするブラウザで適切なアセットを読み込みます。それ以外の場合は 1x アセットにフォールバックします。明らかに注意すべき点は image-set() ブラウザのサポートは少ないため、ほとんどのブラウザには 1x アセットが割り当てられます。

メディアクエリを使用して高解像度の画像やアートディレクションを行えます

メディアクエリでは、メディアクエリに基づいてデバイスピクセル比これにより、2 倍のディスプレイと 1 倍のディスプレイに異なる画像を指定できます。

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
    /* High dpi styles & resources here */
}

Chrome、Firefox、Opera はすべて標準の (min-resolution: 2dppx) をサポートしています。 Safari と Android のどちらのブラウザでも、古いベンダーのプレフィックスが必要です。構文を指定します。dppxなお、これらのスタイルが読み込まれるのは、デバイスがメディアクエリと一致するため、ベースケースのスタイルを指定する必要があります。この方法には、ブラウザがなんらかの操作をしているときに必ず何かがレンダリングされるというメリットもあります。解像度固有のメディアクエリをサポートしていません。

.sample {
  width: 128px;
  height: 128px;
  background-image: url(icon1x.png);
}

@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2)  /* Safari & Android Browser */
{
  .sample {
    background-size: contain;
    background-image: url(icon2x.png);
  }
}

試してみる

min-width 構文を使用して、構成に応じて代替画像を表示することもできます。指定します。この手法には、画像がアップロードされないダウンロードされます。たとえば、bg.png はブラウザの幅が 500 ピクセル以上の場合、ダウンロードされて body に適用されます。

@media (min-width: 500px) {
    body {
    background-image: url(bg.png);
    }
}

アイコンに SVG を使用する

ページにアイコンを追加する際は、可能な場合は SVG アイコンを使用するか、一部のアイコン大文字と小文字、Unicode 文字を使用できます。

概要

アイコンには、ラスター画像ではなく SVG または Unicode を使用します。

シンプルなアイコンを Unicode に置き換える

多くのフォントは多数の Unicode グリフをサポートしており、画像ではなく画像とは異なり Unicode フォントは調整しやすく、見栄えが良い画面上に表示するサイズに関係なく常に同じサイズで表示されます

Unicode には通常の文字セットのほか、矢印（←）、数学演算子（√）、幾何学図形 ★、操作画像（▶）、楽譜（♬）、ギリシャ文字（Ω）、チェスのコマ（♞）。

Unicode 文字を含める方法は、名前付きエンティティと同じです。 &#XXXX。ここで、XXXX は Unicode 文字番号を表します。例:

You're a super &#9733;

あなたはスーパー ★ です。

複雑なアイコンを SVG に置き換える

複雑なアイコンの要件の場合、SVG アイコンは一般的に軽量です。使いやすく、CSS でスタイル設定できます。SVG には多くの利点があるラスター画像:

無限にスケーリングできるベクターグラフィックである。
色、シャドウ、透明度、アニメーションなどの CSS 効果は、説明します。
SVG 画像は、ドキュメント内で直接インライン化できます。
セマンティックである。
適切な属性を使用することでアクセシビリティが向上します。

With SVG icons, you can either add icons using inline SVG, like
this checkmark:
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       width="32" height="32" viewBox="0 0 32 32">
    <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
  </svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.

試してみる

アイコンフォントは慎重に使用する

</ph> フォントアイコンに FontAwesome を使用しているページの例。

アイコンフォントは人気があり、簡単に使用できますが、欠点もあります。 SVG アイコンとの比較:

ベクターグラフィックで、無限にスケーリングできるが、アイコンが期待どおりに鮮明にならない
CSS によるスタイル設定には制限があります。
ピクセルの完璧なポジショニングは、行の高さやサイズ、文字間隔など
セマンティックではないため、スクリーンリーダーやサポートしています。
スコープが適切でないと、小さなサブセットです。

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

試してみる

アイコンフォントは数百種類あり、無料または有料で提供されています。Font よろしくお願いいたします。ピクト、グリフィコン。

追加の HTTP リクエストとファイルサイズの重みのバランスを取ってください。アイコンの必要性を判断できます。たとえば、必要なアイコンの数が限られている場合は、画像または画像スプライトの使用をおすすめします

画像を最適化してパフォーマンスを向上

ダウンロードされるデータ容量の大部分を画像が占める場合が多く、広い範囲に配置することをおすすめします。その結果多くの場合、バイト削減とパフォーマンスの向上が最大限にウェブサイトの最適化: ブラウザでダウンロードする必要があるバイト数が減る一方で、クライアントの帯域幅の競争が激しくなり、要求がブラウザですべてのアセットをダウンロードして表示できます。

概要

画像形式を無作為に選ぶのではなく、最適な形式を使用します
ワークフローに画像の最適化ツールと圧縮ツールを含めて、制限します。
よく使用する画像を画像スプライトです
最初のページ読み込み時間を改善し、最初のページのデータ量を減らすには、スクロール後に画像を読み込むようにします。

適切な形式を選択する

画像には次の 2 種類があります。ベクター画像ラスター画像。ラスター画像の場合は適切な圧縮形式を選ぶ必要もあります例: GIF、PNG、JPG。

写真やその他の画像などのラスター画像はグリッドで表されます。定義できます。ラスター画像は通常、カメラやまたは、ブラウザで canvas 要素を使用して作成できます。画像サイズが大きくなり、ファイルサイズも大きくなります。サイズよりも大きくスケーリングすると、ラスター画像はぼやけています。これは、ブラウザが画像を推測する必要があるためです。足りないピクセルを埋める方法を検討します

ロゴや線画などのベクター画像は、一連の曲線と線、図形、塗りつぶしの色を設定できます。ベクター画像は、 Adobe Illustrator または Inkscape を使用して、 SVG。ベクター画像は画像の基盤となる品質を損なうことなくスケーリングでき、変化します。

適切な形式を選択する際には、画像の原点（ラスターまたはベクター）、コンテンツ（色、アニメーション、テキストなど）。すべての画像タイプに適合するフォーマットは存在せず、それぞれに独自の強みがある特定することです

適切な形式を選択する際は、まず次のガイドラインを参考にしてください。

写真画像には JPG を使用します。
ベクターアートや単色のグラフィック（ロゴやラインアートなど）には、SVG を使用します。ベクターアートを利用できない場合は、WebP または PNG をお試しください。
GIF ではなく PNG を使用すると、より多くの色を使用でき、より見やすくなりますなります。
長いアニメーションには、画像品質に優れた <video> の使用を検討してください。ユーザーが再生を制御できるようにします。

ファイルサイズを小さくする

「後処理」によって、画像ファイルのサイズを大幅に縮小できます。画像クリックします。画像圧縮には、非可逆圧縮、非可逆圧縮、ロスレス、オンライン、GUI、コマンドラインです可能であれば、画像の最適化を自動化して説明します。

JPG に対して、さらなる可逆圧縮を行うツールがいくつか用意されています。と PNG ファイル。画質には影響しません。JPG の場合は、次をお試しください jpegtran または jpegoptim（Linux でのみ利用可能。 --strip-all オプションを指定して実行します）。PNG の場合は、次をお試しください OptiPNG または PNGOUT。

画像スプライトを使用する

CSS スプライトとは、複数の画像を 1 つの "スプライトシート"説明します。個別のイメージを使用するには、Terraform で要素の背景画像（スプライトシート）と、表示位置を表示するオフセットあります

.sprite-sheet {
  background-image: url(sprite-sheet.png);
  width: 40px;
  height: 25px;
}

.google-logo {
  width: 125px;
  height: 45px;
  background-position: -190px -170px;
}

.gmail {
  background-position: -150px -210px;
}

.maps {
  height: 40px;
  background-position: -120px -165px;
}

試してみる

スプライトには、ダウンロードに必要なダウンロード数を減らせるというメリットがあります。引き続きキャッシュを有効にできます。

遅延読み込みを検討する

遅延読み込みを使用すると、大量のメッセージを含む長いページの読み込みを大幅に高速化できます。スクロールしなければ見えない位置にある画像がスクロールしなければ見えない範囲にあることがわかりますコンテンツの読み込みとレンダリングが終了しましたパフォーマンスに加えて遅延読み込みを使用すると、無限スクロールエクスペリエンスを創出できます。

無限スクロールのページを作成する場合は、コンテンツがそのコンテンツを検索エンジンが認識できなくなる可能性があります。また探している情報をフッターに表示する常に新しいコンテンツが読み込まれるため、フッターは表示されません。

画像を完全に使わない

実際には、画像そのものが最適な画像ではない場合もあります。可能な限り、ブラウザのネイティブ機能によって、同じまたは類似の機能を説明します。ブラウザでは、これまで必要だった画像を生成できます。作成します。つまり、ブラウザで個別の画像をダウンロードする必要が画像の不自然なスケーリングを防止できます。Unicode または特殊なコードを使用できます。アイコンをレンダリングできます。

テキストを画像に埋め込むのではなく、マークアップの中に配置する

可能な限り、テキストはテキストにし、画像には埋め込まないでください。対象たとえば、見出しに画像を使用したり、連絡先情報を配置したりします。画像に直接組み込むことで、ユーザーが情報をコピーして貼り付けるユーザーが情報にアクセスできなくなるレスポンシブではありません代わりに、マークアップ内にテキストを配置してください。そして必要に応じてウェブフォントを使用して必要なスタイルを実現します

CSS を使用して画像を置き換える

最新のブラウザでは、CSS 機能を使用して、作成します。たとえば、複雑な勾配は、 background プロパティ。シャドウは box-shadow を使用して作成し、丸めます。角は border-radius プロパティで追加できます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ペレンテスクの座席 amet augue eu magna scelerisque porta ut ut dolor.Nullam プレイスラット egestas nisl sed sollicitudin.Fusce placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit.デュイスオルネール fringilla dui non vehicula.In hac habitasse placea dictumst.Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.

<style>
    div#noImage {
    color: white;
    border-radius: 5px;
    box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
    background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
    }
</style>

なお、これらの手法を使用するにはレンダリングサイクルが必要です。モバイルでは大きな意味があります使いすぎると、すべての特典を失うことになりますパフォーマンスが低下する可能性があります

レスポンシブ画像

アート ディレクション

レスポンシブ画像

マークアップ内の画像

概要

画像の相対サイズを使用する

高 DPI デバイスの srcset で img を強化

picture を使用したレスポンシブ画像でのアート ディレクション

相対的なサイズの画像

レスポンシブ画像でのブレークポイントを考慮に入れる

商品画像を展開可能にする

その他の画像テクニック

圧縮画像

JavaScript による画像の置換

インライン画像: ラスターとベクター

SVG

データ URI

CSS でのインライン化

インライン化の長所と短所

CSS の画像

概要

メディアクエリを使用して画像の条件付き読み込みやアート ディレクションを行う

image-set を使用して高解像度の画像を提供する

メディアクエリを使用して高解像度の画像やアート ディレクションを行えます

アイコンに SVG を使用する

概要

シンプルなアイコンを Unicode に置き換える

複雑なアイコンを SVG に置き換える

アイコン フォントは慎重に使用する

画像を最適化してパフォーマンスを向上

概要

適切な形式を選択する

ファイルサイズを小さくする

画像スプライトを使用する

遅延読み込みを検討する

画像を完全に使わない

テキストを画像に埋め込むのではなく、マークアップの中に配置する

CSS を使用して画像を置き換える

アートディレクション

高 DPI デバイスの `srcset` で `img` を強化

`picture` を使用したレスポンシブ画像でのアートディレクション

メディアクエリを使用して画像の条件付き読み込みやアートディレクションを行う

メディアクエリを使用して高解像度の画像やアートディレクションを行えます

アイコンフォントは慎重に使用する