Printing high resolution images

Demonstrated here are 2 methods of using CSS to use higher resolution images for printing.

Method 1

This method displays the desired result in IE, Gecko and Opera.

High resolution image Low resolution image

CSS code used:

@media screen{.print{display:none}}

@media print{.screen{display:none}}

HTML code used:

<p><img src="img/high_res.png" width="263" height="50" alt="High resolution image" class="print"><img src="img/low_res.png" width="246" height="49" alt="Low resolution image" class="screen"></p>

Drawbacks:

UA bugs may cause both images to be loaded from the server.
When accessed sans CSS both images are rendered.

Method 2

This method needs UA support for URI based generated content.

Low resolution image

CSS code used:

@media screen{

.print{display:none}

.lowres:before{content:url(img/low_res.png)}

}

@media print{

p>span.screen2{display:none}

.highres:before{content:url(img/high_res.png)}

}

p>span img{display:none}

HTML code used:

<p><span class="print highres"></span><span class="screen2 lowres"><img src="img/low_res.png" width="246" height="49" alt="Low resolution image"></span></p>

Drawbacks:

If the document is printed without CSS enabled the low resolution image is used for the printout.