By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,133 Members | 1,092 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,133 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.)
Jul 20 '05 #1
Share this Question
Share on Google+
18 Replies


P: n/a
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.
Jul 20 '05 #2

P: n/a
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
Jul 20 '05 #3

P: n/a
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.
Jul 20 '05 #4

P: n/a
Spartanicus <me@privacy.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
Jul 20 '05 #5

P: n/a
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! =-----
Jul 20 '05 #6

P: n/a
"Spartanicus" <me@privacy.net> 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
Jul 20 '05 #7

P: n/a
"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
Jul 20 '05 #8

P: n/a
"Spartanicus" <me@privacy.net> schrieb im Newsbeitrag
news:iq********************************@news.spart anicus.utvinternet.ie...
Spartanicus <me@privacy.net> 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
Jul 20 '05 #9

P: n/a
"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
Jul 20 '05 #10

P: n/a
"Spartanicus" <me@privacy.net> 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 :-)
Jul 20 '05 #11

P: n/a
*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
Jul 20 '05 #12

P: n/a
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.)
Jul 20 '05 #13

P: n/a
*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
Jul 20 '05 #14

P: n/a
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.)
Jul 20 '05 #15

P: n/a
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/
Jul 20 '05 #16

P: n/a
@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.
Jul 20 '05 #17

P: n/a
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
Jul 20 '05 #18

P: n/a
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
Jul 20 '05 #19

This discussion thread is closed

Replies have been disabled for this discussion.