CSS 画像の文書を更新

- 2021/10/16 時点の英語版に同期

2 files changed, 65 insertions, 76 deletions

diff --git a/files/ja/web/css/image-rendering/blumen.jpg b/files/ja/web/css/image-rendering/blumen.jpg
new file mode 100644
index 0000000000..1eae597125
--- /dev/null
+++ b/files/ja/web/css/image-rendering/blumen.jpg
diff --git a/files/ja/web/css/image-rendering/index.md b/files/ja/web/css/image-rendering/index.md
index c158a3d034..d4bfadd6ac 100644
--- a/files/ja/web/css/image-rendering/index.md
+++ b/files/ja/web/css/image-rendering/index.md
@@ -3,21 +3,26 @@ title: image-rendering
 slug: Web/CSS/image-rendering
 tags:
   - CSS
-  - CSS プロパティ
   - CSS 画像
+  - CSS プロパティ
   - Reference
   - image-rendering
+  - recipe:css-property
+browser-compat: css.properties.image-rendering
 translation_of: Web/CSS/image-rendering
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+[CSS](/ja/docs/Web/CSS) の **`image-rendering`** プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>image-rendering</code></strong> プロパティは、画像を拡大縮小するアルゴリズムを設定します。このプロパティは要素自身に適用され、他のプロパティで設定されるあらゆる画像、子孫要素に適用されます。</p>
+{{EmbedInteractiveExample("pages/css/image-rendering.html")}}
 
-<p>{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が <code>100×100px</code> であって、実際の寸法が <code>200×200px</code> (または <code>50×50px</code>) であるとき、画像は <code>image-rendering</code> で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。</p>
+{{Glossary("User agent", "ユーザーエージェント")}}は、ページの作者が自然な寸法とは異なる寸法を指定したとき、画像を拡大縮小します。拡大縮小は、ユーザー操作 (ズーム) によって発生することもあります。例えば、画像の自然な寸法が `100×100px` であって、実際の寸法が `200×200px` (または `50×50px`) であるとき、画像は `image-rendering` で指定されたアルゴリズムを使用して拡大 (または縮小) されます。このプロパティは拡大/縮小されない画像には効果がありません。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 image-rendering: auto;
 image-rendering: crisp-edges;
 image-rendering: pixelated;
@@ -25,50 +30,57 @@ image-rendering: pixelated;
 /* グローバル値 */
 image-rendering: inherit;
 image-rendering: initial;
-image-rendering: unset;</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>auto</code></dt>
- <dd>拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は<ruby><em>バイリニア</em><rp> (</rp><rt>bilinear</rt><rp>) </rp></ruby>再サンプリングを使用します (high-quality)。</dd>
- <dt><code>smooth</code> {{Experimental_Inline}}</dt>
- <dd>画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。</dd>
- <dt><code style="white-space: nowrap;">high-quality</code> {{Experimental_Inline}}</dt>
- <dd><code>smooth</code> と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。 <code style="white-space: nowrap;">high-quality</code> の画像は他の値よりも優先されます。</dd>
- <dt><code style="white-space: nowrap;">crisp-edges</code></dt>
- <dd>画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。<ruby>最近傍<rp> (</rp>nearest neighbor<rp>) </rp></ruby>法や、 2×SaI や <a href="https://en.wikipedia.org/wiki/Hqx">hqx-family</a> のような<a href="https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms">その他のスムーズ化が行われない拡大縮小アルゴリズム</a>などが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。</dd>
- <dt><code>pixelated</code></dt>
- <dd>画像を拡大する時は、<ruby>最近傍<rp> (</rp>nearest neighbor<rp>) </rp></ruby>法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は <code>auto</code> と同じになります。</dd>
-</dl>
-
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>optimizeQuality</code> および <code>optimizeSpeed</code> の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) <code>smooth</code> および <code>pixelated</code> の同義語として定義されていました。</p>
-</div>
+image-rendering: revert;
+image-rendering: unset;
+```
+
+### 値
+
+- `auto`
+  - : 拡大縮小のアルゴリズムはユーザーエージェントに依存します。バージョン 1.9 (Firefox 3.0) から、Gecko は*バイリニア* (bilinear) 再サンプリングを使用します (high-quality)。
+- `smooth` {{Experimental_Inline}}
+  - : 画像は、画像の外見を最適化するアルゴリズムで拡大縮小されます。具体的には、バイリニア補完などの色の「円滑化」が許容されるアルゴリズムで拡大縮小されます。これは、写真のような画像を想定しています。
+- `high-quality` {{Experimental_Inline}}
+  - : `smooth` と同等ですが、より高品質な設定です。システムのリソースが制約されている場合、どの画像の品質をどの程度低下させるかを検討するとき。`high-quality` の画像は他の値よりも優先されます。
+- `crisp-edges`
+  - : 画像は、画像内のコントラストとエッジを保つアルゴリズムにより拡大縮小されます、画像の処理過程で色の円滑化やぼかしを導入は行いません。最近傍 (nearest neighbor) 法や、 2×SaI や [hqx-family](https://en.wikipedia.org/wiki/Hqx) のような[その他のスムーズ化が行われない拡大縮小アルゴリズム](https://en.wikipedia.org/wiki/Pixel-art_scaling_algorithms)などが適しています。この値はブラウザーゲームようなピクセルアート画像を想定しています。
+- `pixelated`
+  - : 画像を拡大する時は、最近傍 (nearest neighbor) 法が使用され、画像は画像が大きなピクセルで構成されたように表示されます。縮小する時は `auto` と同じになります。
+
+> **Note:** `optimizeQuality` および `optimizeSpeed` の値は、初期の草稿で (SVG の仕様 {{SVGAttr("image-rendering")}} に似たものとして) `smooth` および `pixelated` の同義語として定義されていました。
+
+## Formal definition
+
+{{cssinfo}}
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## Formal syntax
 
-{{CSSSyntax}}
+{{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## Examples
 
-<div class="hidden">
-<pre class="brush: html">&lt;div&gt;
-  &lt;img class="auto" alt="auto" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
-  &lt;img class="pixelated" alt="pixelated" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
-  &lt;img class="crisp-edges" alt="crisp-edges" src="https://mdn.mozillademos.org/files/2765/blumen.jpg" /&gt;
-&lt;/div&gt;
-</pre>
+<h3 id="Setting_image_scaling_algorithms">画像の拡大縮小アルゴリズムの設定</h3>
+
+実際の使用では、 `pixelated` と `crisp-edges` のルールを組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際のルールにフォールバックを追加するだけです。) [Canvas API](/ja/docs/Web/API/Canvas_API) は手動の画像データ操作または [`imageSmoothingEnabled`](/ja/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled) によって [`pixelated` の代替ソリューション](http://phrogz.net/tmp/canvas_image_zoom.html) を提供することができます。
+
+```html hidden
+<div>
+  <img class="auto" alt="auto" src="blumen.jpg" />
+  <img class="pixelated" alt="pixelated" src="blumen.jpg" />
+  <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
 </div>
