diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/media | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/media')
| -rw-r--r-- | files/ja/web/media/autoplay_guide/index.html | 276 | ||||
| -rw-r--r-- | files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.html | 95 | ||||
| -rw-r--r-- | files/ja/web/media/formats/image_types/index.html | 1373 | ||||
| -rw-r--r-- | files/ja/web/media/formats/index.html | 86 | ||||
| -rw-r--r-- | files/ja/web/media/images/aspect_ratio_mapping/index.html | 75 | ||||
| -rw-r--r-- | files/ja/web/media/images/index.html | 65 | ||||
| -rw-r--r-- | files/ja/web/media/index.html | 91 | ||||
| -rw-r--r-- | files/ja/web/media/streaming/index.html | 39 |
8 files changed, 2100 insertions, 0 deletions
diff --git a/files/ja/web/media/autoplay_guide/index.html b/files/ja/web/media/autoplay_guide/index.html new file mode 100644 index 0000000000..51d958e791 --- /dev/null +++ b/files/ja/web/media/autoplay_guide/index.html @@ -0,0 +1,276 @@ +--- +title: メディアおよびウェブオーディオ API の自動再生ガイド +slug: Web/Media/Autoplay_guide +tags: + - API + - Audio + - Draft + - Guide + - HTML + - JavaScript + - Media + - Muting + - Playback + - Video + - Web + - Web Audio API + - autoplay + - mute + - muted + - play +translation_of: Web/Media/Autoplay_guide +--- +<p>ページが読み込まれるとすぐに音声（または音声トラックを含む動画）の再生を自動的に開始することは、ユーザーにとって歓迎されない驚きです。 メディアの自動再生は便利な目的に役立ちますが、注意して必要なときにだけ使用してください。 ユーザーがこれを制御できるようにするために、ブラウザーは多くの場合、さまざまな形式の自動再生のブロック（autoplay blocking）を提供します。 <span class="seoSummary">このガイドでは、さまざまなメディアおよびウェブオーディオ API（Web Audio API）の自動再生機能について説明します — 自動再生の使用方法と自動再生のブロックを適切に処理するためのブラウザーの操作方法の簡単な概要を含みます。</span></p> + +<p>ソースメディアに音声トラックがない場合、または音声トラックがミュートされている場合、自動再生のブロックは {{HTMLElement("video")}} 要素には適用<em>されません</em>。 アクティブな音声トラックを持つメディアは<strong>可聴である</strong>と見なされ、自動再生のブロックがそれらに適用されます。 <strong>可聴でない</strong>メディアは自動再生のブロックの影響を受けません。</p> + +<h2 id="Autoplay_and_autoplay_blocking" name="Autoplay_and_autoplay_blocking">自動再生と自動再生のブロック</h2> + +<p>用語「<strong>自動再生</strong>（<strong>autoplay</strong>）」は、ユーザーが再生の開始を明確に要求しなくても音声の再生を開始させる機能を意味します。 これには、メディアの自動再生のための HTML 属性の使用と、ユーザー入力を処理するコンテキストの外で再生を開始するための JavaScript コードのユーザーの両方が含まれます。</p> + +<p>つまり、次の両方が自動再生のふるまいと見なされるため、ブラウザーの自動再生のブロックのポリシーに従います。</p> + +<pre class="brush: html"><audio src="/music.mp4" autoplay></pre> + +<p>と</p> + +<pre class="brush: js">audioElement.play();</pre> + +<p>次のウェブ機能および API は自動再生のブロックの影響を受ける可能性があります。</p> + +<ul> + <li>{{Glossary("HTML")}} の {{HTMLElement("audio")}} 要素と {{HTMLElement("video")}} 要素</li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">ウェブオーディオ API</a>（Web Audio API）</li> +</ul> + +<p>ユーザーの観点からは、警告なしに自発的にノイズを発し始めるウェブページまたはアプリは、耳障り、不便、または気まずいものになる可能性があります。 そのため、ブラウザーでは通常、特定の状況下でのみ自動再生が正常に行われるようにすることしかできません。</p> + +<h3 id="Autoplay_availability" name="Autoplay_availability">自動再生の可用性</h3> + +<p>一般的な規則として、次の条件の<em>少なくとも1つ</em>が当てはまる場合にのみ、メディアの自動再生が許可されると想定できます。</p> + +<ul> + <li>音声がミュートになっているか、音量が 0 に設定されている。</li> + <li>ユーザーがサイトを操作した（クリック、タップ、キーを押すなど）。</li> + <li>サイトがホワイトリストに登録されている場合。 これは、ユーザーがメディアと頻繁に関わっているとブラウザーが判断した場合は自動的に、または設定や他のユーザーインターフェイス機能を使用して手動で行われる場合があります。</li> + <li>自動再生機能ポリシーを使用して {{HTMLElement("iframe")}} とそのドキュメントに自動再生のサポートを付与する場合。</li> +</ul> + +<p>そうでないと、再生がブロックされる可能性があります。 ブロックされる正確な状況、およびサイトがホワイトリストに登録される方法の詳細はブラウザーによって異なりますが、上記のガイドラインを参考にしてください。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 別の言い方をすれば、音声が含まれているメディアの再生は、ユーザー操作がまだ行われていないタブでプログラム的に再生が開始されると、通常はブロックされます。 ブラウザーはさらに他の状況下でブロックすることを選択するかもしれません。</p> +</div> + +<h2 id="Autoplay_of_media_elements" name="Autoplay_of_media_elements">メディア要素の自動再生</h2> + +<p>自動再生とは何か、自動再生が許可されないようにすることができるかについて説明したので、次に、ウェブサイトまたはアプリがページの読み込み時に自動的にメディアを再生する方法、自動再生の失敗の検出方法、および自動再生がブラウザーによって拒否されたときの対処方法について説明します。</p> + +<h3 id="The_autoplay_attribute" name="The_autoplay_attribute">autoplay 属性</h3> + +<p>コンテンツを自動的に再生する最も簡単な方法は、{{HTMLElement("audio")}} 要素または {{HTMLElement("video")}} 要素に {{htmlattrxref("autoplay", "audio")}} 属性を追加することです。 これにより、要素の {{domxref("HTMLMediaElement.autoplay", "autoplay")}} プロパティが <code>true</code> に設定され、<code>autoplay</code> が <code>true</code> の場合、次のことが発生した後、メディアはできるだけ早く自動的に再生を開始します。</p> + +<ul> + <li>ページは自動再生機能を使用することを許可されている。</li> + <li>要素はページの読み込み中に作成された。</li> + <li>ネットワークのパフォーマンスや帯域幅に劇的な変化がないと仮定して、再生を開始し、中断することなくメディアの最後まで再生を続けるのに十分なメディアが受信されている。</li> +</ul> + +<h4 id="Example_The_autoplay_attribute" name="Example_The_autoplay_attribute">例: autoplay 属性</h4> + +<p><code>autoplay</code> 属性を使用する {{HTMLElement("audio")}} 要素は、次のようになります。</p> + +<pre class="brush: html"><audio id="musicplayer" autoplay> + <source src="/music/chapter1.mp4" +</audio> +</pre> + +<h4 id="Example_2_Detecting_autoplay_failure" name="Example_2_Detecting_autoplay_failure">例2: 自動再生の失敗を検出する</h4> + +<p>重要なことを自動再生に頼っている場合、または自動再生の失敗が何らかの形でアプリに影響を与える場合は、自動再生が開始されなかったことを知りたいと思うでしょう。 残念ながら、{{htmlattrxref("autoplay", "audio")}} 属性の場合、自動再生が正常に開始されたかどうかを認識するのは難しいです。 自動再生が失敗したときにトリガーされるイベントはありません。 また、設定可能な例外やコールバック、あるいは自動再生が機能したかどうかを示すフラグもメディア要素にありません。 本当にできることは、いくつかの値を調べて、自動再生が機能したかどうかについて山を張ることだけです。</p> + +<p>見方を変えることができるのであれば、メディアの再生がうまくいかなかったときではなく、メディアの再生がうまくいったことを知ることに頼ることをお勧めします。 メディア要素で {{event("play")}} イベントが発生するのをリスンすることで、これを簡単に行うことができます。</p> + +<p><code>play</code> イベントは、メディアが一時停止後に再開されたとき<em>と</em>自動再生が発生したときの両方に送信されます。 つまり、初めて <code>play</code> イベントが発生したときは、ページが開かれた後に初めてメディアの再生が開始されたことがわかります。</p> + +<p>次の HTML をメディア要素として考えます。</p> + +<pre class="brush: html"><video src="myvideo.mp4" autoplay onplay=handleFirstPlay(event)"></pre> + +<p>ここでは、{{domxref("HTMLMediaElement.onplay", "onplay")}} イベントハンドラが設定された、{{htmlattrxref("autoplay", "video")}} 属性が設定されている {{HTMLElement("video")}} 要素があります。 イベントは <code>handleFirstPlay()</code> と呼ばれる関数によって処理され、この関数は入力として <code>play</code> イベントを受け取ります。</p> + +<p><code>handleFirstPlay()</code> は次のようになります。</p> + +<pre class="brush: js">function handleFirstPlay(event) { + let vid = event.target; + + vid.onplay = null; + + // 再生が開始された後に行う必要があるものをすべて開始する。 +}</pre> + +<p>{{domxref("Event")}} オブジェクトの {{domxref("Event.target", "target")}} から動画要素への参照を取得した後、その要素の <code>onplay</code> ハンドラは <code>null</code> に設定されます。 これにより、今後の <code>play</code> イベントがハンドラに配信されなくなります。 これは、ドキュメントがバックグラウンドタブにあるときに、動画がユーザーによって一時停止および再開された場合、またはブラウザーによって自動的に行われる場合に発生する可能性があります。</p> + +<p>この時点で、あなたのサイトやアプリはそれがする必要があるものは何でも始めることができます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この方法では、自動再生とユーザーによる手動再生開始は区別されません。</p> +</div> + +<h3 id="The_play()_method" name="The_play()_method">play() メソッド</h3> + +<p>用語「自動再生」はまた、スクリプトが、ユーザ入力イベント処理のコンテキストの外側で、音声を含んだメディアの再生を開始しようと試みるシナリオを指します。 これは、メディア要素の {{domxref("HTMLMediaElement.play", "play()")}} メソッドを呼び出すことによって行われます。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 自動再生設定のサポートは、自動再生の他の手段よりも <code>autoplay</code> 属性の方が広く普及しているため、できるだけ <code>autoplay</code> 属性を使用することを強くお勧めします。 また、ブラウザーが再生開始の責任を負うようにして、再生のタイミングを最適化します。</p> +</div> + +<h4 id="Example_Playing_video" name="Example_Playing_video">例: 動画の再生</h4> + +<p>この簡単な例では、ドキュメント内の最初の {{HTMLElement("video")}} 要素を再生します。 ドキュメントに自動的にメディアを再生するパーミッションがない限り、<code>play()</code> は再生を開始させません。</p> + +<pre class="brush: js">document.querySelector("video").play();</pre> + +<h4 id="Example_Handling_play()_failures" name="Example_Handling_play()_failures">例: play() のエラー処理</h4> + +<p>{{domxref("HTMLMediaElement.play", "play()")}} メソッドを使用して開始すると、メディアの自動再生の失敗を検出するのがはるかに簡単になります。 <code>play()</code> は、メディアが正常に再生を開始すると解決され、自動再生が拒否された場合など、再生が開始しないと却下される {{jsxref("Promise")}} を返します。 自動再生が失敗した場合は、あなたはおそらくメディアを再生するためのパーミッションをユーザーが与えるようにブラウザーに手動で指示する方法をユーザーに提供したいと思うでしょう。</p> + +<p>あなたは仕事を達成するために、このようなコードを使うかもしれません。</p> + +<pre class="brush: js">let startPlayPromise = videoElem.play(); + +if (startPlayPromise !== undefined) { + startPlayPromise.catch(error => { + if (error.name === "NotAllowedError") { + showPlayButton(videoElem); + } else { + // 読み込みエラーまたは再生エラーを処理する。 + } + }).then(() => { + // 再生が開始された後にのみ行う必要があるものを開始する。 + }); +} +</pre> + +<p><code>play()</code> の結果に対して最初に行うことは、それが未定義（<code>undefined</code>）ではないことを確認することです。 これは、以前のバージョンの HTML 仕様では、<code>play()</code> が値を返さなかったためです。 操作の成功または失敗を判断できるようにという promise を返すことが最近追加されました。 未定義をチェックすることで、このコードが古いバージョンのウェブブラウザーでエラーにより失敗することを防ぎます。</p> + +<p>次に promise に {{jsxref("Promise.catch", "catch()")}} ハンドラを追加します。 これは、エラーの名前（{{domxref("DOMException.name", "name")}}）を調べて、<code>NotAllowedError</code> かどうかを確認します。 これは、自動再生が拒否されたなど、パーミッションの問題が原因で再生が失敗したことを示します。 その場合は、ユーザーが手動で再生を開始できるようにするためのユーザーインターフェイスを表示する必要があります。 これはここでは関数 <code>showPlayButton()</code> によって処理されます。</p> + +<p>その他のエラーは適切に処理されます。</p> + +<p><code>play()</code> によって返された promise がエラーなしで解決された場合、<code>then()</code> 句が実行され、自動再生が開始されたときに必要なことは何でも開始できます。</p> + +<h2 id="Autoplay_using_the_Web_Audio_API" name="Autoplay_using_the_Web_Audio_API">ウェブオーディオ APIを使用した自動再生</h2> + +<p><a href="/ja/docs/Web/API/Web_Audio_API">ウェブオーディオ API</a> では、ウェブサイトまたはアプリは、{{domxref("AudioContext")}} にリンクされているソースノードで <code>start()</code> メソッドを使用して音声の再生を開始できます。 ユーザ入力イベント処理のコンテキストの外側でそうすることは、自動再生規則の影響を受けます。</p> + +<p><em>より多くのコンテンツがすぐに来るでしょう。 自動再生のブロックは、Mozilla でもまだ開発中です。 他の人がすでにそれを持っているならば、彼らがこのセクションに参加することを歓迎します...</em></p> + +<h2 id="The_autoplay_feature_policy" name="The_autoplay_feature_policy">autoplay 機能ポリシー</h2> + +<p>上記のブラウザー側での自動再生機能の管理および制御に加えて、ウェブサーバーは自動再生が機能することを許可する意欲を表現することもできます。 {{Glossary("HTTP")}} の {{HTTPHeader("Feature-Policy")}} ヘッダーの <code><a href="/ja/docs/Web/HTTP/Headers/Feature-Policy/autoplay">autoplay</a></code> ディレクティブは、メディアの自動再生に使用できるドメインがあれば、それを制御するために使用されます。 デフォルトでは、<code>autoplay</code> 機能ポリシー（feature policy）は <code>'self'</code>（<em>一重引用符を含む</em>）に設定されています。 これは、ドキュメントと同じドメインでホストされているときに自動再生が許可されることを示します。</p> + +<p>また、<code>'none'</code> を指定して自動再生を完全に無効にしたり、<code>'*'</code> を指定してすべてのドメインからの自動再生を許可したり、メディアを自動的に再生できる1つ以上の特定のオリジンを指定できます。 これらのオリジンはスペース文字で区切ります。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 指定された機能ポリシーは、そのフレームとその中にネストされているすべてのフレームに新しい機能ポリシーを設定する {{htmlattrxref("allow", "iframe")}} が含まれていない限り、ドキュメントとその中にネストされているすべての {{HTMLElement("iframe")}} に適用されます。</p> +</div> + +<p><code><iframe></code> の {{htmlattrxref("allow", "iframe")}} 属性を使用してそのフレームとそのネストされたフレームの機能ポリシーを指定するときは、値 <code>'src'</code> を指定して、フレームの {{htmlattrxref("src", "iframe")}} 属性で指定されたものと同じドメインからのメディアの自動再生のみを許可できます。</p> + +<h3 id="Example_Allowing_autoplay_only_from_the_document's_domain" name="Example_Allowing_autoplay_only_from_the_document's_domain">例: ドキュメントのドメインからの自動再生のみを許可する</h3> + +<p>{{HTTPHeader("Feature-Policy")}} ヘッダーを使用して、ドキュメントの{{Glossary("origin","オリジン")}}からのメディアの自動再生のみを許可するには次のようにします。</p> + +<pre>Feature-Policy: autoplay 'self'</pre> + +<p>{{HTMLElement("iframe")}} に対して同じことを行うには次のようにします。</p> + +<pre class="brush: html"><iframe src="mediaplayer.html" + allow="autoplay 'src'"> +</iframe> +</pre> + +<h3 id="Example_Allowing_autoplay_and_fullscreen_mode" name="Example_Allowing_autoplay_and_fullscreen_mode">例: 自動再生と全画面モードの許可</h3> + +<p>前の例に<a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a>（Fullscreen API）のパーミッションを追加すると、ドメインに関係なく全画面のアクセスが許可されている場合、次のような <code>Feature-Policy</code> ヘッダーになります。 必要に応じてドメイン制限を追加できます。</p> + +<pre>Feature-Policy: autoplay 'self'; fullscreen</pre> + +<p><code><iframe></code> 要素の <code>allow</code> プロパティを使って同じパーミッションを設定すると、次のようになります。</p> + +<pre class="brush: html"><iframe src="mediaplayer.html" + allow="autoplay 'src'; fullscreen"> +</iframe> +</pre> + +<h3 id="Example_Allowing_autoplay_from_specific_sources" name="Example_Allowing_autoplay_from_specific_sources">例: 特定のソースからの自動再生を許可する</h3> + +<p>ドキュメント（または <code><iframe></code>）の独自ドメインと <code>https://example.media</code> の両方からメディアを再生できるようにする <code>Feature-Policy</code> ヘッダーは、次のようになります。</p> + +<pre>Feature-Policy: autoplay 'self' https://example.media</pre> + +<p>次のように {{HTMLElement("iframe")}} を記述して、この自動再生ポリシーをそれ自体に適用する必要があり、すべての子フレームをこのように記述することを指定することができます。</p> + +<pre class="brush: html"><iframe width="300" height="200" + src="mediaplayer.html" + allow="autoplay 'src' https://example.media"> +</iframe> +</pre> + +<h3 id="Example_Disabling_autoplay" name="Example_Disabling_autoplay">例: 自動再生を無効にする</h3> + +<p><code>autoplay</code> 機能ポリシーを <code>'none'</code> に設定すると、ドキュメントまたは <code><iframe></code> とすべてのネストされたフレームに対して自動再生が完全に無効になります。 HTTP ヘッダーは次のとおりです。</p> + +<pre>Feature-Policy: autoplay 'none'</pre> + +<p><code><iframe></code> の <code>allow</code> 属性を使う場合は、次のようになります。</p> + +<pre class="brush: html"><iframe src="mediaplayer.html" + allow="autoplay 'none'"> +</iframe> +</pre> + +<h2 id="Best_practices" name="Best_practices">ベストプラクティス</h2> + +<p>ここでは、自動再生を最大限に活用するためのヒントと推奨されるベストプラクティスを紹介します。</p> + +<h3 id="Handling_autoplay_failure_with_media_controls" name="Handling_autoplay_failure_with_media_controls">メディアコントロールを使用した自動再生失敗の処理</h3> + +<p>自動再生の一般的な使用例は、記事、広告、またはページの主な機能のプレビューに合わせてビデオクリップの再生を自動的に開始することです。 このような動画を自動再生するには、2つの選択肢があります。 音声トラックを使用しない、または音声トラックを使用しますが、デフォルトで音声をミュートするように {{HTMLElement("video")}} 要素を次のように設定する方法です。</p> + +<pre class="brush: html"><video src="/videos/awesomevid.webm" controls autoplay muted></pre> + +<p>この動画要素は、ユーザーコントロール（通常は再生/一時停止、動画のタイムラインのスクラブ、音量調整、およびミュート）を含むように構成されています。 また、{{htmlattrxref("muted", "video")}} 属性が含まれているため、動画は自動再生されますが、音声はミュートされています。 ただし、ユーザーはコントロールのミュート解除ボタンをクリックして音声を再度有効にすることができます。</p> + +<h2 id="Browser_configuration_options" name="Browser_configuration_options">ブラウザー設定オプション</h2> + +<p>ブラウザーには、自動再生が機能する方法や自動再生のブロックの処理方法を制御する設定があります。 ここでは、ウェブ開発者として特別な意味または重要性があるかもしれないそのような設定がリストされています。 これらには、テストやデバッグに役立つ可能性のあるものや、あなたが処理する準備を整える必要がある方法で設定できるものが含まれます。</p> + +<h3 id="Firefox" name="Firefox">Firefox</h3> + +<dl> + <dt><code>media.allowed-to-play.enabled</code></dt> + <dd>{{domxref("HTMLMediaElement.allowedToPlay")}} プロパティをウェブに公開するかどうかを指定するブール設定。 これは現在デフォルトでは <code>false</code> です（デフォルトで <code>true</code> になっているナイトリービルドを除く）。 これが <code>false</code> の場合、<code>allowedToPlay</code> プロパティは <code>HTMLMediaElement</code> インターフェイスにないため、{{HTMLElement("audio")}} 要素にも {{HTMLElement("video")}} 要素にも存在しません。</dd> + <dt><code>media.autoplay.allow-extension-background-pages</code></dt> + <dd>このブール値設定が <code>true</code> の場合、ブラウザー拡張機能のバックグラウンドスクリプトは音声メディアを自動再生できます。 この値を <code>false</code> に設定すると、この機能は無効になります。 デフォルト値は <code>true</code> です。</dd> + <dt><code>media.autoplay.allow-muted</code></dt> + <dd><code>true</code>（デフォルト）の場合、現在ミュートされている音声メディアを自動的に再生することを許可するブール設定。 これが <code>false</code> に変更された場合、音声トラックのあるメディアはミュートされていても再生が許可されません。</dd> + <dt><code>media.autoplay.block-webaudio</code></dt> + <dd><a href="/ja/docs/Web/API/Web_Audio_API">ウェブオーディオ API</a> に自動再生のブロックを適用するかどうかを示すブール設定。 デフォルトは <code>true</code> です。</dd> + <dt><code>media.autoplay.default</code></dt> + <dd>デフォルトで自動再生サポートのドメインごとの設定を許可する（<code>0</code>）、ブロックする（<code>1</code>）、使用時のプロンプト（<code>2</code>）のどちらにするかを指定する整数設定。 デフォルト値は <code>0</code> です。</dd> + <dt><code>media.autoplay.enabled.user-gestures-needed</code>（ナイトリービルドのみ）</dt> + <dd>ユーザーのジェスチャーの検出によって <code>media.autoplay.default</code> の設定をオーバーライドできるかどうかを制御するブール設定。 <code>media.autoplay.default</code> が <code>0</code>（デフォルトで自動再生が許可）に設定されて<em>いない</em>場合、この設定が <code>true</code> の場合、ページがユーザーのジェスチャーによってアクティブにされ、可聴でないメディアはまったく制限されていない場合に、音声トラック付きのメディアを自動再生できます。</dd> + <dt><code>media.block-autoplay-until-in-foreground</code></dt> + <dd>バックグラウンドタブで開始したときにメディアの再生がブロックされるかどうかを示すブール設定。 デフォルト値の <code>true</code> は、他の方法で利用できる場合でも、タブが前面に表示されるまで自動再生は実行されないことを意味します。 これは、タブが音を出し始めて、ユーザーがすべてのタブやウィンドウの中からそのタブを見つけることができないという煩わしい状況を防ぎます。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Media">ウェブメディア技術</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a>（学習ガイド）</li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API の使用</a></li> + <li><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">クロスブラウザーオーディオの基本</a></li> +</ul> diff --git a/files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.html b/files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.html new file mode 100644 index 0000000000..871d4ef8d2 --- /dev/null +++ b/files/ja/web/media/dash_adaptive_streaming_for_html_5_video/index.html @@ -0,0 +1,95 @@ +--- +title: HTML 5 ビデオ用の DASH アダプティブストリーミング +slug: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +translation_of: Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video +--- +<p><span class="seoSummary">Dynamic Adaptive Streaming over HTTP (DASH) は、アダプティブストリーミングプロトコルです。</span>これは動画の再生を維持するためにネットワークパフォーマンスに応じてビデオストリームのビットレートを切り替えることを可能にします。</p> + +<h2 id="Browser_Support" name="Browser_Support">ブラウザーの対応</h2> + +<p>Firefox 21 は HTML5 WebM のための DASH の実装を含んでいますが、既定では無効になっています。これは "about:config" の "media.dash.enabled" 設定によって有効にすることができます。</p> + +<p>Firefox 23 では HTML5 WebM のための DASH は削除されました。これは <a href="http://www.w3.org/TR/media-source/">Media Source Extensions API</a> の実装で置き換えられました。これは dash.js のような JavaScript ライブラリによる DASH のサポートを可能にするものです。詳しくはバグ <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=778617">778617</a> を見てください。</p> + +<h2 id="Using_DASH_-_Server_Side" name="Using_DASH_-_Server_Side">DASHの使い方 - サーバーサイド</h2> + +<p>まず、 WebM ビデオをさまざまなビットレートのビデオファイルとともに DASH マニフェストに変換する必要があります。 まず、 ffmpeg.org の ffpmeg プログラム、 libvpx と libvorbis の WebM ビデオとオーディオ、少なくともバージョン2.5 (おそらく、これは 3.2.5 でテスト済みです) を必要とします。</p> + +<h3 id="1._Use_your_existing_WebM_file_to_create_one_audio_file_and_multiple_video_files." name="1._Use_your_existing_WebM_file_to_create_one_audio_file_and_multiple_video_files.">1. すでに存在するWebMファイルを使って一つの音声と複数の動画ファイルを作成する。</h3> + +<p>たとえば:</p> + +<p><strong><em>in.video</em></strong> というファイルがffmpegでデコード可能な一つ以上の音声と一つ以上の動画ストリームを含むなんらかのコンテナーであるとすると、</p> + +<p>音声はこのように作ります:</p> + +<pre><code>ffmpeg -i in.video -vn -acodec libvorbis -ab 128k -dash 1 my_audio.webm</code> + +</pre> + +<p>それぞれのビデオはこのように作ります。</p> + +<pre><code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm + +ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm + +<code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm + +<code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm + +<code>ffmpeg -i in.video -c:v </code>libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm +</pre> + +<p>もしくは全てを一つのコマンドで一度に行います。</p> + +<pre>ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ +-g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ +-an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ +-an -vf scale=320:180 -b:v 500k -dash 1 video_320x180_500k.webm \ +-an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ +-an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ +-an -vf scale=1280:720 -b:v 1500k -dash 1 video_1280x720_1500k.webm</pre> + +<h3 id="2._Create_the_manifest_file" name="2._Create_the_manifest_file">2. マニフェストファイルを作成する:</h3> + +<pre><code>ffmpeg \ + </code>-f webm_dash_manifest -i video_160x90_250k.webm<code> \ + </code>-f webm_dash_manifest -i video_320x180_500k.webm<code> \ + </code>-f webm_dash_manifest -i video_640x360_750k.webm<code> \ + -f webm_dash_manifest -i video_1280x720_1500k.webm \ + </code>-f webm_dash_manifest -i <code>my_audio.webm \ + </code>-c copy \ + -map 0 -map 1 -map 2 -map 3<code> -map 4 \ + </code>-f webm_dash_manifest \ + -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ +<code> my_video_manifest.mpd</code> +</pre> + +<p>-map 引数は、指定された順序で入力ファイルに対応します。 ファイルごとに1つずつ作成する必要があります。 -adaptation_sets 引数は、それらをアダプテーションセットに割り当てます。 たとえば、ストリーム0,1,2および3（ビデオ）を含む1つのセット（0）、およびストリーム4（オーディオストリーム）のみを含む別のセット（1）が作成されます。</p> + +<p>マニフェストと関連する動画ファイルをウェブサーバーや CDN に置いてください。 DASH は HTTP 上で動作するので、 HTTP サーバーがバイトレンジリクエストをサポートしていて .mpd ファイルが mimetype="application/dash+xml" で配信するように設定されていれば、これで全て完了です。</p> + +<h2 id="Using_DASH_-_Client_Side" name="Using_DASH_-_Client_Side">DASHの使い方 - クライアントサイド</h2> + +<p>ビデオファイルの代わりに DASH マニフェストを参照するようにウェブページを修正します:</p> + +<pre class="brush: html"><video> + <source src="movie.<span class="ZmSearchResult" id="DWT648"><span class="ZmSearchResult" id="DWT650">mpd</span></span>"> + <source src="movie.webm"> + Your browser does not support the video tag. +</video></pre> + +<p>これだけです！ブラウザーで DASH がサポートされていれば、動画はアダプティブストリーミングで再生されます。</p> + +<h2 id="Links" name="Links">リンク</h2> + +<p><a href="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification" title="http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification">WebM DASH Specification at The WebM Project</a></p> + +<p><a href="http://dashif.org/" title="http://dashif.org/">DASH Industry Forum</a></p> + +<p><a href="http://wiki.webmproject.org/adaptive-streaming/instructions-to-playback-adaptive-webm-using-dash">WebM project description of how to create DASH files with FFMPEG</a></p> diff --git a/files/ja/web/media/formats/image_types/index.html b/files/ja/web/media/formats/image_types/index.html new file mode 100644 index 0000000000..4b32fcc327 --- /dev/null +++ b/files/ja/web/media/formats/image_types/index.html @@ -0,0 +1,1373 @@ +--- +title: 画像ファイルの種類と形式ガイド +slug: Web/Media/Formats/Image_types +tags: + - APNG + - BMP + - Bitmap + - Diagrams + - File + - File Types + - Filetype + - Graphics + - Guide + - ICO + - Icons + - Image + - Images + - JPEG + - JPG + - Media + - PNG + - Photos + - SVG + - WebP + - gif + - icon +translation_of: Web/Media/Formats/Image_types +--- +<div>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</div> + +<p><span class="seoSummary">このガイドでは、ウェブブラウザーが一般的に対応している画像ファイルの種類を取り上げ、サイトの画像に使用するための最も適切な形式を選択するのに役立つ観点を提供します。</span></p> + +<h2 id="Common_image_file_types" name="Common_image_file_types">一般的な画像ファイルの種類</h2> + +<p>ウェブ上で最も一般的に使用されている画像ファイル形式は以下の通りです。</p> + +<div id="table-of-image-file-types"> +<table class="standard-table"> + <thead> + <tr> + <th scope="row">略称</th> + <th scope="row">ファイル形式</th> + <th scope="col">MIME タイプ</th> + <th scope="col">ファイル拡張子</th> + <th scope="col">概要</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{anch("APNG")}}</th> + <th scope="row">Animated Portable Network Graphics</th> + <td><code>image/apng</code></td> + <td><code>.apng</code></td> + <td>劣化のない一連のアニメーションに最適 (GIF は性能が低い)。 {{anch("AVIF")}} や {{anch("WebP")}} はより性能が高いが、ブラウザーの対応が狭い。<br> + <strong>対応:</strong> Chrome, Edge, Firefox, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("AVIF")}}</th> + <th scope="row">AV1 Image File Format</th> + <td><code>image/avif</code></td> + <td><code>.avif</code></td> + <td> + <p>高性能でロイヤリティフリーの画像形式であるため、画像とアニメーションの両方に適している。 {{anch("PNG")}} や {{anch("JPEG")}} よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応している。 AVIF を使用する場合は、よりブラウザーの対応状況が良い形式への代替を含めるべきであることに注意してください (つまり、 {{HTMLElement("picture")}} 要素を使用する)。<br> + <strong>対応:</strong> Chrome, Opera, Firefox (設定で隠蔽)</p> + </td> + </tr> + <tr> + <th scope="row">{{anch("GIF")}}</th> + <th scope="row">Graphics Interchange Format</th> + <td><code>image/gif</code></td> + <td><code>.gif</code></td> + <td>単純な画像やアニメーションに適しています。 {{anch("PNG")}} の方が劣化なし<em>かつ</em>インデックスカラーの静止画に適しており、アニメーションシーケンスには {{anch("WebP")}}, {{anch("AVIF")}}, {{anch("APNG")}} を検討してください。<br> + <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("JPEG")}}</th> + <th scope="row">Joint Photographic Expert Group image</th> + <td><code>image/jpeg</code></td> + <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jfif</code>, <code>.pjpeg</code>, <code>.pjp</code></td> + <td> + <p>静止画の非可逆圧縮に適しています (現在最も普及しています)。 {{anch("PNG")}} の方がより正確な画像の再現が必要な場合に適しており、 {{anch("WebP")}}/{{anch("AVIF")}} の方がより良い再現性と高い圧縮率の両方が必要な場合に適しています。<br> + <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</p> + </td> + </tr> + <tr> + <th scope="row">{{anch("PNG")}}</th> + <th scope="row">Portable Network Graphics</th> + <td><code>image/png</code></td> + <td><code>.png</code></td> + <td> + <p>PNG は元画像をより正確に再現したい場合や、透明度が必要な場合には JPEG より好まれます。 {{anch("WebP")}}/{{anch("AVIF")}} はさらに優れた圧縮と再現性を提供しますが、ブラウザーの対応はより限定されています。<br> + <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</p> + </td> + </tr> + <tr> + <th scope="row">{{anch("SVG")}}</th> + <th scope="row">Scalable Vector Graphics</th> + <td><code>image/svg+xml</code></td> + <td><code>.svg</code></td> + <td>ベクター画像形式です。異なる大きさで正確に描画する必要があるユーザーインターフェース要素、アイコン、図などに最適です。<br> + <strong>対応:</strong> Chrome, Edge, Firefox, IE, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("WebP")}}</th> + <th scope="row">Web Picture format</th> + <td><code>image/webp</code></td> + <td><code>.webp</code></td> + <td>画像とアニメーションの両方に最適です。 WebP は {{anch("PNG")}} や {{anch("JPEG")}} よりもはるかに優れた圧縮を提供し、より高い色深度、アニメーションフレーム、透明度などに対応しています。 {{anch("AVIF")}} はわずかに優れた圧縮機能を提供していますが、ブラウザーがあまり対応しておらず、プログレッシブレンダリングにも対応していません。<br> + <strong>対応:</strong> Chrome, Edge, Firefox, Opera, Safari</td> + </tr> + </tbody> +</table> +</div> + +<div id="table-of-less-used-image-file-types"> +<div class="note"> +<p><strong>注:</strong> PNG、JPEG、GIF のような古い形式は、WebP や AVIF のような新しい形式と比較して性能が劣りますが、より広範囲の「歴史的な」ブラウザーが対応しています。新しい画像形式は、対応していないブラウザーが無視できるようになってきている (つまり、市場シェアがゼロに近づいてきている) ため、人気が高まってきています。</p> +</div> +</div> + +<p>以下のリストにはウェブ上で見られる画像形式を挙げていますが、ウェブコンテンツでは避けた方が良いものがあります (一般的には、ブラウザーの対応が広くないか、より良い代替手段があるためです)。</p> + +<div id="table-of-less-used-image-file-types"> +<table class="standard-table"> + <thead> + <tr> + <th scope="row">略称</th> + <th scope="row">ファイル形式</th> + <th scope="col">MIME タイプ</th> + <th scope="col">ファイル拡張子</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{anch("BMP")}}</th> + <th scope="row">Bitmap ファイル</th> + <td><code>image/bmp</code></td> + <td><code>.bmp</code></td> + <td>Chrome, Edge, Firefox, IE, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("ICO")}}</th> + <th scope="row">Microsoft Icon</th> + <td><code>image/x-icon</code></td> + <td><code>.ico</code>, <code>.cur</code></td> + <td>Chrome, Edge, Firefox, IE, Opera, Safari</td> + </tr> + <tr> + <th scope="row">{{anch("TIFF")}}</th> + <th scope="row">Tagged Image File Format</th> + <td><code>image/tiff</code></td> + <td><code>.tif</code>, <code>.tiff</code></td> + <td>Safari</td> + </tr> + </tbody> +</table> +</div> + +<div id="table-of-less-used-image-file-types"> +<div class="note"> +<p><strong>注:</strong> 各画像形式の略語は、形式、その機能、ブラウザーの互換性に関する詳細な情報 (どのバージョンで対応が導入されたか、後に導入された可能性のある特定の特殊機能を含む) についてのより詳しい説明へとリンクしています。</p> +</div> +</div> + +<h2 id="Image_file_type_details" name="Image_file_type_details">画像ファイルの種類の詳細</h2> + +<p>以下の節では、ウェブブラウザーで対応している画像ファイルの種類について簡単に説明します。</p> + +<p>以下の表において、<strong>成分あたりのビット数</strong>とは、各色成分を表現するために使用されるビット数を意味します。例えば、 RGB の色深度が 8 であれば、赤、緑、青の各成分は 8 ビットの値で表現されることになります。一方、<strong>ビット深度</strong>とは、メモリ上で各画素を表現するために使用されるビット数の合計です。</p> + +<h3 id="APNG_Animated_Portable_Network_Graphics"><a id="APNG" name="APNG">APNG</a> (Animated Portable Network Graphics)</h3> + +<p>APNG は Mozilla によって最初に導入されたファイル形式で、 {{anch("PNG")}}} 規格を拡張してアニメーション画像の対応を追加したものです。概念的には何十年も使われているアニメーション GIF 形式に似ていますが、アニメーション GIF が 8 ビットの{{interwiki("wikipedia", "色深度")}}しか対応していないのに対し、 APNG の方が様々な{{interwiki("wikipedia", "インデックスカラー")}}に対応しているという点で優れています。</p> + +<p>APNG は、進捗インジケーターやアクティビティ{{interwiki("wikipedia", "throbber", "スロバー")}}など、他のアクティビティやサウンドトラックに同期する必要のない基本的なアニメーションに最適です。例えば、 APNG は Apple の iMessage アプリ (および iOS のメッセージアプリ) の<a href="https://developer.apple.com/stickers/">アニメーションステッカーを作成する際に対応している形式の1つ</a>です。また、ウェブブラウザーのユーザーインターフェイスのアニメーション部分にもよく使用されています。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME タイプ</th> + <td><code>image/apng</code></td> + </tr> + <tr> + <th scope="row">ファイル拡張子</th> + <td><code>.apng</code></td> + </tr> + <tr> + <th scope="row">仕様書</th> + <td><a href="https://wiki.mozilla.org/APNG_Specification">wiki.mozilla.org/APNG_Specification</a></td> + </tr> + <tr> + <th scope="row">ブラウザーの互換性</th> + <td>Chrome 59, Edge 12, Firefox 3, Opera 46, Safari 8</td> + </tr> + <tr> + <th scope="row">最大の大きさ</th> + <td>2,147,483,647×2,147,483,647 ピクセル</td> + </tr> + <tr> + <th scope="row">対応している色モデル</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">グレイスケール</th> + <td>1, 2, 4, 8, 16</td> + <td>各ピクセルは、グレースケールピクセルの明るさを示す単一の <em>D</em> ビット値で構成されています。</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8, 16</td> + <td>各ピクセルは、赤、緑、青の色成分のレベルを示す3つの <em>D</em> ビット値で表現されます。</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td>1, 2, 4, 8</td> + <td>各ピクセルは、APNG ファイルの <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> チャンク内に含まれるカラーパレットへのインデックスを示す <em>D</em> ビット値で、パレット内の色はすべて 8 ビットの深度を使用します。</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td>8, 16</td> + <td>各ピクセルは、2つの <em>D</em> ビット値、グレイスケールピクセルの明るさとアルファサンプルで表現されます。</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td>8, 16</td> + <td>各ピクセルは、4つの <em>D</em> ピクセルの色成分、赤、緑、青、およびピクセルの不透明度を示すアルファサンプルで構成されます。</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>可逆</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td><a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike license</a> (<a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>) version 3.0 以降の下にフリーかつオープンです。</td> + </tr> + </tbody> +</table> + +<h3 id="AVIF_画像"><a id="AVIF" name="AVIF">AVIF 画像</a></h3> + +<p>AV1 Image File Format (AVIF) is a powerful new, open source, royalty-free file format that encodes <dfn>AV1 bitstreams in the High Efficiency Image File Format (HEIF) container. </dfn></p> + +<div class="note"> +<p><strong>Note:</strong> AVIF has potential to become the "next big thing" for sharing images in web content. It offers state-of-the-art features and performance, without the encumbrance of complicated licensing and patent royalties that have hampered comparable alternatives.</p> +</div> + +<p><dfn>AV1 is a coding format that was originally designed for video transmission over the Internet. The format benefits from the signficant advances in video encoding in recent years, and may potentially benefit from the associated support for hardware rendering. However it also has disadvantages for some cases, as video and image encoding have some different requirements.</dfn></p> + +<p>The format offers:</p> + +<ul> + <li>Excellent lossy compression compared to JPG and PNG for visually similar compression levels (e.g. lossy AVIF images are around 50% smaller than JPEG images).</li> + <li>Generally AVIF has better compression than WebP — median 50% vs 30% compression for the same JPG set (source: <a href="https://www.ctrl.blog/entry/webp-avif-comparison.html">AVIF WebP Comparision</a> (CTRL Blog)).</li> + <li>Lossless compression.</li> + <li>Animation/multi-image storage (similar to animated GIFs, but with much better compression)</li> + <li>Alpha channel support (i.e. for transparency).</li> + <li><em>High Dynamic Range</em> (HDR): support for storing images that can represent bigger contrasts between the lightest and darkest parts of the image.</li> + <li>Wide Color Gamut: Support for images that can contain a larger range of colours.</li> +</ul> + +<p>AVIF does not support progressive rendering, so files must be fully downloaded before they can be displayed. This often has little impact on real-world user experience because AVIF files are much smaller than the equivalent JPEG or PNG files, and hence can be downloaded and displayed much faster. For larger file size the impact can become significant, and you should consider using a format that supports progressive rendering.</p> + +<p>AVIF is supported on desktop in Chrome 85, Opera 71 and Firefox 77 (requires the feature flag <code>image.avif.enable</code> set <code>true</code>). As support is not yet comprehensive (and has no historical depth) you should provide a fallback in either {{anch("JPEG")}} or {{anch("PNG")}} format using the {{HTMLElement("picture")}} element (or some other approach).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td>Firefox and Chrome use <code>image/avif</code> for both still images and sequences. Type not yet <a href="https://www.iana.org/assignments/media-types/media-types.xhtml#image">registered</a>. as of November 2020.</td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.avif</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td> + <p><a href="https://aomediacodec.github.io/av1-avif/">AV1 Image File Format (AVIF)</a></p> + </td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td>Chrome 85, Opera 71, and Firefox 77 (requires the preference <code>image.avif.enable</code> set <code>true</code>).</td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>2,147,483,647×2,147,483,647 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <p>Color mode support information is provided in the <a href="https://aomediacodec.github.io/av1-spec/av1-spec.pdf">AV1 Bitstream & Decoding Process Specification</a>, section 6.4.2 : Color config semantics.</p> + + <p>A non-exhaustive summary is:</p> + + <ul> + <li>Color modes: YUV444, YUV422, YUV420</li> + <li>Greyscale support: YUV400</li> + <li>Bits: 8/10/12 bit</li> + <li>Alpha support</li> + <li>ICC profile support</li> + <li>NCLX support: sRGB, linear sRGB, linear Rec2020, PQ Rec2020, HLG Rec2020, PQ P3, HLG P3, etc.</li> + <li>Tiling support</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>Lossy and lossless.</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>Royalty free. Licensing information is available at http://aomedia.org/license/ .</td> + </tr> + </tbody> +</table> + +<h3 id="BMP_Bitmap_file"><a id="BMP" name="BMP"><br> + BMP</a> (Bitmap file)</h3> + +<p>The <strong>BMP</strong> (<strong>Bitmap image</strong>) file type is most prevalent on Windows computers, and is generally used only for special cases in web apps and content.</p> + +<div class="blockIndicator warning"> +<p><strong>Note:</strong> You should typically avoid using BMP files for web site content. The most common form of BMP file represents the data as an uncompressed raster image, resulting in large file sizes compared to png or jpg image tpes. More efficient BMP formats exist but are not widely used, and rarely supported in web browsers.</p> +</div> + +<p>BMP theoretically supports a variety of internal data representations. The simplest, and most commonly used, form of BMP file is an uncompressed raster image, with each pixel occupying 3 bytes representing its red, green, and blue components, and each row padded with <code>0x00</code> bytes to a multiple of 4 bytes wide.</p> + +<p>While other data representations are defined in the specification, they are not widely used and often completely unimplemented. These features include: support for different bit depths, indexed color, alpha channels, and different pixel orders (by default, BMP is written from bottom-left corner toward the right and top, rather than from the top-left corner toward the right and bottom).</p> + +<p>Theoretically, several compression algorithms are supported, and the image data can also be stored in {{anch("JPEG")}} or {{anch("PNG")}} format within the BMP file.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/bmp</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.bmp</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td>No specification; however, Microsoft provides general documentation of the format at <a href="https://docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage">docs.microsoft.com/en-us/windows/desktop/gdi/bitmap-storage</a></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>Either 32,767×32,767 or 2,147,483,647×2,147,483,647 pixels, depending on the format version</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">グレイスケール</th> + <td>1</td> + <td>Each bit represents a single pixel, which can be either black or white.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8, 16</td> + <td>Each pixel is represented by three values representing the red, green, and blue color components; each is <em>D</em> bits.</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td>2, 4, and 8</td> + <td>Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table.</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td><em>n/a</em></td> + <td>BMP has no distinct grayscale format.</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td>8, 16</td> + <td>Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is <em>D</em> bits.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>Several compression methods are supported, including lossy or lossless algorithms</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>Covered by the <a href="https://docs.microsoft.com/en-us/openspecs/dev_center/ms-devcentlp/1c24c7c8-28b0-4ce1-a47d-95fe1ff504bc">Microsoft Open Specification Promise</a>; while Microsoft holds patents against BMP, they have published a promise not to assert its patent rights as long as specific conditions are met. This is not the same as a license, however. BMP is included under the Windows Metafile Format (<code>.wmf</code>).</td> + </tr> + </tbody> +</table> + +<h3 id="GIF_Graphics_Interchange_Format"><a id="GIF" name="GIF">GIF</a> (Graphics Interchange Format)</h3> + +<p>In 1987, the CompuServe online service provider introduced the <strong>{{interwiki("wikipedia", "GIF")}}</strong> (<strong>Graphics Interchange Format</strong>) image file format to provide a compressed graphics format that all members of their service would be able to use. GIF uses the {{interwiki("wikipedia", "Lempel-Ziv-Welch")}} (LZW) algorithm to losslessly compress 8-bit indexed color graphics. GIF was one of the first two graphics formats supported by {{Glossary("HTML")}}, along with {{anch("XBM")}}.</p> + +<p>Each pixel in a GIF is represented by a single 8-bit value serving as an index into a palette of 24-bit colors (8 bits each of red, green, and blue). The length of a color table is always a power of 2 (that is, each palette has 2, 4, 8, 16, 32, 64, or 256 entries). To simulate more than 255 or 256 colors, {{interwiki("wikipedia", "dithering")}} is generally used. It is <a href="https://gif.ski/">technically possible</a> to tile multiple image blocks, each with its own color palette, to create truecolor images, but in practice this is rarely done.</p> + +<p>Pixels are opaque, unless a specific color index is designated as transparent, in which case pixels colored that value are entirely transparent.</p> + +<p>GIF supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided.</p> + +<p>GIF has been extremely popular for decades, due to its simplicity and compatibility. Its animation support caused a resurgence in its popularity in the social media era, when animated GIFs began to be widely used for short "videos", memes, and other simple animation sequences.</p> + +<p>Another popular feature of GIF is support for {{interwiki("wikipedia", "Interlacing_(bitmaps)", "interlacing")}}, where rows of pixels are stored out of order so that partially-received files can be displayed in lower quality. This is particularly useful when network connections are slow.</p> + +<p>GIF is a good choice for simple images and animations, although converting full color images to GIF can result in unsatisfactory dithering. Typically, modern content should use {{anch("PNG")}} for lossless <em>and</em> indexed still images, and should consider using {{anch("APNG")}} for lossless animation sequences.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/gif</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.gif</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.w3.org/Graphics/GIF/spec-gif87.txt">GIF87a specification</a><br> + <a href="https://www.w3.org/Graphics/GIF/spec-gif89a.txt">GIF89a specification</a></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>65,536×65,536 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">グレイスケール</th> + <td><em>n/a</em></td> + <td>GIF does not include a dedicated greyscale format.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td><em>n/a</em></td> + <td>GIF does not support true color pixels.</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td>8</td> + <td>Each color in a GIF palette is defined as 8 bits each of red, green, and blue (24 total bits per pixel).</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td><em>n/a</em></td> + <td>GIF does not provide a dedicated greyscale format.</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td><em>n/a</em></td> + <td>GIF does not support true color pixels.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>可逆 (LZW)</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>While the GIF format itself is open, the LZW compression algorithm was covered by patents until the early 2000s. As of July 7, 2004, all relevant patents have expired and the GIF format may be used freely</td> + </tr> + </tbody> +</table> + +<h3 id="ICO_Microsoft_Windows_icon"><a id="ICO" name="ICO">ICO</a> (Microsoft Windows icon)</h3> + +<p>The ICO (Microsoft Windows icon) file format was designed by Microsoft for desktop icons of Windows systems. However, early versions of Internet Explorer introduced the ability for a web site to provide a ICO file named <code>favicon.ico</code> in a web site's root directory to specify a <strong><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_custom_icons_to_your_site">favicon</a></strong> — an icon to be displayed in the Favorites menu, and other places where an iconic representation of the site would be useful.</p> + +<p>An ICO file can contain multiple icons, and begins with a directory listing details about each. Following the directory comes the data for the icons. Each icon's data can be either a {{anch("BMP")}} image without the file header, or a complete {{anch("PNG")}} image (including the file header). If you use ICO files, you should use the BMP format, as support for PNG inside ICO files wasn't added until Windows Vista and may not be well supported.</p> + +<div class="blockIndicator warning"> +<p>ICO files <em>should not</em> be used in web content. Additionally, their use for favicons has subsided in favor of using a PNG file and the {{HTMLElement("link")}} element, as described in {{SectionOnPage("/ja/docs/Web/HTML/Element/link", "Providing icons for different usage contexts")}}.</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/vnd.microsoft.icon</code> (official), <code>image/x-icon</code> (used by Microsoft)</td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.ico</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>256×256 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <caption>Icons in BMP format</caption> + <tbody> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">グレイスケール</th> + <td>1</td> + <td>Each bit represents a single pixel, which can be either black or white.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8, 16</td> + <td>Each pixel is represented by three values representing the red, green, and blue color components; each is <em>D</em> bits.</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td>2, 4, and 8</td> + <td>Each pixel is represented by a value which is one 2, 4, or 8 bits, serving as an index into the color table.</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td><em>n/a</em></td> + <td>BMP has no distinct grayscale format.</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td>8, 16</td> + <td>Each pixel is represented by four values representing the red, green, blue, and alpha color components; each is <em>D</em> bits.</td> + </tr> + </tbody> + </table> + + <table class="standard-table"> + <caption>Icons in PNG format</caption> + <tbody> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">グレイスケール</th> + <td>1, 2, 4, 8, 16</td> + <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8, 16</td> + <td>Each pixel is represented by three <em>D</em>-bit values indicating the level of the red, green, and blue color components.</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td>1, 2, 4, 8</td> + <td>Each pixel is a <em>D</em>-bit value indicating an index into a color palette which is contained within a <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> chunk in the APNG file; the colors in the palette all use an 8-bit depth.</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td>8, 16</td> + <td>Each pixel is represented by two <em>D</em>-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td>8, 16</td> + <td>Each pixel is comprised of four <em>D</em>-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>BMP-format icons nearly always use lossless compression, but lossy methods are available. PNG icons are always compressed losslessly.</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>—</td> + </tr> + </tbody> +</table> + +<h3 id="JPEG_Joint_Photographic_Experts_Group_image"><a id="JPEG" name="JPEG">JPEG</a> (Joint Photographic Experts Group image)</h3> + +<p>The {{Glossary("JPEG")}} (typically pronounced "<strong>jay-peg</strong>") image format is currently the most widely used lossy compression format for still images. It's particulary useful for photographs; applying lossy compression to content requiring sharpness, like diagrams or charts, can produce unsatisfactory results.</p> + +<p>JPEG is actually a data format for compressed photos, rather than a file type. The JFIF (<strong>J</strong>PEG <strong>F</strong>ile <strong>I</strong>nterchange <strong>F</strong>ormat) specification describes the format of the files we think of as "JPEG" images.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/jpeg</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.jpg</code>, <code>.jpeg</code>, <code>.jpe</code>, <code>.jif</code>, <code>.jfif</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://jpeg.org/jpeg/">jpeg.org/jpeg/</a></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td>All versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari</td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>65,535×65,535 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">グレイスケール</th> + <td><em>n/a</em></td> + <td>JPEG has no distinct greyscale mode.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8</td> + <td>Each pixel is described by the red, blue, and green color components, each of which is 8 bits.</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td><em>n/a</em></td> + <td>JPEG does not offer an indexed color mode.</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td><em>n/a</em></td> + <td>JPEG does not support an alpha channel.</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td><em>n/a</em></td> + <td>JPEG does not support an alpha channel.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>Lossy; based on the {{interwiki("wikipedia", "discrete cosine transform")}}</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>As of October 27, 2006, all United States patents have expired.</td> + </tr> + </tbody> +</table> + +<h3 id="PNG_Portable_Network_Graphics"><a id="PNG" name="PNG">PNG</a> (Portable Network Graphics)</h3> + +<p>The {{Glossary("PNG")}} (pronounced "<strong>ping</strong>") image format uses lossless or lossy compression to provide more efficient compression, and supports higher color depths than {{anch("GIF")}}, as well as full alpha transparency support.</p> + +<p>PNG is widely supported, with all major browsers offering full support for its features. Internet Explorer, which introduced PNG support in versions 4–5, did not fully support it until IE 9, and had many infamous bugs for many of the intervening years, including in the once-omnipresent Internet Explorer 6. This slowed PNG adoption, but it is now commonly used, especially when precise reproduction of the source image is needed.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/png</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.png</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.w3.org/TR/PNG">w3.org/TR/PNG</a></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Basic support</th> + <td>1</td> + <td>12</td> + <td>1</td> + <td>5</td> + <td>3.5.1 (Presto)<br> + 15 (Blink)</td> + <td>1</td> + </tr> + <tr> + <th scope="row">Alpha channel</th> + <td>1</td> + <td>12</td> + <td>1</td> + <td>5</td> + <td>6 (Presto)<br> + All (Blink)</td> + <td>1</td> + </tr> + <tr> + <th scope="row">Gamma correction</th> + <td>no</td> + <td>yes</td> + <td>1</td> + <td>8</td> + <td>1</td> + <td>broken</td> + </tr> + <tr> + <th scope="row">Color correction</th> + <td>no</td> + <td>yes</td> + <td>3</td> + <td>9</td> + <td>no</td> + <td>no</td> + </tr> + <tr> + <th scope="row">Interlacing</th> + <td>no</td> + <td>?</td> + <td>1</td> + <td>broken</td> + <td>3.5.1</td> + <td>no</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>2,147,483,647×2,147,483,647 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Color mode</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">グレイスケール</th> + <td>1, 2, 4, 8, 16</td> + <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8, 16</td> + <td>Each pixel is represented by three <em>D</em>-bit values indicating the level of the red, green, and blue color components.</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td>1, 2, 4, 8</td> + <td>Each pixel is a <em>D</em>-bit value indicating an index into a color palette which is contained within a <code><a href="https://www.w3.org/TR/PNG/#11PLTE">PLTE</a></code> chunk in the APNG file; the colors in the palette all use an 8-bit depth.</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td>8, 16</td> + <td>Each pixel is represented by two <em>D</em>-bit values: the intensity of the greyscale pixel and an alpha sample, indicating how opaque the pixel is.</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td>8, 16</td> + <td>Each pixel is comprised of four <em>D</em>-pixel color components: red, green, blue, and the alpha sample indicating how opaque the pixel is.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>Lossless, optionally indexed color like GIF</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>©2003 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. No known royalty-bearing patents.</td> + </tr> + </tbody> +</table> + +<h3 id="SVG_Scalable_Vector_Graphics"><a id="SVG" name="SVG">SVG</a> (Scalable Vector Graphics)</h3> + +<p>SVG is an <a href="/ja/docs/Glossary/XML">XML</a>-based {{interwiki("wikipedia", "vector graphics")}} format that specifies the contents of an image as a set of drawing commands that create shapes, lines, apply colors, filters, and so forth. SVG files are ideal for diagrams, icons, and other images which can be accurately drawn at any size. As such, SVG is popular for user interface elements in modern Web design.</p> + +<p>SVG files are text files containing source code that, when interpreted, draws the desired image. For instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box:</p> + +<pre class="brush: html notranslate"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> +</svg></pre> + +<p>SVG can be used in web content in two ways:</p> + +<ol> + <li>You can directly write the {{HTMLElement("svg")}} element within the HTML, containing <a href="/ja/docs/Web/SVG/Element">SVG elements</a> to draw the image.</li> + <li>You can display an SVG image anywhere you can use any of the other image types, including with the {{HTMLElement("img")}} and {{HTMLElement("picture")}} elements, the {{cssxref("background-image")}} CSS property, and so forth.</li> +</ol> + +<p>SVG is an ideal choice for images which can be represented using a series of drawing commands, especially if the size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size. It's not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/svg+xml</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.svg</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.w3.org/TR/SVG2">w3.org/TR/SVG2</a></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">SVG support</th> + <td>4</td> + <td>12</td> + <td>3</td> + <td>9</td> + <td>10 (Presto)<br> + 15 (Blink)</td> + <td>3.2</td> + </tr> + <tr> + <th scope="row">SVG as image ({{HTMLElement("img")}} etc)</th> + <td>28</td> + <td>12</td> + <td>4</td> + <td>9</td> + <td>10 (Presto)<br> + 15 (Blink)</td> + <td>9</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>Unlimited</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>Colors in SVG are specified using <a href="/ja/docs/Web/CSS/color_value">CSS color syntax</a>.</td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>SVG source may be compressed during transit using <a href="/ja/docs/Web/HTTP/Compression">HTTP compression</a> techniques, or on disk as an <code>.svgz</code> file.</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>©2018 <a href="https://www.w3.org/">W3C</a><sup>®</sup> (<a href="http://www.lcs.mit.edu/">MIT</a>, <a href="http://www.ercim.org/">ERCIM</a>, <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>, <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> and <a href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a> rules apply. No known royalty-bearing patents.</td> + </tr> + </tbody> +</table> + +<h3 id="TIFF_Tagged_Image_File_Format"><a id="TIFF" name="TIFF">TIFF</a> (Tagged Image File Format)</h3> + +<p>{{interwiki("wikipedia", "TIFF")}} is a raster graphics file format which was created to store scanned photos, although it can be any kind of image. It is a somewhat "heavy" format, in that TIFF files have a tendency to be larger than images in other formats. This is because of the metadata often included, as well as the fact that most TIFF images are either uncompressed or use compression algorithms that still leave fairly large files after compression.</p> + +<p>TIFF supports a variety of compression methods, but the most commonly used are the CCITT Group 4 (and, for older fax systems, Group 3) compression systems used for by fax software, as well as LZW and lossy JPEG compression.</p> + +<p>Every value in a TIFF file is specified using its <strong>tag</strong> (indicating what kind of information it is, such as the width of the image) and its <strong>type</strong> (indicating the format the data is stored in), followed by the length of the array of values to assign to that tag (all properties are stored in arrays, even for single values). This allows different data types to be used for the same properties. For example, the width of an image, <code>ImageWidth</code>, is stored using tag <code>0x0100</code>, and is a one-entry array. By specifying type 3 (<code>SHORT</code>), the value of <code>ImageWidth</code> is stored as a 16-bit value:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Type</th> + <th scope="col">Size</th> + <th scope="col">Value</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>0x0100</code><br> + (<code>ImageWidth</code>)</td> + <td><code>0x0003</code><br> + (<code>SHORT</code>)</td> + <td><code>0x00000001</code><br> + (1 entry)</td> + <td><code>0x0280</code><br> + (640 pixels)</td> + </tr> + </tbody> +</table> + +<p>Specifying type 4 (<code>LONG</code>) stores the width as a 32-bit value:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tag</th> + <th scope="col">Type</th> + <th scope="col">Size</th> + <th scope="col">Value</th> + </tr> + <tr> + <td><code>0x0100</code><br> + (<code>ImageWidth</code>)</td> + <td><code>0x0004</code><br> + (<code>LONG</code>)</td> + <td><code>0x00000001</code><br> + (1 entry)</td> + <td><code>0x00000280</code><br> + (640 pixels)</td> + </tr> + </thead> +</table> + +<p>A single TIFF file can contain multiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or a received fax). However, software reading TIFF files is only required to support the first image.</p> + +<p>TIFF supports a variety of color spaces, not just RGB. These include CMYK, YCbCr, and others, making TIFF a good choice for storing images intended for print, film, or television media.</p> + +<p>Long ago, some browsers supported TIFF images in web content; today, however, you need to use special libraries or browser add-ons to do so. As such, TIFF files are not useful within the context of web content, <em>but </em>it's common to provide downloadable TIFF files when distributing photos and other artwork intended for precision editing or printing.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/tiff</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.tif</code>, <code>.tiff</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td><a href="https://www.adobe.io/open/standards/TIFF.html">adobe.io/open/standards/TIFF.html</a></td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td>No browsers integrate support for TIFF; its value is as a download format</td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>4,294,967,295×4,294,967,295 pixels (theoretical)</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数 (<em>D</em>)</th> + <th scope="col">説明</th> + </tr> + <tr> + <th scope="row">Bilevel</th> + <td>1</td> + <td>A bilevel TIFF stores 8 bits in each byte, one bit per pixel. The <code>PhotometricInterpretation</code> field specifies which of 0 and 1 are black and which is white.</td> + </tr> + <tr> + <th scope="row">グレイスケール</th> + <td>4 and 8</td> + <td>Each pixel consists of a single <em>D</em>-bit value indicating the brightness of the greyscale pixel.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td>8</td> + <td>All true color RGB images are stored using 8-bits each of red, green, and blue.</td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td>4 and 8</td> + <td>Each pixel is an index into a <code>ColorMap</code> record, which defines the colors used in the image. The color map lists all of the red values, then all of the green values, then all of the blue values (rather than <code>rgb, rgb, rgb...</code>).</td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td>4 and 8</td> + <td>Alpha information is added by specifying that there are more than 3 samples per pixel in the <code>SamplesPerPixel</code> field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software.</td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td>8</td> + <td>Alpha information is added by specifying that there are more than 3 samples per pixel in the <code>SamplesPerPixel</code> field, and indicating the type of alpha (1 for an associated, pre-multiplied alpha component, and 2 for unassociated alpha (a separate matte); however, alpha channels are rarely used in TIFF files and may be unsupported by the user's software.</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>Most TIFF files are uncompressed, but lossless PackBits and LZW compression are supported, as is lossy JPEG compression.</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>No license required (aside from any associated with libraries you might use); all known patents have expired.</td> + </tr> + </tbody> +</table> + +<h3 id="WebP_image"><a id="WebP" name="WebP">WebP image</a></h3> + +<p>WebP supports lossy compression via predictive coding based on the VP8 video codec, and lossless compression that uses substitutions for repeating data. Lossy WebP images average 25–35% smaller than JPEG images of visually similar compression levels. Lossless WebP images are typically 26% smaller than the same images in PNG format.</p> + +<p>WebP also supports animation: in a lossy WebP file, the image data is represented by a VP8 bitstream, which may contain multiple frames. Lossless WebP holds the <code>ANIM</code> chunk, which describes the animation, and the <code>ANMF</code> chunk, which represents a frame of an animation sequence. Looping is supported.</p> + +<p>WebP now has broad support in the latest versions of major web browsers, although it does not have deep historical support. Provide a fallback in either {{anch("JPEG")}} or {{anch("PNG")}} format, such as with the {{HTMLElement("picture")}} element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/webp</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.webp</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td> + <p><a href="https://developers.google.com/speed/webp/docs/riff_container">RIFF Container Specification</a><br> + {{RFC(6386, "VP8 Data Format and Decoding Guide")}} (lossy encoding)<br> + <a href="https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification">WebP Lossless Bitstream Specification</a></p> + </td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td> + <table class="standard-table"> + <tbody> + <tr> + <th scope="row">Feature</th> + <th scope="col">Chrome</th> + <th scope="col">Edge</th> + <th scope="col">Firefox</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <th scope="row">Lossy WebP support</th> + <td>17</td> + <td>18</td> + <td>65</td> + <td>no</td> + <td>11.10 (Presto)<br> + 15 (Blink)</td> + <td>14</td> + </tr> + <tr> + <th scope="row">Lossless WebP</th> + <td>23<br> + 25 on Android</td> + <td>18</td> + <td>65</td> + <td>no</td> + <td>12.10 (Presto)<br> + 15 (Blink)</td> + <td>14</td> + </tr> + <tr> + <th scope="row">Animation</th> + <td>32</td> + <td>18</td> + <td>65</td> + <td>no</td> + <td>19 (Blink)</td> + <td>14</td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>16,383×16,383 pixels</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td>Lossy WebP stores the image in 8-bit Y'CbCr 4:2:0 (YUV420) format. Lossless WebP uses 8-bit ARGB color, with each component taking 8 bits for a total of 32 bits per pixel.</td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>Lossless (Huffman, LZ77, or color cache codes) or lossy (VP8).</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>No license required; source code is openly available.</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Despite having <a href="https://developer.apple.com/videos/play/wwdc2020/10663/?time=1174">announced support</a> for WebP in Safari 14, as of version 14.0 .webp images do not display natively on a macOS desktop, whereas Safari on iOS 14 does display .webp images properly.</p> +</div> + +<h3 id="XBM_X_Window_System_Bitmap_file"><a id="XBM" name="XBM">XBM</a> (X Window System Bitmap file)</h3> + +<p>XBM (X Bitmap) files were the first to be supported on the Web, but are no longer used and should be avoided, as their format has potential security concerns. Modern browsers have not supported XBM files in many years, but when dealing with older content, you may find some still around.</p> + +<p>XBM uses a snippet of C code to represent the contents of the image as an array of bytes. Each image consists of 2 to 4 <code>#define</code> directives, providing the width and height of the bitmap (and optionally the hotspot, if the image is designed as a cursor), followed by an array of <code>unsigned char</code>, where each value contains 8 1-bit monochrome pixels.</p> + +<p>The image must be a multiple of 8 pixels wide. For example, the following code represents an XBM image which is 8 pixels by 8 pixels, with those pixels in a black-and-white checkerboard pattern:</p> + +<pre class="brush: cpp notranslate">#define square8_width 8 +#define square8_height 8 +static unsigned char square8_bits[] = { + 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55, 0xAA, 0x55 +}; +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">MIME type</th> + <td><code>image/xbm</code>, <code>image-xbitmap</code></td> + </tr> + <tr> + <th scope="row">File extension(s)</th> + <td><code>.xbm</code></td> + </tr> + <tr> + <th scope="row">Specification</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Browser compatibility</th> + <td>Firefox 1–3.5, Internet Explorer 1–5</td> + </tr> + <tr> + <th scope="row">Maximum dimensions</th> + <td>Unlimited</td> + </tr> + <tr> + <th scope="row">Supported color modes</th> + <td> + <table class="standard-table"> + <thead> + <tr> + <th scope="row">色モード</th> + <th scope="col">成分あたりのビット数</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">グレイスケール</th> + <td>1</td> + <td>Each byte contains eight 1-bit pixels.</td> + </tr> + <tr> + <th scope="row">True color</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + <tr> + <th scope="row">インデックスカラー</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + <tr> + <th scope="row">アルファ付きグレイスケール</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + <tr> + <th scope="row">アルファ付きトゥルーカラー</th> + <td><em>n/a</em></td> + <td><em>n/a</em></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">圧縮</th> + <td>Lossless</td> + </tr> + <tr> + <th scope="row">ライセンス</th> + <td>Open source</td> + </tr> + </tbody> +</table> + +<h2 id="Choosing_an_image_format">Choosing an image format</h2> + +<p>Picking the best image format for your needs is likely easier than video formats, as there are fewer options with broad support, and each tends to have a specific set of use-cases.</p> + +<h3 id="Photographs">Photographs</h3> + +<p>Photographs typically fare well with lossy compression (depending on the encoder's configuration). This makes {{anch("JPEG")}} and {{anch("WebP")}} good choices for photographs, with JPEG being more compatible but WebP perhaps offering better compression. To maximize quality and minimize download time, consider providing both {{anch("Providing image fallbacks", "using a fallback")}} with WebP as the first choice and JPEG as the second. Otherwise, JPEG is the safe choice for compatibility.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + </thead> + <tbody> + <tr> + <td>WebP or JPEG</td> + <td>JPEG</td> + </tr> + </tbody> +</table> + +<h3 id="Icons">Icons</h3> + +<p>For smaller images such as icons, use a lossless format to avoid loss of detail in a size-constrained image. While lossless WebP is ideal for this purpose, support is not widespread yet, so PNG is a better choice unless you offer a {{anch("Providing image fallbacks", "fallback")}}. If your image contains fewer than 256 colors, GIF is an option, although PNG often compresses even smaller with its indexed compression option (PNG-8).</p> + +<p>If the icon can be represented using vector graphics, consider {{anch("SVG")}}, since it scales across various resolutions and sizes, so it's perfect for responsive design. Although SVG support is good, it may be worth offering a PNG fallback for older browsers.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + <tr> + <td>SVG, Lossless WebP, or PNG</td> + <td>PNG</td> + </tr> + </thead> +</table> + +<h3 id="Screenshots">Screenshots</h3> + +<p>Unless you're willing to compromise on quality, you should use a lossless format for screenshots. This is particularly important if there's any text in your screenshot, as text easily becomes fuzzy and unclear under lossy compression.</p> + +<p>PNG is probably your best bet, but lossless WebP is arguably going to be better compressed.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + <tr> + <td>Lossless WebP or PNG;<br> + JPEG if compression artifacts aren't a concern</td> + <td>PNG or JPEG;<br> + GIF for screenshots with low color counts</td> + </tr> + </thead> +</table> + +<h3 id="Diagrams_drawings_and_charts">Diagrams, drawings, and charts</h3> + +<p>For any image that can be represented using vector graphics, SVG is the best choice. Otherwise, you should use a lossless format like PNG. If you do choose a lossy format, such as JPEG or lossy WebP, carefully weigh the compression level to avoid causing text or other shapes to become fuzzy or unclear.</p> + +<table class="standard-table" style="max-width: 42rem;"> + <thead> + <tr> + <th scope="col" style="width: 50%;">Best choice</th> + <th scope="col">Fallback</th> + </tr> + <tr> + <td>{{anch("SVG")}}</td> + <td>{{anch("PNG")}}</td> + </tr> + </thead> +</table> + +<h2 id="Providing_image_fallbacks">Providing image fallbacks</h2> + +<p>While the standard HTML {{HTMLElement("img")}} element doesn't support compatibility fallbacks for images, the {{HTMLElement("picture")}} element does. <code><picture></code> is used as a wrapper for a number of {{HTMLElement("source")}} elements, each specifying a version of the image in a different format or under different <a href="/ja/docs/Web/CSS/@media">media conditions</a>, as well as an <code><img></code> element which defines where to display the image and the fallback to the default or "most compatible" version.</p> + +<p>For example, if you're displaying a diagram best displayed with SVG, but wish to offer a fallback to a PNG or GIF of the diagram, you would do something like this:</p> + +<pre class="brush: html notranslate"><picture> + <source srcset="diagram.svg" type="image/svg+xml"> + <source srcset="diagram.png" type="image/png"> + <img src="diagram.gif" width="620" height="540" + alt="Diagram showing the data channels"> +</picture> +</pre> + +<p>You can specify as many <code><source></code>s as you wish, though typically 2 or 3 is all you need.</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Media/Formats">メディアの種類と形式のガイド</a></li> + <li><a href="/ja/docs/Web/Media">ウェブメディア技術</a></li> + <li><a href="/ja/docs/Web/Media/Formats/Video_codecs">ウェブ上で使用される動画コーデックのガイド</a></li> + <li>{{Glossary("HTML")}} の {{HTMLElement("img")}} および {{HTMLElement("picture")}} 要素</li> + <li>CSS の {{cssxref("background-image")}} プロパティ</li> + <li>{{domxref("Image()")}} コンストラクターと {{domxref("HTMLImageElement")}} インターフェイス</li> +</ul> diff --git a/files/ja/web/media/formats/index.html b/files/ja/web/media/formats/index.html new file mode 100644 index 0000000000..5f104500dc --- /dev/null +++ b/files/ja/web/media/formats/index.html @@ -0,0 +1,86 @@ +--- +title: 'メディアの種類と形式のガイド: 画像、音声、動画コンテンツ' +slug: Web/Media/Formats +tags: + - API + - Audio + - Codecs + - Containers + - File Types + - Files + - Filetypes + - Landing + - Media + - Types + - Video + - Web + - formats +translation_of: Web/Media/Formats +--- +<p>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</p> + +<p>ほぼ最初の頃から、ウェブは何らかの形で視覚メディアのプレゼンテーションに対応してきました。当初、これらの機能は制限されていましたが、さまざまなブラウザーがウェブ上の静止画や動画の画像を含むことに関する問題に対して独自の解決策を見つけたため、有機的に拡張されました。現代のウェブは、メディアのプレゼンテーションや操作をサポートする強力な機能を備えており、さまざまな種類のコンテンツに対応するいくつかのメディア関連 API を備えています。一般的に、ブラウザーが対応するメディア形式は、ブラウザーの作成者に委ねられており、ウェブ開発者の作業を複雑にしています。</p> + +<p><span class="seoSummary">このガイドでは、ウェブ上で使用されるメディアを構成する可能性のあるメディアファイルの種類、{{Glossary("codec", "コーデック")}}、アルゴリズムの概要を説明します。</span>また、これらの様々な組み合わせに対するブラウザーの対応情報や、ファイル形式の優先順位の提案、特定の種類のコンテンツに適したファイル形式の提案も提供しています。</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="References" name="References">リファレンス</h2> + +<h3 id="Images" name="Images">画像</h3> + +<dl> + <dt><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類と形式のガイド</a></dt> + <dd>主要なウェブブラウザーが対応している画像ファイルの種類とコンテンツ形式をカバーし、それぞれの種類についての基本的な情報を提供しています。利点、制限、使用例など、ウェブデザイナーや開発者が興味を持つ情報を提供します。</dd> + <dt><a href="/ja/docs/Web/Media/Formats/Images_for_web_designers">ウェブデザイナーのための画像ファイル形式</a></dt> + <dd>ウェブデザイナーにとって有用な様々な画像ファイルの種類についての基本的な情報であり、各種類のベストプラクティスや使用例、特定のコンテンツの種類に適した画像ファイル形式を選択するためのガイドラインなどが含まれています。</dd> +</dl> + +<h3 id="Media_file_types_and_codecs" name="Media_file_types_and_codecs">メディアファイルの種類とコーデック</h3> + +<dl> + <dt><a href="/ja/docs/Web/Media/Formats/Containers">メディアコンテナー (ファイルの種類)</a></dt> + <dd>メディアデータを含むファイルの種類のガイド。オーディオに特化したものもあれば、オーディオや映画などの複合視聴覚コンテンツに使われるものもあります。主要なウェブブラウザーが対応している各ファイル種別の概要と、ブラウザーの対応情報、対応している機能が含まれています。</dd> +</dl> + +<dl> + <dt><a href="/ja/docs/Web/Media/Formats/Audio_codecs">ウェブ音声コーデックガイド</a></dt> + <dd>一般的なメディアコンテナーや主要なブラウザーで許可されているオーディオコーデックのガイド。メリット、制限、主要な仕様と機能、ユースケースが含まれています。また、与えられたコンテナーでコーデックを使用するための各ブラウザーのサポートもカバーしています。</dd> + <dt><a href="/ja/docs/Web/Media/Formats/Video_codecs">ウェブ動画コーデックガイド</a></dt> + <dd>この記事では、主要なブラウザーが対応してている動画コーデックについての基本的な情報と、一般的には対応されていないが、まだ遭遇する可能性のあるいくつかの情報を提供します。また、コーデックの機能、利点、制限、ブラウザーの対応レベルと制限についても説明します。</dd> + <dt><a href="/ja/docs/Web/Media/Formats/codecs_parameter">一般的なメディアタイプの "codecs" 引数</a></dt> + <dd>メディア形式を記述する MIME タイプを指定するときは、 type 文字列の一部として <code>codecs</code> 引数を使用して詳細を提供できます。このガイドでは、一般的なメディアタイプの <code>codecs</code> 引数の形式と可能な値について説明します。</dd> + <dt><a href="/ja/docs/Web/Media/Formats/WebRTC_codecs">WebRTC で使われるコーデック</a></dt> + <dd><a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> はコンテナーを使用せず、 {{domxref("MediaStreamTrack")}} オブジェクトを使用して音声や動画の各トラックを表現し、エンコードされたメディア自体をピアからピアにストリームします。このガイドでは、WebRTC で一般的に使用されるコーデックについて説明します。</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Guides" name="Guides">ガイド</h2> + +<h3 id="Concepts" name="Concepts">概要</h3> + +<dl> + <dt><a href="/ja/docs/Web/Media/Formats/Audio_concepts">デジタル音声の概要</a></dt> + <dd>音声がどのようにデジタル形式に変換され、コンピュータで使用するために保存されるかを紹介します。音声がどのようにサンプリングされるかについての基本的な概念、サンプルレート、音声フレーム、音声圧縮などの概念を説明しています。</dd> + <dt><a href="/ja/docs/Web/Media/Formats/Video_concepts">デジタル動画の概要</a></dt> + <dd>ウェブ上で使用されるデジタルビデオの基本的な概念、例えばカラーフォーマット、クロマサブサンプリング、人間の知覚がビデオコーディングにどのように影響するかなどを解説しています。</dd> +</dl> + +<h3 id="Tutorials_and_how-tos" name="Tutorials_and_how-tos">チュートリアルと how-to</h3> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">学習: 動画と音声のコンテンツ</a></dt> + <dd>このチュートリアルでは、ウェブ上でのメディアの利用方法を紹介し、詳細を説明します。</dd> + <dt><a href="/ja/docs/Web/Media/Formats/Support_issues">ウェブコンテンツにおけるメディア対応の課題への対応</a></dt> + <dd>このガイドでは、メディア形式を賢く選択し、フォールバックや代替形式を提供することで、可能な限り幅広い互換性を提供しながら、品質やパフォーマンスを最大化するウェブコンテンツを構築する方法を見ていきます。</dd> +</dl> + +<h2 id="Other_topics" name="Other_topics">その他のトピック</h2> + +<dl> + <dt><a href="/ja/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt> + <dd>Media Capabilities API を使用すると、アプリやサイトが実行されている端末のエンコーディングおよびデコーディング機能を検出することができます。これにより、どの形式をいつ使用するかをリアルタイムで判断することができます。</dd> +</dl> +</div> +</div> diff --git a/files/ja/web/media/images/aspect_ratio_mapping/index.html b/files/ja/web/media/images/aspect_ratio_mapping/index.html new file mode 100644 index 0000000000..40004b975d --- /dev/null +++ b/files/ja/web/media/images/aspect_ratio_mapping/index.html @@ -0,0 +1,75 @@ +--- +title: メディアコンテナ要素の幅と高さの属性をアスペクト比にマッピングする +slug: Web/Media/images/aspect_ratio_mapping +tags: + - CSS + - Images + - aspect ratio + - height + - jank + - responsive + - width +translation_of: Web/Media/images/aspect_ratio_mapping +--- +<p>This article explains a change that has occured in the way sizes are worked out on web documents when width and height attributes are set on them.</p> + +<p>This change means that the aspect ratio of the image is calculated by the browser early on and can then be used to correct the size needed to display the image before it has loaded, if CSS has been applied that causes problems with its display size. Read on to find out more.</p> + +<h2 id="Jank_problems_when_loading_images">Jank problems when loading images</h2> + +<p>In the olden days of web development, it was always seen as a good practice to add <code>width</code> and <code>height</code> attributes to your HTML {{htmlelement("img")}} elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.</p> + +<p><img alt="Two screenshots the first without an image but with space reserved, the second showing the image loaded into the reserved space." src="https://mdn.mozillademos.org/files/16945/ar-guide.jpg" style="height: 857px; width: 1200px;"></p> + +<p>Without the <code>width</code> and <code>height</code> attributes, no placeholder space would be created, and when the image finally loaded you would get a noticeable jank in the page layout. This wasn't an attractive thing for your users to see, and could also result in performance issues due to the repainting required after each image loads, hence adding the attributes being a good idea.</p> + +<p>Let’s move forward a few years to the era of responsive design. To keep images from breaking out of their containers when the container becomes narrower than the image, developers started using CSS like the following:</p> + +<pre class="brush: css notranslate">img { + max-width: 100%; + height: auto; +}</pre> + +<p>This is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above CSS overrides the width and height attribute information, meaning that if the image has not loaded for some reason, its height will be set to 0. When the image finally loads, the same jank will occur as the page layout is shifted to make space for it.</p> + +<h2 id="A_new_way_of_sizing_images_before_loading_completes">A new way of sizing images before loading completes</h2> + +<p>Recognizing the problem, a WICG community group formed to propose an <code><a href="https://github.com/WICG/intrinsicsize-attribute">intrinsicsize</a></code> attribute. Folks from Mozilla then expanded on this thinking, working on a proposal in the CSS <a href="https://drafts.csswg.org/css-sizing-4/">Box Sizing Level 4</a> draft to define an <code>aspect-ratio</code> property and propose the idea of using the <code>width</code> and <code>height</code> attributes to compute layout. Fantasai & Jen Simmons collaborated with Emilio, who worked on an experimental implementation to prove it would work.</p> + +<p>Mozilla then <a href="https://github.com/WICG/intrinsicsize-attribute/issues/16">brought the idea up in the WICG community group</a> and discussed it further until representatives from Chrome were onboard with the idea.</p> + +<p>Due to this work, browsers are working on adding a new mechanism for sizing images before the actual image is loaded. Firefox has added an internal <code>aspect-ratio</code> property (in version 69 onwards) that applies to replaced elements, and other related elements that accept <code>width</code> and <code>height</code> attributes. This appears in the browser's internal UA stylesheet, similar to the following:</p> + +<pre class="brush: css notranslate">img, input[type="image"], video, embed, iframe, marquee, object, table { + aspect-ratio: attr(width) / attr(height); +}</pre> + +<p>This actually affects any element that acts as a container for complex or mixed visual media — {{htmlelement("embed")}}, {{htmlelement("iframe")}}, {{htmlelement("marquee")}}, {{htmlelement("object")}}, {{htmlelement("table")}}, and {{htmlelement("video")}}, in addition to actual images ({{htmlelement("img")}} and <strong id="docs-internal-guid-1a994dc9-7fff-a700-71f0-25b6cfe48215"> </strong><code><input type="image"></code>). When such an element has <code>width</code> and <code>height</code> attributes set on it, its aspect ratio will be calculated before load time, and be available to the browser.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Currently this effect is being limited to actual <code><img></code> elements, as applying to other such elements may have undesirable results. See ({{bug(1583980)}}).</p> +</div> + +<p>When the <code>width</code>/<code>height</code> of an <code><img></code> element — as set using HTML attributes — is overidden using CSS using something like this:</p> + +<pre class="brush: css notranslate">img { + max-width: 100%; height: auto +}</pre> + +<p>The aspect ratio is then used to calculate the height and therefore the correct size is applied to the <code><img></code> element, meaning that the aforementioned jank will not occur when the image loads.</p> + +<h2 id="It_only_works_before_the_image_loads">It only works before the image loads</h2> + +<p>The new mechanism currently only works on <code><img></code> elements before the image is loaded.</p> + +<p>Originally we were going to have the new mechanism apply the calculated sizing to <code><img></code> elements before and after the image has loaded. However, this caused a problem — a number of web sites actually use the <code>width</code> and <code>height</code> attributes incorrectly, setting an aspect ratio of something other than the image’s intrinsic aspect ratio.</p> + +<p>Once such an image loads, if the internal aspect ratio is still applied it will result in the <code><img></code> not displaying the image correctly. Therefore, once the image is loaded, we start using the intrinsic aspect ratio of the loaded image rather than the aspect ratio from the attributes, so it displays at the correct aspect ratio.</p> + +<h2 id="Summary">Summary</h2> + +<p>So there you have it — eliminating another piece of jank from web layout! There is no need for a web developer to do anything special to their code to take advantage of this, besides returning to the habit of using <code>width</code> and <code>height</code> attributes in their HTML. They'll just get it for free.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: This new mechanism is enabled in Firefox 69 in beta and Nightly as the spec is worked out (controlled by the <code>layout.css.width-and-height-map-to-aspect-ratio.enabled</code> pref), and it is <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/hbhKRuBzZ4o">currently being implemented in Chrome</a>. It will ship with <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1585637">Firefox 71</a>.</p> +</div> diff --git a/files/ja/web/media/images/index.html b/files/ja/web/media/images/index.html new file mode 100644 index 0000000000..30e3aefce7 --- /dev/null +++ b/files/ja/web/media/images/index.html @@ -0,0 +1,65 @@ +--- +title: HTML での画像の使用 +slug: Web/Media/images +tags: + - HTML + - Images + - Landing + - Media +translation_of: Web/Media/images +--- +<p>HTML の用語集 {{Glossary("HTML")}} は、以下のようになっています。{{HTMLElement("img")}} 要素を使用すると HTML 文書に画像を埋め込むことができ、一方で {{HTMLElement("picture")}} 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、Web サイトへの画像の追加を扱うリソースへのリンクを紹介します。</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="リファレンス">リファレンス</h2> + +<p>これらの記事では、Web 上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。</p> + +<h3 id="HTML">HTML</h3> + +<dl> + <dt>{{HTMLElement("img")}}</dt> + <dd><strong>HTML <code><img></code> 要素</strong>は、Web ページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性をサポートしており、画像を見ない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。</dd> + <dt>{{HTMLElement("picture")}}</dt> + <dd><strong>HTML <code><picture></code> 要素</strong>は、0 個以上の {{HTMLElement("source")}} 要素と1個の {{HTMLElement("img")}} 要素を含みます。ブラウザは、それぞれの子 <source> 要素を考慮して、それらの中から最適なものを選択します。</dd> +</dl> + +<h3 id="CSS">CSS</h3> + +<dl> + <dt>{{cssxref("object-fit")}}</dt> + <dd><code><strong>object-fit</strong></code> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、<code><a href="/ja/docs/Web/HTML/Element/Img"><img></a></code> や <code><a href="/ja/docs/Web/HTML/Element/video"><video></a></code> のような<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>の内容を、そのコンテナに合わせてどのようにリサイズするかを設定します。</dd> + <dt>{{cssxref("object-position")}}</dt> + <dd><strong><code>object-position</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素のボックス内で選択された<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>内のコンテンツの整列を指定します。置換された要素のオブジェクトに覆われていないボックス内の領域は、要素の背景が表示されます。</dd> + <dt>{{cssxref("background-image")}}</dt> + <dd><strong><code>background-image</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素の背景画像を設定します。</dd> + <dd></dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="ガイド">ガイド</h2> + +<p>これらの記事では、画像の種類を選択して設定するためのガイダンスを提供しています。</p> + +<dl> + <dt><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類とフォーマットガイド</a></dt> + <dd>Web ブラウザで一般的にサポートされている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要因などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。</dd> + <dt><a href="/ja/docs/Web/Media/images/aspect_ratio_mapping">メディアコンテナ要素の幅と高さの属性をアスペクト比にマッピングする</a></dt> + <dd>これにより、ブラウザが画像を読み込む方法が変更され、アスペクト比がブラウザによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。</dd> +</dl> + +<dl> +</dl> + +<h2 id="その他のトピック">その他のトピック</h2> + +<p>興味がありそうな関連トピック</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">HTML の学習: レスポンシブ画像</a></dt> + <dd>この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なるデバイスでも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。</dd> +</dl> +</div> +</div> diff --git a/files/ja/web/media/index.html b/files/ja/web/media/index.html new file mode 100644 index 0000000000..5cfe5b75a9 --- /dev/null +++ b/files/ja/web/media/index.html @@ -0,0 +1,91 @@ +--- +title: Web メディア技術 +slug: Web/Media +tags: + - Audio + - Landing + - Media + - Video + - Web +translation_of: Web/Media +--- +<p>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</p> + +<p><span class="seoSummary">長年に渡り、オーディオ、ビデオおよび、その他のメディアを表示、作成および、管理するためのWeb の能力は、ますます速く成長してきました。今日では、HTML 要素、DOM インターフェイスおよび、これらのタスクを実行できる機能だけでなく、他のテクノロジーと並行しメディアを使用して本当に驚くべきことを可能にする、多数の API が使用可能です。この記事は、あなたがそれらを習得するために役立つであろう参考資料へのリンクを含む様々な API を列挙しています。</span></p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="References" name="References">参考文献</h2> + +<h3 id="HTML" name="HTML">HTML</h3> + +<p>これらの記事は、メディア開発者向け HTML 機能について説明しています。</p> + +<dl> + <dt>{{HTMLElement("audio")}}</dt> + <dd><code><audio></code> 要素は、Web のコンテキストでオーディオを再生するために使用されます。これらは、より複雑なメディアの宛先として非表示に、または、オーディオファイルのユーザー制御再生のための表示コントロールとともに、使用できます。JavaScript から {{domxref("HTMLAudioElement")}} オブジェクトとしてアクセスできます。</dd> + <dt>{{HTMLElement("video")}}</dt> + <dd><code><video></code> 要素は、Web コンテキストにおけるビデオコンテンツのエンドポイントです。単純にビデオファイルを提示するためにまたは、ストリーミングビデオコンテンツの宛先として使用することができます。<code><video></code> は、メディア API を他の HTML および、DOM 技術とリンクさせるための手段としても、使用できます。例えば、{{HTMLElement("canvas")}} (フレームの取得と操作) です。JavaScript から {{domxref("HTMLVideoElement")}} オブジェクトとしてアクセスできます。</dd> + <dt>{{HTMLElement("track")}}</dt> + <dd>HTML の<code><track></code> 要素を {{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内に配置して、メディア再生時に使用する <a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> 形式の字幕または、キャプショントラックへの参照を提供できます。JavaScript から {{domxref("HTMLTrackElement")}} オブジェクトとしてアクセスできます。</dd> + <dt>{{HTMLElement("source")}}</dt> + <dd>HTML の<code><source></code> 要素は、{{HTMLElement("audio")}} または {{HTMLElement("video")}} 要素内で使用して、表示するソースメディアを指定します。複数のソースを使用して、さまざまなフォーマット、サイズまたは、解像度により、メディアを提供できます。JavaScript から {{domxref("HTMLSourceElement")}} オブジェクトとしてアクセスできます。</dd> +</dl> + +<h3 id="APIs" name="APIs">APIs</h3> + +<dl> + <dt><a href="/ja/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt> + <dd>Media Capabilities API を使用すると、アプリやサイトが実行されているデバイスのエンコーディングとデコーディングの能力を判断できます。これにより、どのフォーマットをいつ使用するかをリアルタイムで判断することができます。</dd> + <dt><a href="/ja/docs/Web/API/Media_Streams_API">メディアキャプチャと Streams API</a></dt> + <dd>ローカルおよび、ネットワークを介したメディアのストリーミング、記録および、操作を可能にする API のリファレンスです。これには、ビデオ、オーディオおよび、静止画をキャプチャするためのローカルカメラとマイクの使用が含まれます。</dd> + <dt><a href="/ja/docs/Web/API/MediaStream_Recording_API">MediaStream レコーディング API</a></dt> + <dd>MediaStream Recording API を使用すると、メディアストリームをキャプチャしてデータ処理または、フィルターリングを行ったり、ディスクに記録したりすることができます。</dd> + <dt><a href="/ja/docs/Web/API/Web_Audio_API">Web オーディオ API</a></dt> + <dd>Web オーディオ API を使用すると、サウンドデータをリアルタイムおよび、録音済み素材の両方で生成、フィルターリングおよび、操作してからそのオーディオを <code><audio></code> 要素、メディアストリームまたは、ディスクなどへ送信できます。</dd> + <dt><a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a></dt> + <dd>WebRTC ( Web Real-Time Communication、Web リアルタイム通信) を使用すると、直接インターネット上の 2 ピア間で、ライブオーディオとビデオをストリーミングしたり、任意のデータを転送したりできます。</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Web/Media/Overview">Web 上のメディア技術の概要</a></dt> + <dd>オーディオとビデオの自動再生、操作、および録音をサポートするオープンWeb テクノロジーと API の概要です。どの API を使用すべきかわからない場合は、ここから始めることをお勧めします。</dd> + <dt><a href="/ja/docs/Web/Media/HTML_media">Using audio and video in HTML</a></dt> + <dd>HTML の <code><audio></code> 要素と <code><video></code> 要素の使い方のガイドです。</dd> + <dt><a href="/ja/docs/Web/Media/Accessibility">Web デザインにおけるメディアのアクセシビリティガイド</a></dt> + <dd>このガイドでは、Web デザイナーと開発者が、さまざまな能力を持つ人々に対して、アクセスできるコンテンツを作成する方法について説明しています。これは単に、{{HTMLElement("image")}} 要素の {{htmlattrxref("alt", "img")}} 属性を使用することから、スクリーンリーダー用のメディアにタグを付けることまでの範囲に及びます。</dd> + <dt><a href="/ja/docs/Web/Media/Formats">Web 上のメディアタイプとフォーマットのガイド</a></dt> + <dd>Web 上の画像、音声および、ビデオメディアに使用できる、ファイルタイプとコーデックのガイドです。これには、どの種類のコンテンツにどの形式を使用するのかということ、フォールバックの提供方法や、メディアタイプの優先順位付けなどのベストプラクティスおよび、各メディアコンテナとコーデックの一般的なブラウザーサポート情報が含まれます。</dd> + <dt><a href="/ja/docs/Web/Media/Streaming">Streaming audio and video</a></dt> + <dd>オーディオとビデオのストリーミング方法、そしてストリームの最高の品質とパフォーマンスを確保するために活用できる技術と技術を網羅したガイドです。</dd> + <dt><a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよび Web オーディオ API の自動再生ガイド</a></dt> + <dd>メディアやオーディオの予期しない自動再生は、ユーザーにとってはうれしくない驚きです。自動再生はある目的を果たす一方で、慎重に使用する必要があります。ユーザーがこれを制御できるようにするために、現在多くのブラウザーで自動再生ブロック機能が提供されています。この記事は自動再生の手引きとして、いつ、どのように使用するのかそして、ブラウザーを使って自動再生ブロックを適切に処理する方法についてのヒントを提供します。</dd> + <dt><a href="/ja/docs/Web/Media/3D_audio">Positional audio in a 3D environment</a></dt> + <dd>スクリーンにレンダリングされた 3D シーンやヘッドセットを使用して体験するミックスリアリティ体験などの 3D 環境では、オーディオがソースの方向から来ているように聞こえるように実行することが重要です。このガイドでは、これを達成する方法を説明します。</dd> + <dt><a href="/ja/docs/Web/Media/3D_video">Playing video in a 3D environment</a></dt> + <dd>このガイドでは、ビデオを 3D シーンに再生する方法を検討します。このテクニックは、フラットなコンピュータ画面上に表示される標準的な <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> アプリケーションでも、<a href="/ja/docs/Web/API/WebXR_Device_API">WebXR</a> で生成された仮想環境や拡張現実環境でも使用できます。</dd> +</dl> + +<dl> +</dl> + +<h2 id="Other_topics" name="Other_topics">その他</h2> + +<p>面白い方法でメディア API と並行して使用できるような、興味深いトピックもあります。</p> + +<dl> + <dt><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Canvas API を使用すると、{{HTMLElement("canvas")}} に描画して、画像の内容を操作したり変更したりできます。これは、<code><canvas></code> 要素をビデオの再生先または、カメラのキャプチャ先として設定して、ビデオフレームをキャプチャして操作できるようにするなど、さまざまな方法によるメディア使用を可能にします。</dd> + <dt><a href="/ja/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>WebGL は、既存の Canvas API 上に OpenGL ES 互換の API を提供し、Web 上で強力な 3D グラフィックスを実行することを可能にします。キャンバスを通して、これはメディアコンテンツに 3D画像を追加するように使用できます。</dd> + <dt><a href="/ja/docs/Web/API/WebXR_API">WebXR</a></dt> + <dd>WebXR は最終的に、WebVR に代わるもので、バーチャルリアリティ (VR) と拡張現実 (AR) コンテンツの作成をサポートする技術です。複合現実的なコンテンツはその後、デバイスの画面に表示されるか、ゴーグルやヘッドセットを使用して表示されます。</dd> + <dt><a href="/ja/docs/Web/API/WebVR_API">WebVR</a> {{deprecated_inline}}</dt> + <dd>Web Virtual Reality API は、Oculus Rift や HTC Vive などのバーチャルリアリティ (VR) デバイスをサポートしているため、開発者はユーザーの位置や動きを 3D シーン内の動きに変換して、デバイスに表示することができます。WebVR は順次、WebXR に置き換えられることが望まれています。WebXR はより広範囲なユースケースをカバーします。</dd> +</dl> +</div> +</div> diff --git a/files/ja/web/media/streaming/index.html b/files/ja/web/media/streaming/index.html new file mode 100644 index 0000000000..d65cd5b333 --- /dev/null +++ b/files/ja/web/media/streaming/index.html @@ -0,0 +1,39 @@ +--- +title: オーディオとビデオのストリーミングガイド +slug: Web/Media/Streaming +tags: + - Audio + - Guide + - Media + - Networking + - Video + - streaming +translation_of: Web/Media/Streaming +--- +<p>{{QuickLinksWithSubpages("/ja/docs/Web/Media")}}</p> + +<p>このガイドでは、Web 上のオーディオあるいはビデオメディアをストリーミングするために使用されるテクニックと、可能な限り最高の品質とパフォーマンスを引き出すためにストリーミングを実行する際に使用するコード、メディア、サーバー、およびオプションをどのように最適化するかを検討します。</p> + +<p><strong><<<...XXXXXX...>>></strong></p> + +<h2 id="プロトコル">プロトコル</h2> + +<p>サーバとストリーミングコードの設定に加えて、パフォーマンスを最適化するために使用できる特別なプロトコルが存在することがあります。</p> + +<h3 id="HTTPS_Live_Streaming">HTTPS Live Streaming</h3> + +<p><strong>HTTPS Live Streaming</strong> (<strong>HLS</strong>) は、Apple が開発したプロトコルで、Safari はそのすべてのプラットフォームでサポートしています。HLS は他の環境でもサポートされている場合がありますが、条件付きでサポートされている場合もあります。</p> + +<p>例えば、多くの Web サイトのモバイル専用コンテンツでは、モバイルブラウザが HLS に対応していることを前提としているため、この前提が間違っているために変な互換性エラーが発生することを避けるために、Android 版の Firefox も同様に対応しています。ただし、Android のデスクトップ版は HLS をサポートしていません。</p> + +<p>HLS ではプレイリストを利用して、ストリーミングするメディアを選択するだけでなく、同じメディアのバージョンや形式を選択することができます。例えば、HLS では、ユーザーが自分の言語を聞くために、複数の音声ストリームを含むビデオをストリーミングすることができます。さらに、異なるネットワーク条件に最適化されたストリームの形式を提供することもできます。このようにして、ライブストリームを柔軟かつ高パフォーマンスにすることができます。</p> + +<p>2017年半ば現在、HLS は {{RFC(8216)}} として標準化されています。</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li><a href="/ja/docs/Web/Media">Web メディア技術</a></li> + <li><a href="/ja/docs/Web/Media/Formats">Web 上のメディアタイプとフォーマットのガイド</a></li> + <li>{{HTMLElement("audio")}} と {{HTMLElement("video")}}</li> +</ul> |