CSS Images Module Level 4

2.1. 画像~file形式

~propにおいて `image$t 値から参照~される妥当な画像に対しては、~UAは，最低限，次の~file形式を~supportし~MUST： ◎ At minimum, the UA must support the following image file formats when referenced from an <image> value, for all the properties in which using <image> is valid:

• `PNG$r により指定される， PNG ◎ PNG, as specified in [PNG]
• `SVG11$r により指定される，`~secure静的~mode$を利用している~SVG（ `SVG-INTEGRATION$r を見よ） ◎ SVG, as specified in [SVG11], using the secure static mode (See [SVG-INTEGRATION])
• ~UAが~animate化 `image$t を~supportする場合、 `SVG11$r により指定される，`~secure~animate化~mode$を利用している~SVG（ `SVG-INTEGRATION$r を見よ） ◎ If the UA supports animated <image>s, SVG, as specified in [SVG11], using the secure animated mode (See [SVG-INTEGRATION])

~UAは、他の~file形式を~supportしても~MAY。 ◎ The UA may support other file formats as well.

2.2. 画像~参照： `url^f 記法

2.3. 解像度の折衝： `image-set^f 記法

利用者の機器に最も適切な解像度の画像を送達することは、困難な仕事にもなり得る。 理想的には、画像~解像度は、利用者~間で様々な，機器それぞれの解像度と同じになるべきである。 しかしながら、送信する画像をどれにするか決める要因になるものは、他にもあり得る — 例えば，低速な~mobile接続の下では、利用者は，解像度は適正でも，巨大になる画像を読込むのを待つより，低~解像度の画像を受信する方を選好するかもしれない。 `image-set$f 関数により、作者は，これらの課題のほとんどを無視して、単に，画像に複数の解像度を供することで，与えられた状況で最も適切なものを UA に決めさせることが可能になる。 ◎ Delivering the most appropriate image resolution for a user’s device can be a difficult task. Ideally, images should be in the same resolution as the device they’re being viewed in, which can vary between users. However, other factors can factor into the decision of which image to send; for example, if the user is on a slow mobile connection, they may prefer to receive lower-res images rather than waiting for a large proper-res image to load. The image-set() function allows an author to ignore most of these issues, simply providing multiple resolutions of an image and letting the UA decide which is most appropriate in a given situation.

この解決策は、解像度が~filesizeを代理するものと見做しているので、［ 複数の解像度からなる一連の~vector画像や, 一連の画像に~vectorと~rasterが混在しているとき（例えば~icon） ］を，適切に取扱わない。 例えば、高~解像度 向けには~vector画像, 低~解像度 向けには画素に最適化された~bitmap, 低~帯域幅 向けには同じ~vector画像（高~解像度であってもずっと小さいので）など。 ◎ This solution assumes that resolution is a proxy for filesize, and therefore doesn’t appropriately handle multi-resolution sets of vector images, or mixing vector images with raster ones (e.g. for icons). For example, use a vector for high-res, pixel-optimized bitmap for low-res, and same vector again for low-bandwidth (because it’s much smaller, even though it’s higher resolution).

