Skip to content

Commit 0a22616

Browse files
fantasaifantasai
committed
Rewrite image-resolution to talk about 'intrinsic resolution' rather than requiring the UA to render at a particular resolution, since that's wrong any time the image isn't intrinsically sized
1 parent 6890bb7 commit 0a22616

2 files changed

Lines changed: 159 additions & 124 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 85 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -357,41 +357,23 @@ <h2 id=resolution-units><span class=secno>2. </span> Resolution Units: the
357357
<dd>dots per &lsquo;<code class=css>px</code>&rsquo; unit
358358
</dl>
359359

360-
<p>The &lt;resolution> unit represents the size of a single "dot" of an
361-
image. For raster images, a dot is an image pixel. A &lt;resolution>
362-
defines how many of these dots fit in a CSS &lsquo;<code
363-
class=property>in</code>&rsquo;, &lsquo;<code
360+
<p>The &lt;resolution> unit represents the size of a single "dot" in a
361+
graphical representation by indicating how many of these dots fit in a CSS
362+
&lsquo;<code class=property>in</code>&rsquo;, &lsquo;<code
364363
class=property>cm</code>&rsquo;, or &lsquo;<code
365-
class=property>px</code>&rsquo; so that images can be sized accordingly.
366-
The default resolution of raster images in CSS is &lsquo;<code
367-
class=css>1dppx</code>&rsquo;, which is equivalent to &lsquo;<code
368-
class=css>96dpi</code>&rsquo;. The concept of "resolution" does not apply
369-
to vector image formats like SVG; generally, this means that any attempt
370-
to change the resolution of a vector image is simply meaningless.
371-
Individual uses of the &lt;resolution> value define precisely what effects
372-
they have on raster and vector images.
373-
374-
<div class=example>
375-
<p>Printers tend to have substantially higher resolution than computer
376-
monitors; due to this, an image that looks fine on the screen may look
377-
pixellated when printed out. A &lt;resolution> may be used in the
378-
&lsquo;<a href="#image-resolution0"><code
379-
class=property>image-resolution</code></a>&rsquo; property to embed a
380-
high-resolution image into the document that maintains an appropriate
381-
size, ensuring attractive display both on screen and on paper:</p>
382-
383-
<pre class=css><code>
384-
img.high-res {
385-
image-resolution: 300dpi;
386-
}</code></pre>
387-
388-
<p>With this set, an image meant to be 5 inches wide that was saved at
389-
300dpi will actually display as 5 inches wide; without this set, the
390-
image would display as approximately 15.6 inches wide since the image is
391-
15000 image pixels across, and by default there are 96 image pixels per
392-
inch.</p>
393-
</div>
394-
<!-- ====================================================================== -->
364+
class=property>px</code>&rsquo;. For uses, see e.g. the &lsquo;<code
365+
class=css>resolution</code>&rsquo; media query in [[MEDIQUERIES]] or the
366+
&lsquo;<a href="#image-resolution0"><code
367+
class=property>image-resolution</code></a>&rsquo; property defined below.
368+
369+
<p class=note>Note that due to the 1:96 fixed ratio of CSS &lsquo;<code
370+
class=css>in</code>&rsquo; to CSS &lsquo;<code class=css>px</code>&rsquo;,
371+
&lsquo;<code class=css>1dppx</code>&rsquo; is equivalent to &lsquo;<code
372+
class=css>96dpi</code>&rsquo;. This corresponds to the default resolution
373+
of images displayed in CSS: see &lsquo;<code
374+
class=property>image-reslution</code>&rsquo;.
375+
<!-- ====================================================================== -->
376+
395377

396378
<h2 id=image><span class=secno>3. </span> Image Values: the &lt;image> type</h2>
397379

@@ -2043,7 +2025,7 @@ <h3 id=image-resolution><span class=secno>6.1. </span> Overriding Image
20432025
<tr>
20442026
<th>Value:
20452027

2046-
<td>[from-image || &lt;resolution>] snap?
2028+
<td>[from-image || &lt;resolution>] && snap?
20472029

