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

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

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.

roger128shrubber (AT) hotmail (DOT) 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

Spartanicus wrote:

roger128shrubber (AT) hotmail (DOT) 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 <me (AT) privacy (DOT) net> 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

Mark Tranchant wrote:

Spartanicus wrote:

roger128shrubber (AT) hotmail (DOT) 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! =-----

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

roger128shrubber (AT) hotmail (DOT) 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"

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

"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

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

Spartanicus <me (AT) privacy (DOT) net> 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

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

"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