`image-set^f の構文は： ◎ The syntax for image-set() is:

`image-set@f
    = image-set( `image-set-option$t# )
`image-set-option@t
    = [ `image$t | `string$t ] `resolution$t

~HTMLの `picture$e 要素の機能性に合致させるため、 `w^u ／ `h^u 次元, および `format^f 関数 を追加すべき。 ◎ We should add "w" and "h" dimensions as a possibility, and a "format()" function, to match the functionality of HTML’s picture.

`image-set$f 関数は、直接的にも（他の `image$t 型の引数として）間接的にも，入子にできない。 ◎ The image-set() function can not be nested inside of itself, either directly or indirectly (as an argument to another <image> type).

この制約は必要か？ ◎ Is this restriction needed?

`image-set$f の中の各 `string$t は、 `url$t を表現する。 ◎ Each <string> inside image-set() represents a <url>.

`image-set$f 関数~内の各 `image-set-option$t の `resolution$t は，互いに異なら~MUST — さもなければ，関数は無効になる。 ◎ Every <image-set-option> in a given image-set() must have a different <resolution>, or else the function is invalid.

~UAは、どの `image-set-option$t を読込むかについて、自身に関連する判定基準（~displayの解像度, 接続~速度, 等々）を何であれ見出して，それに基づいて選ば~MUST。 しかる後、 `image-set$f は，その~~選択に結び付けられている画像を表現し、その`内在~解像度$は，その~~選択に結び付けられている解像度になる。 ~UAは、頁が存続する間，与えられた `image-set$f に対し利用する `image-set-option$t を，変更してよい — 選択肢を選ぶために利用された判定基準が，~UAの見積もりにおいて変更に価する程に十分~変化したならば。 ◎ UAs must make a UA-specific choice of which <image-set-option> to load, based on whatever criteria they find relevant (such as the resolution of the display, connection speed, etc). The image-set() then represents the image associated with the URL of that choice. The image’s intrinsic resolution is the resolution associated with that choice. UAs may change which <image-set-option> they wish to use for a given image-set() over the lifetime of the page, if the criteria used to determine which option to choose change significantly enough to make it worthwhile in the UA’s estimation.

background-image: image-set(
    "foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi
);

2.4. 画像~fallbackと注釈： `image^f 記法

`image$f 関数により、作者は次が可能になる： ◎ The image() function allows an author to:

• `媒体~素片$を利用して、画像の一部分を切抜く。 ◎ use media fragments to clip out a portion of an image
• 単色を画像として利用する。 ◎ use a solid color as an image
• 指定された URL にある画像が［ ~downloadできない, または復号できない ］ときの，単色~画像への~fallbackを指定する。 ◎ fallback to a solid-color image, when the image at the specified url can’t be downloaded or decoded
• 画像の~metadataに指定されている画像の方位に，自動的に従うようにする。 ◎ automatically respect the image orientation specified in the image’s metadata

`image$f 記法は，次で定義される： ◎ The image() notation is defined as:

`image@f = image( `image-tags$t? [ `image-src$t? , `color$t? ]! )
`image-tags@t = [ ltr | rtl ]
`image-src@t = [ `url$t | `string$t ]

`image$f 内で利用される `string$t は、 `url$t を表現する。 CSS における通例的な~URLと同様、 `image$f 値に指定された相対~URLは，算出値を得るときに（ “値と単位” 仕様 `css-values-3$r に従って）絶対~URLに解決される。 ◎ A <string> used in image() represents a <url>. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [css-values-3]) when a specified image() value is computed.

EXIF などの画像の~metadataにて，方位が指定されている場合、~UAは，その~metadataの指定に従って，画像を回転させたり裏返して 正しく方位させ~MUST。 ◎ If the image has an orientation specified in its metadata, such as EXIF, the UA must rotate or flip the image to correctly orient it as the metadata specifies.

2.4.1. 画像の~fallback

`image$f に~URLと `color$t の両者が指定された下で，~URLが`無効な画像$を表現するときには、 `image$f 関数は，URL が元々指定されていなかったかのように 単色の画像 を描画する。 ◎ If both a URL and a <color> are specified in image(), then whenever the URL represents an invalid image, the image() function renders as if the URL were not specified at all; it generates a solid-color image as specified in §2.4.3 Solid-color Images.

body      { color: black; background: white; }
p.special { color: white; background: url("dark.png") black; }

body      { color: black; background: white; }
p.special { color: white; background: image("dark.png", black); }

background-image: image('sprites.svg#xywh=80,0,40,40')

background-image: url('swirl.png'); /* 旧~UA */
background-image: image('sprites.png#xywh=10,30,60,20'); /* 新~UA */

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

<ul style="list-style-image: image(ltr 'arrow.png');">
  <li dir='ltr'>左に~bulletがあります。</li>
  <li dir='rtl'>~bulletは右にあります。</li>
</ul>

☞ 左に~bulletがあります。
  。すまりあに右は~tellub ☜

2.5. 画像を組合せる： `cross-fade^f 記法

