Replacing an image for printing with CSS

Sometimes, you might want to use different images for printed and viewed on screen images, for instance to allow for a high-resolution printed image, but a low-resolution image for display on screen. This can be done using CSS.

When printed (try Print Preview) the image above should be purple, when viewed otherwise it should be yellow. This code is used:

<img src="yellow.png" ... id="flower">

@media print {
 #flower { content: url(purple.png); }
}

An alternative method, which does not require a CSS rule for each image, is to put two images on the page and hide one of them.

<img src="cyan.png" ... class="screen">
<img src="green.png" ... class="print">

@media screen,tv,projection {
 .print { display: none; }
}
@media print {
 .screen { display: none; }
}

You should see a cyan image normally, and a green image for printing.

However, in a non-CSS-aware browser you will see (and print) both images. With the first method, the yellow image would be printed if the browser did not support the appropriate CSS.