20482030
<tr>
20492031
<th>Initial:
@@ -2068,56 +2050,86 @@ <h3 id=image-resolution><span class=secno>6.1. </span> Overriding Image
20682050
<tr>
20692051
<th>Computed value:
20702052

2071-
<td>specified value
2053+
<td>as specified, except with &lt;resolution> possibly altered by
2054+
computing for &lsquo;<code class=css>snap</code>&rsquo; (see below)
20722055
</table>
20732056

20742057
<p>The &lsquo;<a href="#image-resolution0"><code
20752058
class=property>image-resolution</code></a>&rsquo; property specifies the
2076-
resolution of all images used in or on the element: images in content
2077-
(e.g. replaced elements and generated content), background images, list
2078-
markers, etc. Values have the following meanings:
2059+
intrinsic resolution of all raster images used in or on the element. (As
2060+
vector formats such as SVG do not have an intrinsic resolution, this
2061+
property has no effect on vector images.) The <dfn
2062+
id=intrinsic-resolution>intrinsic resolution</dfn> of an image is used to
2063+
determine the image's <i>intrinsic size</i>. Affected images include
2064+
images in the element's content (e.g. replaced elements and/or generated
2065+
content), background images,list markers, etc. Values have the following
2066+
meanings:
20792067

20802068
<dl>
2081-
<dt>from-image
2069+
<dt>&lt;resolution>
20822070

2083-
<dd>The image must be rendered at the image's native resolution. If the
2084-
image does not have a native resolution or the UA cannot determine it,
2085-
the image must instead be rendered at the specified resolution (see the
2086-
following value). If a resolution is not specified, the image must be
2087-
rendered at &lsquo;<code class=css>1dppx</code>&rsquo; (the default
2088-
resolution).
2071+
<dd>Specifies the intrinsic resolution explicitly.
20892072

2090-
<dt>&lt;resolution>
2073+
<dt>from-image
20912074

2092-
<dd>If the "from-image" keyword is not specified, or it is specified and
2093-
the native resolution cannot be determined, the image must be rendered at
2094-
the specified resolution.
2075+
<dd>The image's intrinsic resolution is taken as that specified by the
2076+
image format. If the image does not specify its own resolution, the
2077+
explicitly specified resolution is used (if given), else it defaults to
2078+
&lsquo;<code class=css>1ddpx</code>&rsquo;.
20952079

20962080
<dt>snap
20972081

2098-
<dd>If the "snap" keyword is provided, and the specified resolution is
2099-
such that one image pixel would be larger than one device pixel, the
2100-
image must be rendered at the specified resolution, rounded to the
2101-
nearest value that would map one image pixel to an integer number of
2102-
device pixels. Otherwise, the image must be rendered at the specified
2103-
resolution, rounded to the nearest value that would map an integer number
2104-
of image pixels to one device pixel.
2082+
<dd>If the "snap" keyword is provided, the computed &lsquo;<a
2083+
href="#ltresolution"><code class=css>&lt;resolution></code></a>&rsquo;
2084+
(if any) is the specified resolution rounded to the nearest value that
2085+
would map one image pixel to an integer number of device pixels. If the
2086+
resolution is taken from the image, then the used intrinsic resolution is
2087+
the image's native resolution similarly adjusted.
21052088
</dl>
21062089

2107-
<p>This property must have no effect on vector images, as vector images do
2108-
not have a concept of "resolution".
2090+
<div class=example>
2091+
<p>Printers tend to have substantially higher resolution than computer
2092+
monitors; due to this, an image that looks fine on the screen may look
2093+
pixellated when printed out. The &lsquo;<a
2094+
href="#image-resolution0"><code
2095+
class=property>image-resolution</code></a>&rsquo; property can be used to
2096+
embed a high-resolution image into the document and maintain an
2097+
appropriate size, ensuring attractive display both on screen and on
2098+
paper:</p>
2099+
2100+
<pre class=css><code>
2101+
img.high-res {
2102+
image-resolution: 300dpi;
2103+
}</code></pre>
2104+
2105+
<p>With this set, an image meant to be 5 inches wide at 300dpi will
2106+
actually display as 5in wide; without this set, the image would display
2107+
as approximately 15.6in wide since the image is 15000 image pixels
2108+
across, and by default CSS displays 96 image pixels per inch.</p>
2109+
</div>
21092110