2.6. 要素を画像として利用する： `element^f 記法

`element$f 関数により、作者は，文書~内の要素を画像として利用することが可能になる。 参照先の要素の外観が変化するに伴い、画像も変化するようになる。 これを利用すれば，例えば、~slideshow内の次の／前の~slideの~live~previewを作成したり，~fancyな勾配を生成するために `canvas$e 要素を参照~したり，背景を~animate化することさえ可能になる。 ◎ The element() function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well. This can be used, for example, to create live previews of the next/previous slide in a slideshow, or to reference a canvas element for a fancy generated gradient or even an animated background.

注記： `element$f 関数が再生産するのは、参照先の要素の外観に限られ，実際の内容やその構造を再生産することはない。 作者は、装飾的な目的に限り，これを利用するべきである。 `element$f を，頁にまたがる有意な内容を伴う要素を再生産するために利用しては~MUST_NOT — 代わりに、単に文書の中に要素の複数の複製を挿入すること。 ◎ Note: The element() function only reproduces the appearance of the referenced element, not the actual content and its structure. Authors should only use this for decorative purposes, and must not use element() to reproduce an element with significant content across the page. Instead, just insert multiple copies of the element into the document.

`element$f の構文は、次で与えられる： ◎ The syntax for element() is:

`element@f = element( `id-selector$t )

ここで `id-selector$t は`~ID選択子$である。 `SELECT$r ◎ where <id-selector> is an ID selector [SELECT].

外部~文書~内の要素（~SVGの`塗り~server$など）を参照できるようにする必要はあるか？ あるいは、この用途には `url^f を利用するだけで十分か？ ◎ Do we need to be able to refer to elements in external documents (such as SVG paint servers)? Or is it enough to just use url() for this?

この名前は、 GCPM の似た関数と競合する。 これはどうにかして解決される必要がある。 ◎ This name conflicts with a somewhat similar function in GCPM. This needs to be resolved somehow.

要素の “反映” を行う能が求まれる — 要素~上の背景~画像として, または擬似要素~内で。 循環の検出を誘発するのを避けるため、これは特別に取扱われる必要がある。 ◎ Want the ability to do "reflections" of an element, either as a background-image on the element or in a pseudo-element. This needs to be specially-handled to avoid triggering the cycle-detection.

`overflow^p が `paged^v にされている~view内の単独の頁にはどう取組むか？ ◎ When we have overflow:paged, how can we address a single page in the view?

`element$f 関数は、その引数に与えた~IDに合致する要素を参照~する。 ~IDは、先ず `elementSources$m ~map内で検索される。 見出されなかった場合，文書に対し照合され、合致した要素が複数あれば，関数は それらのうち最初の要素を参照~する。 ◎ The element() function references the element matched by its argument. The ID is first looked up in the elementSources map, as described in that section. If it’s not found, it’s then matched against the document. If multiple elements are matched, the function references the first such element.

`element$f 関数により表現される画像は、要素が文書~内で可視かどうかに基づいて変わり得る： ◎ The image represented by the element() function can vary based on whether the element is visible in the document:

要素は`描画され$ていて，`置換~要素$の子孫ではない, かつ`積層~文脈$を生成する場合： ◎ an element that is rendered, is not a descendant of a replaced element, and generates a stacking context

関数は、内在~sizeが参照先の要素の `装飾限界~box@ に等しい画像を表現する： ◎ The function represents an image with its intrinsic size equal to the decorated bounding box of the referenced element:

