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.)

[Mark Tranchant]

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.

[1] except maybe a title attribute, as a poor substitute for the missing
alt attribute on the <img> element. Maybe you could include a link to
the image inside each <div> element, set to display:none in the CSS.
This would allow non-CSS browsers' users to view the images.

[2] You need to add the projection type, or full-screen Opera fails.

--
Mark.

[Spartanicus]

ro**************@hotmail.com (Roger Shrubber) wrote:

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.

@media screen{
..print{display:none}
}
@media print{
..screen{display:none}
}
<img src="lowres.jpg ... class="screen">
<img src="highres.jpg" ... class="print">

--
Spartanicus

[Mark Tranchant]

Spartanicus wrote:

ro**************@hotmail.com (Roger Shrubber) wrote:

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.

@media screen{
.print{display:none}
}
@media print{
.screen{display:none}
}
<img src="lowres.jpg ... class="screen">
<img src="highres.jpg" ... class="print">

Dammit. Why didn't I see that solution?!

Of course, a non-CSS browser will paint a rather strange page...

--
Mark.

[Spartanicus]

Spartanicus <[e-mail]> wrote:

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.

@media screen{
.print{display:none}
}
@media print{
.screen{display:none}
}
<img src="lowres.jpg ... class="screen">
<img src="highres.jpg" ... class="print">

Or better:

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

--
Spartanicus

[Matt]

Mark Tranchant wrote:

Spartanicus wrote:

ro**************@hotmail.com (Roger Shrubber) wrote:

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.

@media screen{
.print{display:none}
}
@media print{
.screen{display:none}
}
<img src="lowres.jpg ... class="screen">
<img src="highres.jpg" ... class="print">

Dammit. Why didn't I see that solution?!

Of course, a non-CSS browser will paint a rather strange page...

An alternative is to assign every image a different id:
<img src="lowres" ... id="someid">

@media print {
#someid { content: url('hires'); }
}

See <http://matt.blissett.me.uk/web/authoring/replace_printed_images_css/>
for an example of each method.

--
Matt
-----= Posted via Newsfeeds.Com, Uncensored Usenet News =-----
http://www.newsfeeds.com - The #1 Newsgroup Service in the World!
-----== Over 100,000 Newsgroups - 19 Different Servers! =-----

[Markus Ernst]

"Spartanicus" <[e-mail]> schrieb im Newsbeitrag
news:ph********************************@news.spart anicus.utvinternet.ie...

ro**************@hotmail.com (Roger Shrubber) wrote:

The printed page should be
identical in appearance to the on-screen page, but just with more detail inthe images.

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

@media screen{
.print{display:none}
}
@media print{
.screen{display:none}
}
<img src="lowres.jpg ... class="screen">
<img src="highres.jpg" ... class="print">

Are sure that
- highres.jpg won't be loaded if the page is called
- highres.jpg will be loaded by a new page call when the print command is
selected
?

If yes (cross browser), your solution is amazing, if no it could cause some
quite disturbing effects.

--
Markus

[Spartanicus]

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

Are sure that
- highres.jpg won't be loaded if the page is called
- highres.jpg will be loaded by a new page call when the print command is
selected
?
I hadn't tested it, it exposes various bugs in IE5.5, Mozilla, Opera 6
(who all load the "print" image on initial load) and Opera 7 (doesn't
load the "print" image initially, but fails to retrieve it when
printing), none of my browsers get it 100% right.
If yes (cross browser), your solution is amazing

It isn't, the correct way to do this is outlined in my follow up to
myself.

--
Spartanicus

[Markus Ernst]

"Spartanicus" <[e-mail]> schrieb im Newsbeitrag
news:iq********************************@news.spart anicus.utvinternet.ie...

Spartanicus <[e-mail]> wrote:

The printed page should be
identical in appearance to the on-screen page, but just with more detail inthe images.

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

@media screen{
.print{display:none}
}
@media print{
.screen{display:none}
}
<img src="lowres.jpg ... class="screen">
<img src="highres.jpg" ... class="print">

Or better:

<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.

So your solution will have to be extended to creating a PDF of the page
layout with the high res images at the server side (I think PHP should be
able to do this for example) and call that PDF instead of the high res
image.

--
Markus

[Spartanicus]

"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.

--
Spartanicus

[Markus Ernst]

"Spartanicus" <[e-mail]> schrieb im Newsbeitrag
news:m0********************************@news.spart anicus.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 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="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

[Johannes Koch]

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.)

[Christoph Paeper]

*Johannes Koch* <ko**@w3development.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

[Johannes Koch]

Christoph Paeper wrote:

*Johannes Koch* <ko**@w3development.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.)

[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**@w3development.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*******************@stones.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,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

[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