Hirez CSS Printing

From Exterior Memory
Jump to: navigation, search

It's often useful to include two images in a webpage: one low resolution image for viewing on screen, that loads fast, and on high resultion image for printing.

In the following examples, the lowres.jpg image is 120x90 pixels (75dpi), while the highres.jpg image is 480x360 pixels (300dpi).

The solutions use the property of CSS that you can have a different style sheet for screen and print:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

The two working solutions are derived from the article High-Resolution Image Printing on A List Apart.


Alternative Images

This solution simply adds two images to the webpage, disabling the one for the other media type.

<p>
  <img src="lowres.jpg" class="screen" width="120" height="90" alt="My Image" />
  <img src="highres.jpg" class="print" width="120" height="90" alt="My Image" />
</p>

with in screen.css:

.print { display: none; }

and in print.css:

.screen { display: none; }

A disadvantage may be that while the "other" image is not shown, most browser will still download it, wasting bandwidth. All solutions share this disadvantage.

Background Images (non-functional)

One of the most natural solutions would be to include the lowres image to the webpage, and replace it with the highres image using the print.css style sheet.

This solution won't work:

<div class="imagebox">
  <img src="lowres.jpg" class="screen" width="120" height="90" alt="My Image" >
</div>

with in print.css:

.screen { display: none; }
	
.imagebox {
  width: 120px; height: 90px;
  background-image: url(highres.jpg);
}

highres.jpg is a 480x360 pixel image, which is fitted in a 120x90 box. However, it is not scaled, but cropped, so this does not lead to the desired result. In CSS2, there is no way to scale background images.

Background Images

A variant of the previous (non-functional) solution is to add the highres image to the webpage, and replace it with the the lowres image using CSS image replacement techniques. Due to this property, this solution is particularly useful for in combination with image replacement techniques.

<div class="imagebox">
  <img src="highres.jpg" class="print" width="120" height="90" alt="My Image" >
</div>

with in screen.css:

.print { display: none; }
	
.imagebox {
  width: 120px; height: 90px;
  background-image: url(lowres.jpg);
}

and in print.css:

.print { width: 120px; height: 90px; }

Note that the article High-Resolution Image Printing recommends to set the image to 1 pixel. I personally don't see the reason, though setting it to 0px may help tell browsers not to load the highres image by default:

<div class="imagebox">
  <img src="highres.jpg" class="print" width="0" height="0" alt="My Image" >
</div>

lowsrc (non-standard)

IN HTML, this could be solved with the lowsrc attribute:

<img src="highres.jpg" lowsrc="lowres.jpg" width="120" height="90" alt="My Image">

However, the lowsrc attribute is no longer valid in XHTML, so this is no longer considered a solution.