• ~CSS描画~modelを利用して描画される要素に対しては、`装飾限界~box$は，`主要~box$のすべての断片の`~border画像~区画$を包含する, かつ軸に~~平行な，最も小さい矩形になる。 ◎ for an element rendered using a CSS rendering model, the decorated bounding box is the smallest axis-aligned rectangle that contains the border image areas of all the fragments of the principal box
• ~SVG描画~modelを利用して描画される要素に対する`装飾限界~box$は， SVGにより定義されるそれになる。 【大雑把に言えば，外形線の太さも含め，図形~全体を囲う最小の矩形】 ◎ for an element rendered using the SVG rendering model, the decorated bounding box is defined by SVG

注記： 画像は，その限界の外側にあるものは既定で切取るので、~box影の様な`装飾限界~box$の外側へ拡張する装飾は，切取られることになる。 ◎ Note: Because images clip anything outside their bounds by default, this means that decorations that extend outside the decorated bounding box, like box shadows, may be clipped.

画像は、広さ無限の `transparent$v ~canvas上に参照先の要素とその子孫を描画して構築され （文書~内にあるときの~sizeと同じになる）、`装飾限界~box$の各~辺は画像の各~辺に接合されるように，位置される。 ◎ The image is constructed by rendering the referenced element and its descendants (at the same size that they would be in the document) over an infinite transparent canvas, positioned so that the edges of the decorated bounding box are flush with the edges of the image.

実装を効率的にするためには、要素には積層~文脈またはそれに準じるものが要求されるよう見受けられる。 全部的な積層~文脈は必要か？あるいは疑似的な積層~文脈で済むか？ それは通常の積層~文脈になる必要はあるか？あるいは `element^f に描画するときに積層~文脈として描画するだけで済むか？ ◎ Requiring some degree of stacking context on the element appears to be required for an efficient implementation. Do we need a full stacking context, or just a pseudo-stacking context? Should it need to be a stacking context normally, or can we just render it as a stacking context when rendering it to element()?

参照先の要素またはその先祖に変形-が適用されている場合、要素を画像として描画するときには，変形-は無視され~MUST。 `CSS3-TRANSFORMS$r ◎ If the referenced element has a transform applied to it or an ancestor, the transform must be ignored when rendering the element as an image. [CSS3-TRANSFORMS]

参照先の要素が何~頁かに分断されている場合、要素は，頁の内容~区画が頁割~方向に接合されていたかのように表示される — 頁の各~辺は初期~包含塊の対応する始端~辺に整列された上で。 何~行0か／何~柱か に分断されている要素は、単に`装飾限界~box$と伴に描画される ◎ If the referenced element is broken across pages, the element is displayed as if the page content areas were joined flush in the pagination direction, with pages' edges corresponding to the initial containing block’s start edge aligned. Elements broken across lines or columns are just rendered with their decorated bounding box.

実装は、参照先の要素~用に生成した既存の~bitmap~dataを再~利用しても~MAY。 あるいは，要素の表示-を再~生成して、当の~sizeにおける画像の品質を最大化しても~MAY（例えば、参照先の要素は~SVG素片であると検出された場合）。 再~生成する場合でも、結果の画像における~layoutが参照先の要素から変化しては~MUST_NOT。 すなわち，画像の見かけは、~raster化の品質の違いを除き，参照先の要素と一致し~MUST。 ◎ Implementations may either re-use existing bitmap data generated for the referenced element or regenerate the display of the element to maximize quality at the image’s size (for example, if the implementation detects that the referenced element is an SVG fragment); in the latter case, the layout of the referenced element in the image must not be changed by the regeneration process. That is, the image must look identical to the referenced element, modulo rasterization quality.

`p$e 要素を文書~内の他所で背景として再利用する例： ◎ As a somewhat silly example, a p element can be reused as a background elsewhere in the document:

`efunc1^dgm

`efunc2^dgm

要素は`描画され$ないが、`塗り~source$を供する場合： ◎ an element that is not rendered, but which provides a paint source

関数は、`塗り~source$の［ 内在~size, 外観 ］を伴う画像を表現する — ~sizeと外観は、~host言語により定義される。 ◎ The function represents an image with the intrinsic size and appearance of the paint source. The host language defines the size and appearance of paint sources.