+```
 
-<div class="hidden">
-<pre class="brush: css">img {
+```css hidden
+img {
   height: 200px;
 }
-</pre>
-</div>
+```
+
+#### CSS
 
-<pre class="brush: css">.auto {
+```css
+.auto {
   image-rendering: auto;
 }
 
@@ -81,47 +93,24 @@ image-rendering: unset;</pre>
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample('Examples')}}</p>
+#### Result
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> 実際の仕様では、 <code>pixelated</code> と <code>crisp-edges</code> の規則を組み合わせることで、お互いにある程度のフォールバックを提供することができます。 (実際の規則にフォールバックを追加するだけです) <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は手動の画像データ操作または <code><a href="/ja/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled">imageSmoothingEnabled</a></code> によって <a href="http://phrogz.net/tmp/canvas_image_zoom.html"><code>pixelated</code> の代替ソリューション</a> を提供することができます。</p>
-</div>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+{{EmbedLiveSample('Setting_image_scaling_algorithms')}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Images", "#the-image-rendering", "image-rendering")}}</td>
-   <td>{{Spec2("CSS3 Images")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+## Specifications
 
-<p>{{CSSInfo}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## Browser compatibility
 
-<p>{{Compat("css.properties.image-rendering")}}</p>
+{{Compat}}
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> 仕様書の例にあるようなピクセルアートの拡大縮小には <code>crisp-edges</code> を使うことが想定されていますが、実際にはどのブラウザーも (2020年1月時点で) 対応していません。 <a href="https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727">Firefox</a> では、 <code>pixelated</code> は最近傍法として解釈されますが、 <code>auto</code> と <code>crisp-edges</code> はトリリニア法または線形で補間されます。</p>
-
-<p>Chromium と Safari (WebKit) での動作については、 <code><a href="https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&amp;q=GetInterpolationQuality&amp;g=0&amp;l=1160">GetInterpolationQuality</a></code> 関数と <code><a href="https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324">CSSPrimitiveValue::operator ImageRendering()</a></code> をそれぞれ参照してください。</p>
-</div>
+> **Note:** 仕様書の例にあるようなピクセルアートの拡大縮小には `crisp-edges` を使うことが想定されていますが、実際にはどのブラウザーも (2020 年 1 月時点で) 対応していません。[Firefox](https://dxr.mozilla.org/mozilla-central/rev/5fd4cfacc90ddd975c82ba27fdc56f4187b3f180/gfx/wr/webrender/src/resource_cache.rs#1727) では、 `pixelated` は最近傍法として解釈されますが、 `auto` と `crisp-edges` はトリリニア法または線形で補間されます。
+>
+> Chromium と Safari (WebKit) での動作については、 [`GetInterpolationQuality`](https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/style/computed_style.cc?type=cs&q=GetInterpolationQuality&g=0&l=1160) 関数と [`CSSPrimitiveValue::operator ImageRendering()`](https://github.com/WebKit/webkit/blob/9b169b6c85394d94f172e5d75ca2f6c74830e99c/Source/WebCore/css/CSSPrimitiveValueMappings.h#L4324) をそれぞれ参照してください。
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## See also
 
-<ul>
- <li>その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li>
-</ul>
+- その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}