21102111
<div class=example>
2111-
<p>This rule specifies that the UA should use the image resolution found
2112-
in the image itself, falling back to 1 image pixel per CSS &lsquo;<code
2112+
<p>Some image formats can encode the image resolution into the image data.
2113+
This rule specifies that the UA should use the image resolution found in
2114+
the image itself, falling back to 1 image pixel per CSS &lsquo;<code
21132115
class=css>px</code>&rsquo; unit.</p>
21142116

21152117
<pre class=css>img { image-resolution: from-image }</pre>
2118+
2119+
<p>These rules both specify that the UA should use the image resolution
2120+
found in the image itself, but if the image has no resolution, the
2121+
resolution is set to 300dpi instead of the default &lsquo;<code
2122+
class=css>1dppx</code>&rsquo;.</p>
2123+
2124+
<pre>
2125+
img { image-resolution: from-image 300dpi }
2126+
img { image-resolution: 300dpi from-image }
2127+
</pre>
21162128
</div>
21172129

21182130
<div class=example>
2119-
<p>Using this rule, the image resolution is set to 300dpi and the
2120-
resolution in the image, if any, is ignored.</p>
2131+
<p>Using this rule, the image resolution is set to 300dpi. (The resolution
2132+
in the image, if any, is ignored.)</p>
21212133

21222134
<pre>img { image-resolution: 300dpi }</pre>
21232135

@@ -2126,17 +2138,15 @@ <h3 id=image-resolution><span class=secno>6.1. </span> Overriding Image
21262138
map to 1 device pixel):</p>
21272139

21282140
<pre>img { image-resolution: 300dpi snap; }</pre>
2129-
</div>
21302141

2131-
<div class=example>
2132-
<p>These rules both specify that the UA should use the image resolution
2133-
found in the image itself. If the image has no resolution, the resolution
2134-
is set to 300dpi.</p>
2142+
<p>The &lsquo;<code class=css>snap</code>&rsquo; keyword can also be used
2143+
when the resolution is taken from the image. In this rule:
21352144

2136-
<pre>
2137-
img { image-resolution: from-image 300dpi }
2138-
img { image-resolution: 300dpi from-image }
2139-
</pre>
2145+
<pre>img { image-resolution: snap from-image; }</pre>
2146+
2147+
<p>An image declaring itself as 300dpi will, in the situation above,
2148+
display at 288dpi (3 image pixels per device pixel) whereas an image
2149+
declaring 72dpi will render at 96dpi (1 image pixel per device pixel).
21402150
</div>
21412151
<!-- ====================================================================== -->
21422152

@@ -2606,6 +2616,9 @@ <h2 class=no-num id=index>Index</h2>
26062616
<li>intrinsic height, <a href="#intrinsic-height"
26072617
title="intrinsic height"><strong>5.1.</strong></a>
26082618

2619+
<li>intrinsic resolution, <a href="#intrinsic-resolution"
2620+
title="intrinsic resolution"><strong>6.1.</strong></a>
2621+
26092622
<li>intrinsic width, <a href="#intrinsic-width"
26102623
title="intrinsic width"><strong>5.1.</strong></a>
26112624

‎css3-images/Overview.src.html‎

Lines changed: 74 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -140,31 +140,15 @@ <h2 id='resolution-units'>
140140
<dd>dots per ''px'' unit</dd>
141141
</dl>
142142

143-
<p>The &lt;resolution> unit represents the size of a single "dot" of an image. For raster images,
144-
a dot is an image pixel. A &lt;resolution> defines how many of these dots fit in a CSS 'in', 'cm', or 'px' so that
145-
images can be sized accordingly. The default resolution of raster images in CSS is ''1dppx'',
146-
which is equivalent to ''96dpi''. The concept of "resolution" does not apply to vector image
147-
formats like SVG; generally, this means that any attempt to change the resolution of a vector
148-
image is simply meaningless. Individual uses of the &lt;resolution> value define precisely
149-
what effects they have on raster and vector images.</p>
143+
<p>The &lt;resolution> unit represents the size of a single "dot" in a
144+
graphical representation by indicating how many of these dots fit in a
145+
CSS 'in', 'cm', or 'px'.
146+
For uses, see e.g. the ''resolution'' media query in [[MEDIQUERIES]]
147+
or the 'image-resolution' property defined below.
150148