例えば， `element$f 関数は、~HTML文書~内の ~SVG `pattern$e 要素を参照~できる： ◎ For example, the element() function can reference an SVG <pattern> element in an HTML document:

<!DOCTYPE html>
<svg>
  <defs>
    <pattern id='pattern1'>
      <path d='...'>
    </pattern>
  </defs>
</svg>
<p style="background: element(#pattern1)">

ここでは~patternを背景に用いてます。
~patternが変化したり~animateされた場合、背景も更新されることになります。
◎
I’m using the pattern as a background! If the pattern is changed or animated, my background will be updated too!

</p>

~HTMLは［ `canvas$e, `img$e, `video$e ］など、塗り~sourceを供する，数種の要素を定義する。 頁~内には表示されてないが，中に何か描かれている `canvas$e を，~CSSから参照~できることを意味する： ◎ HTML also defines that a handful of elements, such as canvas, img, and video, provide a paint source. This means that CSS can, for example, reference a canvas that’s being drawn into, but not displayed in the page:

<!DOCTYPE html>
<script>
  var %canvas = document.querySelector('#animated-bullet');
  %canvas.width = 20; canvas.height = 20;
  drawAnimation(%canvas);
</script>
<canvas id='animated-bullet' style='display:none'></canvas>
<ul style="list-style-image: element(#animated-bullet);">
  <li>
ここでは `canvas$e を~bulletに用いてます。
◎
I’m using the canvas as a bullet!
</li>
  <li>
ここでも。
◎
So am I!
</li>
  <li>
`canvas$e が~JSで変更される度に，すべての~bullet画像も更新されます。
◎
As the canvas is changed over time with Javascript, we’ll all update our bullet image with it!
</li>
</ul>

その他の場合： ◎ anything else

関数は`無効な画像$を表現する。 ◎ The function represents an invalid image.

例えば，次に挙げる `element$f の利用は、どれも透明な背景になる： ◎ For example, all of the following element() uses will result in a transparent background:

<!DOCTYPE html>
<p id='one' style="display:none; position: relative;">one</p>
<iframe src="http://example.com">
  <p id='two' style="position: relative;">
~fallback内容
◎
I’m fallback content!
</p>
</iframe>
<ul>
  <li style="background: element(#one);">

要素 `p id='one'^e は、 `display^p が `none^v にされていて`描画され$ないので，塗り~sourceを供さない。
◎
A display:none element isn’t rendered, and a P element doesn’t provide a paint source.

  </li>
  <li style="background: element(#two);">

`element^f には `iframe$e の様な`置換~要素$の子孫は利用できない。
◎
The descendants of a replaced element like an IFRAME can’t be used in element() either.

  </li>
  <li style="background: element(#three);">

`id^a "`three^v" の要素はないので、この背景も透明になる。
◎
There’s no element with an id of "three", so this also gets rendered as a transparent image.

  </li>
</ul>

結付けられている~boxがない要素は、 `描画され@ ないとされる。 これは例えば、要素またはその ある先祖にて `display^p が `none^v にされている場合などに起こり得る。 ~host言語は、要素が描画されないと見なされ得る追加の仕方を定義して~MAY — 例えば，~SVGにおいては、 `defs$e 要素のどの子孫も描画されないものと見なされる。 ◎ An element is not rendered if it does not have an associated box. This can happen, for example, if the element or an ancestor is display:none. Host languages may define additional ways in which an element can be considered not rendered; for example, in SVG, any descendant of a <defs> element is considered to be not rendered.

