Using low-res images for screen, high-res for printing

[Roger Shrubber]

Hello all

I have created a page which has several pictures on it. Each picture is
surrounded by a frame made from actual photos of real picture frames,
consisting of four corner tiles and four repeating side tiles.

I would like the on-screen display to use low-res versions (96 dpi) of the
images, to ensure fast loading. But I would like the printed version to
use high-res versions (300 dpi or more). The printed page should be
identical in appearance to the on-screen page, but just with more detail in
the images.

Can I do this using only CSS, with @media screen and @media print?
Thanks in advance.

roger


(BTW, I can get the effect I want using different HTML for the screen and
print. By setting the width and height of an IMG tag, I force it to be a
specific size regardless of the pixel dimensions of the image it contains.
If the image is scaled down in this way, print quality improves a lot.
But to my knowledge, I cannot set the IMG tag to have a different src for
print and screen media using only CSS. Nor can I tile such images easily.)

[Markus Ernst]

"Spartanicu s" <[e-mail] > schrieb im Newsbeitrag
news:m0******** *************** *********@news. spartanicus.utv internet.ie...

"Markus Ernst" <derernst@NO#SP #AMgmx.ch> wrote:

<img src="lowres.jpg " ...>
<a href="highres.j pg">High resolution version for printing</a>

This is only suitable if you want to print the image seperately. If I
understand the OP correctly he wants to print out his page layout with thehigh res images included.

Create a copy of the lowres html page with the highres image on it.

Ahem... yes, that's easier :-)

[Christoph Paeper]

*Roger Shrubber* <ro************ **@hotmail.com> :

I would like the on-screen display to use low-res versions (96 dpi) of
the images, to ensure fast loading. But I would like the printed
version to
use high-res versions (300 dpi or more).
Well, FlashPix would have promised an answer.
Can I do this using only CSS, with @media screen and @media print?

With /hackish/ HTML and CSS3:

<img class="withhire s" src="lowres.img " longdesc="hires .img" alt="foo">

@media print {
img.withhires {content: attr(longdesc, uri)}
}

--
"For every human problem, there is a neat, simple solution;
and it is always wrong." H. L. Mencken

[Johannes Koch]

Christoph Paeper wrote:

With /hackish/ HTML and CSS3:

<img class="withhire s" src="lowres.img " longdesc="hires .img" alt="foo">

@media print {
img.withhires {content: attr(longdesc, uri)}
}

That's not a hack any more. That's böse.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Christoph Paeper]

*Johannes Koch* <ko**@w3develop ment.de>:

Christoph Paeper wrote:

With /hackish/ HTML and CSS3:
<img class="withhire s" src="lowres.img " longdesc="hires .img"
alt="foo">
@media print {
img.withhires {content: attr(longdesc, uri)}}

That's not a hack any more. That's böse.

Of course, but did I mention that hires.img is content-negotiated and only
returns an image, when the Accept header didn't include 'text/html'
explicitly?
Er, haven't tested yet if or how UAs modify their HTTP headers for CSS's
'content'. They usually do alter it for 'src'.

O N L Y D O T H I S A T L O C A L H O S T, K I D S!

--
"Music is essentially useless, as life is."
George Santayana

[Johannes Koch]

Christoph Paeper wrote:

*Johannes Koch* <ko**@w3develop ment.de>:

Christoph Paeper wrote:

With /hackish/ HTML and CSS3:
<img class="withhire s" src="lowres.img " longdesc="hires .img"
alt="foo">
@media print {
img.withhires {content: attr(longdesc, uri)}}

That's not a hack any more. That's böse.

Of course, but did I mention that hires.img is content-negotiated and
only returns an image, when the Accept header didn't include
'text/html' explicitly?

AFAIK, IE doesn't mention 'text/html' in its Accept header. And AFAIK at
least some screean readers / voice browsers use IE. So they will get an
image when activating the long description?

--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Brian]

Johannes Koch wrote:

AFAIK, IE doesn't mention 'text/html' in its Accept header.

That is correct. It includes several image formats, MS binary formats
(e.g., msword), and, finally, */*.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[Christoph Paeper]

@import "disclaimer.inc ";

*Johannes Koch* <ko**@w3develop ment.de>:

Christoph Paeper wrote:

did I mention that hires.img is content-negotiated and only returns an
image, when the Accept header didn't include 'text/html' explicitly?
AFAIK, IE doesn't mention 'text/html' in its Accept header.

Correct, I forgot. Do UAs put the CSS's URL into the Referer for 'url()'?
So they will get an image when activating the long description?

Yes, blame stupid IE! Of course you could _abuse_ the 'title' or 'alt'
attributes as well.

--
Useless Fact #15:
America was named after the Ostrogoth royal house. Indirectly.

[Roger Shrubber]

Mark Tranchant <ma**@tranchant .plus.com> wrote in message news:<Xn******* ************@st ones.force9.net >...

Roger Shrubber wrote:

I would like the on-screen display to use low-res versions (96 dpi) of the
images, to ensure fast loading. But I would like the printed version to
use high-res versions (300 dpi or more). The printed page should be
identical in appearance to the on-screen page, but just with more detail in
the images.

Can I do this using only CSS, with @media screen and @media print?

I *think* so (untested).

Build your page using <div>s for the images, assigning them an ID and no
other attribute [1].

In the separate print and screen,projecti on [2] CSS files, set the <div>
dimensions and appropriate image as the <div> background.

This is what I had first hoped would work, however the background image is
not scaled to fit the div - it is simply tiled until the div is filled.

For "@media screen", one image pixel corresponds to one on-screen pixel.
For "@media print", the browser appears to come up with some arbitrary ratio
for image pixels to printer pixels.

roger

[Claire Tucker]

On Wed, 07 Jul 2004 18:38:27 +0200, Christoph Paeper
<ch************ **@nurfuerspam. de> wrote:

Yes, blame stupid IE! Of course you could _abuse_ the 'title' or 'alt'
attributes as well.

I tried this the other day to add CSS-only (non-essential) headings to
DIV elements using :before. It worked like a charm, except for the
fact that IE and FireFox of course decided to make the entire DIV
element have a tooltip!

-Claire