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

"Spartanicus" <me (AT) privacy (DOT) net> schrieb im Newsbeitrag
news:m0nke0dl9nm4gekfm5f723kt8c5ngcn4he (AT) news (DOT) spartanicus.utvinternet.ie...

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

img src="lowres.jpg" ...
a href="highres.jpg">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
the
high res images included.

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

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

*Roger Shrubber* <roger128shrubber (AT) hotmail (DOT) 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="withhires" 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

Christoph Paeper wrote:

With /hackish/ HTML and CSS3:

img class="withhires" 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.)

*Johannes Koch* <koch (AT) w3development (DOT) de>:

Christoph Paeper wrote:

With /hackish/ HTML and CSS3:
img class="withhires" 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

Christoph Paeper wrote:

*Johannes Koch* <koch (AT) w3development (DOT) de>:

Christoph Paeper wrote:

With /hackish/ HTML and CSS3:
img class="withhires" 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.)

@import "disclaimer.inc";

*Johannes Koch* <koch (AT) w3development (DOT) 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.

Mark Tranchant <mark (AT) tranchant (DOT) plus.com> wrote

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,projection [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

On Wed, 07 Jul 2004 18:38:27 +0200, Christoph Paeper
<christoph.paeper (AT) nurfuerspam (DOT) 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