151-
<div class='example'>
152-
<p>Printers tend to have substantially higher resolution than computer monitors; due to this,
153-
an image that looks fine on the screen may look pixellated when printed out. A
154-
&lt;resolution> may be used in the 'image-resolution' property to embed a high-resolution
155-
image into the document that maintains an appropriate size, ensuring attractive display
156-
both on screen and on paper:</p>
157-
158-
<pre class='css'><code>
159-
img.high-res {
160-
image-resolution: 300dpi;
161-
}</code></pre>
162-
163-
<p>With this set, an image meant to be 5 inches wide that was saved at 300dpi will actually
164-
display as 5 inches wide; without this set, the image would display as approximately 15.6 inches
165-
wide since the image is 15000 image pixels across, and by default there are 96 image pixels per
166-
inch.</p>
167-
</div>
149+
<p class="note">Note that due to the 1:96 fixed ratio of CSS ''in'' to
150+
CSS ''px'', ''1dppx'' is equivalent to ''96dpi''. This corresponds to
151+
the default resolution of images displayed in CSS: see 'image-reslution'.
168152

169153
<!-- ====================================================================== -->
170154

@@ -1342,7 +1326,7 @@ <h3 id="image-resolution">
13421326
<tbody>
13431327
<tr>
13441328
<th>Value:
1345-
<td>[from-image || &lt;resolution>] snap?
1329+
<td>[from-image || &lt;resolution>] && snap?
13461330
<tr>
13471331
<th>Initial:
13481332
<td>1dppx
@@ -1357,59 +1341,97 @@ <h3 id="image-resolution">
13571341
<td>visual
13581342
<tr>
13591343
<th>Computed value:
1360-
<td>specified value
1344+
<td>as specified, except with &lt;resolution> possibly altered
1345+
by computing for ''snap'' (see below)
13611346
</table>
13621347

1363-
<p>The 'image-resolution' property specifies the resolution of all images used
1364-
in or on the element: images in content (e.g. replaced elements and generated
1365-
content), background images, list markers, etc. Values have the following
1366-
meanings:</p>
1348+
<p>The 'image-resolution' property specifies the intrinsic resolution of all
1349+
raster images used in or on the element. (As vector formats such as SVG do
1350+
not have an intrinsic resolution, this property has no effect on vector
1351+
images.) The <dfn>intrinsic resolution</dfn> of an image is used to determine
1352+
the image's <i>intrinsic size</i>. Affected images include images in the
1353+
element's content (e.g. replaced elements and/or generated content),
1354+
background images,list markers, etc.
1355+
Values have the following meanings:</p>
13671356

13681357
<dl>
1369-
<dt>from-image</dt>
1370-
<dd>The image must be rendered at the image's native resolution. If the image does not have a native resolution or the UA cannot determine it, the image must instead be rendered at the specified resolution (see the following value). If a resolution is not specified, the image must be rendered at ''1dppx'' (the default resolution).</dd>
1371-
13721358
<dt>&lt;resolution></dt>
1373-
<dd>If the "from-image" keyword is not specified, or it is specified and the native resolution cannot be determined, the image must be rendered at the specified resolution.</dd>
1359+
<dd>Specifies the intrinsic resolution explicitly.</dd>
1360+
1361+
<dt>from-image</dt>
1362+
<dd>The image's intrinsic resolution is taken as that specified by the
1363+
image format. If the image does not specify its own resolution, the
1364+
explicitly specified resolution is used (if given), else it defaults to
1365+
''1ddpx''.</dd>
13741366