<!DOCTYPE html>
<script>
function navigateSlides() {
  var %currentSlide = ...;
  document.querySelector('#prev-slide').id = '';
  document.querySelector('#next-slide').id = '';
  %currentSlide.previousElementSibling.id = 'prev-slide';
  %currentSlide.nextElementSibling.id = 'next-slide';
}
</script>
<style>
.slide {
  /* 
`element^f 可能になるためには、積層~文脈にする必要がある。
◎
Need to be a stacking context to be element()-able.
 */
  position: relative;
}
#prev-preview, #next-preview {
  position: fixed;
  ...
}
#prev-preview { background: element(#prev-slide); }
#next-preview { background: element(#next-slide); }
</style>
<a id='prev-preview'>前の~slide</a>
<a id='next-preview'>次の~slide</a>
<section class='slide'>...</section>
<section class='slide current-slide'>...</section>
...

partial namespace `CSS$I {
  [`SameObject$] readonly attribute Map `elementSources@m;
};

<script>
var %bg = document.createElement('canvas');
%bg.height = 200;
%bg.width = 1000;
drawFancyBackground(%bg);
CSS.elementSources.set('fancy', %bg);
</script>
<style>
h1 {
  background-image: element(#fancy);
}
</style>

4.1. ~objの~sizing： `object-fit^p ~prop

`object-fit$p ~propは、置換~要素の内容が，その使用~横縦幅により確立される~boxに，どのように収められるべきかを指定する。 ◎ The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

【 以下、 ~level 3 の内容 と同じ部分 — “L3” と記されている箇所 — の和訳は省略する。 】

`fill@v

L3 ◎ The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.

`none@v

L3 ◎ The replaced content is not resized to fit inside the element’s content box: determine the object’s concrete object size using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.

`contain@v

L3 ◎ The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.

`scale-down$v も併用された場合、内容は［ `none$v, `contain$v ］のうち，`実obj~size$が小さくなる方が指定されたかのように~sizeされる。 ◎ If the scale-down flag is used, size the content as if none or contain were specified, whichever would result in a smaller concrete object size.

注記： `none$v, `contain$v の両者とも内容の内在的~縦横比を保たせるので、大きさの比較は可能になる。 ◎ Note: Both none and contain respect the content’s intrinsic aspect ratio, so the concept of "smaller" is well-defined.

`cover@v

L3 ◎ The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.

`scale-down$v も併用された場合、内容は［ `none$v, `cover$v ］のうち，`実obj~size$が小さくなる方が指定されたかのように~sizeされる。 ◎ If the scale-down flag is used, size the content as if none or cover were specified, whichever would result in a smaller concrete object size.

注記： `none$v, `cover$v の両者とも内容の内在的~縦横比を保たせるので、大きさの比較は可能になる。 ◎ Note: Both none and cover respect the content’s intrinsic aspect ratio, so the concept of "smaller" is well-defined.

`scale-down@v

`contain scale-down^v と等価。 ◎ Equivalent to contain scale-down.

L3 ◎ If the content does not completely fill the replaced element’s content box, the unfilled space shows the replaced element’s background. Since replaced elements always clip their contents to the content box, the content will never overflow. See the object-position property for positioning the object with respect to the content box.

注記： L3 ◎ Note: The object-fit property has similar semantics to the fit attribute in [SMIL10] and the <meetOrSlice> parameter on the preserveAspectRatio attribute in [SVG11].

注記： L3 ◎ Note: Per the object size negotiation algorithm, the concrete object size (or, in this case, the size of the content) does not directly scale the object itself - it is merely passed to the object as information about the size of the visible canvas. How to then draw into that size is up to the image format. In particular, raster images always scale to the given size, while SVG uses the given size as the size of the "SVG Viewport" (a term defined by SVG) and then uses the values of several attributes on the root <svg> element to determine how to draw itself.

5.1. 画像~解像度の上書き法： `image-resolution^p ~prop

