initial commit

2 files changed, 140 insertions, 0 deletions

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 &amp; 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>&lt;input type="image"&gt;</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>&lt;img&gt;</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>&lt;img&gt;</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>&lt;img&gt;</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>&lt;img&gt;</code> elements before the image is loaded.</p>
+
+<p>Originally we were going to have the new mechanism apply the calculated sizing to <code>&lt;img&gt;</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>&lt;img&gt;</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>&lt;img&gt;</code> 要素</strong>は、Web ページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性をサポートしており、画像を見ない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。</dd>
+ <dt>{{HTMLElement("picture")}}</dt>
+ <dd><strong>HTML <code>&lt;picture&gt;</code> 要素</strong>は、0 個以上の {{HTMLElement("source")}} 要素と1個の {{HTMLElement("img")}} 要素を含みます。ブラウザは、それぞれの子 &lt;source&gt; 要素を考慮して、それらの中から最適なものを選択します。</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">&lt;img&gt;</a></code> や <code><a href="/ja/docs/Web/HTML/Element/video">&lt;video&gt;</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>