13751367
<dt>snap</dt>
1376-
<dd>If the "snap" keyword is provided, and the specified resolution is such that one image pixel would be larger than one device pixel, the image must be rendered at the specified resolution, rounded to the nearest value that would map one image pixel to an integer number of device pixels. Otherwise, the image must be rendered at the specified resolution, rounded to the nearest value that would map an integer number of image pixels to one device pixel.</dd>
1368+
<dd>If the "snap" keyword is provided, the computed ''&lt;resolution>''
1369+
(if any) is the specified resolution rounded to the nearest value that
1370+
would map one image pixel to an integer number of device pixels.
1371+
If the resolution is taken from the image, then the used intrinsic
1372+
resolution is the image's native resolution similarly adjusted.</dd>
13771373
</dl>
13781374

1379-
<p>This property must have no effect on vector images, as vector images
1380-
do not have a concept of "resolution".</p>
1375+
<div class='example'>
1376+
<p>Printers tend to have substantially higher resolution than computer
1377+
monitors; due to this, an image that looks fine on the screen may look
1378+
pixellated when printed out.
1379+
The 'image-resolution' property can be used to embed a high-resolution
1380+
image into the document and maintain an appropriate size, ensuring
1381+
attractive display both on screen and on paper:</p>
1382+
1383+
<pre class='css'><code>
1384+
img.high-res {
1385+
image-resolution: 300dpi;
1386+
}</code></pre>
1387+
1388+
<p>With this set, an image meant to be 5 inches wide at 300dpi will actually
1389+
display as 5in wide; without this set, the image would display as approximately 15.6in
1390+
wide since the image is 15000 image pixels across, and by default CSS displays 96 image pixels per
1391+
inch.</p>
1392+
</div>
1393+
13811394

13821395
<div class="example">
1383-
<p>This rule specifies that the UA should use the image resolution
1396+
<p>Some image formats can encode the image resolution into the image data.
1397+
This rule specifies that the UA should use the image resolution
13841398
found in the image itself, falling back to 1 image pixel per CSS
13851399
''px'' unit.</p>
13861400

13871401
<pre class=css>img { image-resolution: from-image }</pre>
1402+
1403+
<p>These rules both specify that the UA should use the image resolution
1404+
found in the image itself, but if the image has no resolution, the
1405+
resolution is set to 300dpi instead of the default ''1dppx''.</p>
1406+
1407+
<pre>
1408+
img { image-resolution: from-image 300dpi }
1409+
img { image-resolution: 300dpi from-image }
1410+
</pre>
1411+
13881412
</div>
13891413

13901414
<div class="example">
1391-
<p>Using this rule, the image resolution is set to 300dpi and the
1392-
resolution in the image, if any, is ignored.</p>
1415+
<p>Using this rule, the image resolution is set to 300dpi. (The
1416+
resolution in the image, if any, is ignored.)</p>
13931417

13941418
<pre>img { image-resolution: 300dpi }</pre>
13951419

1396-
<p>This rule, on the other hand, if used when the screen's resolution is 96dpi, would instead render the image at 288dpi (so that 3 image pixels map to 1 device pixel):</p>
1420+
<p>This rule, on the other hand, if used when the screen's resolution
1421+
is 96dpi, would instead render the image at 288dpi (so that 3 image
1422+
pixels map to 1 device pixel):</p>
13971423

13981424
<pre>img { image-resolution: 300dpi snap; }</pre>
1399-
</div>
1400-
1401-
1402-
<div class="example">
1403-
<p>These rules both specify that the UA should use the image resolution
1404-
found in the image itself. If the image has no resolution, the
1405-
resolution is set to 300dpi.</p>
14061425

1407-
<pre>
1408-
img { image-resolution: from-image 300dpi }
1409-
img { image-resolution: 300dpi from-image }
1410-
</pre>
1426+
<p>The ''snap'' keyword can also be used when the resolution is taken
1427+
from the image. In this rule:
1428+
<pre>img { image-resolution: snap from-image; }</pre>
1429+
<p>An image declaring itself as 300dpi will, in the situation above,
1430+
display at 288dpi (3 image pixels per device pixel) whereas an image
1431+
declaring 72dpi will render at 96dpi (1 image pixel per device pixel).
14111432
</div>
14121433

1434+
14131435
<!-- ====================================================================== -->
14141436

14151437
<h3 id="image-orientation">

0 commit comments

Comments
 (0)