`画像~解像度@ は、単位~長さあたりの画像~画素~数として定義される。 例えば、~inchあたりの画素~数。 画像~形式には、画像の解像度についての情報を記録するものもある。 この情報は、整形~処理-にあたって画像の実際の~sizeを決定する補助になり得るが、誤ったものにもなり得るので，その場合には，無視されるべきである。 ~CSSの既定では、 ~CSS `px$u 単位が 1 画像~画素に等しい解像度と見做すが、 `image-resolution$p ~propにより，他の解像度も利用できるようになる。 ◎ The image resolution is defined as the number of image pixels per unit length, e.g., pixels per inch. Some image formats can record information about the resolution of images. This information can be helpful when determining the actual size of the image in the formatting process. However, the information can also be wrong, in which case it should be ignored. By default, CSS assumes a resolution of one image pixel per CSS px unit; however, the image-resolution property allows using some other resolution.

`image-set$f 記法は、画像の内在~解像度を改め得る — それは、この~propを設定しなくても，自動的に尊守されるのが理想的だが【？】。 これをどう~~解決すべきか？ 初期値を、 “~CSSが他を~~指示しない限り `1dppx^v とする” を意味する `auto^v に変えるか？ `image-resolution^p は、解像度が~CSSにおける他の何かで設定された画像には効果がないようにするか？ あるいは、 `image-set$f を，それが常に何らかの方法で `1dppx^v 画像を生産するように，どうにか wordsmithing するか？ ◎ The image-set() notation can alter the intrinsic resolution of an image, which ideally would be automatically honored without having to set this property. How should we best address this? Change the initial value to auto, meaning "1dppx, unless CSS says otherwise"? Say that image-resolution has no effect on images whose resolution was set by something else in CSS? Or somehow wordsmithing image-set() in some way such that it always produces 1dppx images somehow?

`image-resolution$p ~propは、［［ 要素~内／要素~上 ］で利用されるすべての~raster画像 ］の`内在~解像度$を，指定する。 それは、内容~画像（例えば，`置換~要素$や`生成内容$）にも, 装飾的な画像（ `background-image$p など）にも影響する。 画像の `内在~解像度@ は、画像の`内在~寸法$を決定するために利用される。 各種 値の意味は： ◎ The image-resolution property specifies the intrinsic resolution of all raster images used in or on the element. It affects both content images (e.g. replaced elements and generated content) and decorative images (such as background-image). The intrinsic resolution of an image is used to determine the image’s intrinsic dimensions. Values have the following meanings:

`resolution$t

内在~解像度を数値的に指定する。 この場合の 1 “~dot” は， 1 画像~画素に対応する。 ◎ Specifies the intrinsic resolution explicitly. A "dot" in this case corresponds to a single image pixel.

【 すなわち、［ `css-values-3$r による `resolution^t の定義 ］に記されている “~dot” は 1 画像~画素と解釈される。 】

`from-image@v

画像の内在~解像度は、画像~形式から指定される。 画像が自前の解像度を指定していない場合、 `resolution$t が明示的に指定されていれば，それが利用され、他の場合は既定の `1dppx^v になる。 ◎ The image’s intrinsic resolution is taken as that specified by the image format. If the image does not specify its own resolution, the explicitly specified resolution is used (if given), else it defaults to 1dppx.

`snap@v

この~keywordが伴われている `resolution$t は、 1 画像~画素が機器~画素の整数~倍に対応するような，最も近い値に丸めた結果に算出される。 解像度が画像からとられる【 `from-image$v が供されている】場合、内在~解像度の使用値は，画像~自身による解像度を同様に調整した結果になる。 ◎ If the "snap" keyword is provided, the computed <resolution> (if any) is the specified resolution rounded to the nearest value that would map one image pixel to an integer number of device pixels. If the resolution is taken from the image, then the used intrinsic resolution is the image’s native resolution similarly adjusted.

SVG などの~vector形式には、内在~解像度はない。 この~propは、~vector画像には効果がない。 ◎ As vector formats such as SVG do not have an intrinsic resolution, this property has no effect on vector images.

img.high-res {
  image-resolution: 300dpi;
}

img { image-resolution: from-image }

img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }

img { image-resolution: 300dpi }

img { image-resolution: 300dpi snap; }

img { image-resolution: snap from-image; }