You probably already know how to use media-specific CSS to provide a suitable layout for the printed page.

But how great would it be to be able to go further and provide a better print alternative through the use of specific high-resolution images specifically for print? Awesome? Here’s how.

HTML image sizing
HTML and CSS allow us to force images to display in a different size than their native dimensions. I recently began wondering whether higher resolution devices like printers might be able to use the pixels omitted by the relatively low resolutions intended for screen viewing

So I began an experiment to compare the way resized images look on screen to their appearance in print.

I made the following images:


This is happening because the image sizes are being forced down while their resolution (dpi) is being forced up. The first image is made up of 100 pixels (102), whereas the second crams in 2500 pixels (502), and the last a whopping 10,000 pixels (1002) into the same space. Printers can utilise these extra pixels to produce a higher quality image because print resolution typically ranges from 300dpi up to 1200dpi, while screen resolution is usually only 72dpi to 96dpi.

What this means
While we can create images for use on screen, we can also create larger images and force their size down (and their dpi up) for use by printers. We can make hi-res logos and headings, 300dpi photos, and even images specifically needed for printed pages—and serve up these print-specific images using print-media CSS.

Putting it into practice
We want to make a header for a website that includes a white logo on a dark background, but will print out as a solid black on white at a higher resolution.

We start by creating a lo-res/screen version of the logo (130×100px GIF at 3KB). We then make a special hi-res/print version of this logo by increasing the pixel count by five (650×500px GIF at 10KB).

We put both the screen version and print version on the page and set the size of the print version to be the same as the screen version. Then CSS allows us to hide the print version of the image when displaying the page on a screen and then use it to replace the screen version when the page is printed.

Hiding the print version without CSS
We can also use HTML’s img element, together with its height and width attributes, to force resize any image—even a large, hi-res image—down to a 1×1px dot on a web page:

<img alt="" height="1" width="1" />We can then override these height and width settings in the print-media CSS:

img { height: 30px; width: 30px; }Even when CSS is turned off, the HTML height and width attributes we applied to the img element make that image easy to overlook. (After all, it’s only a one-pixel “dot” on the page.)

Note: Most browsers don’t resample an image if it is scaled—so that one pixel “dot” is actually a pixel selected directly from the original image. If you manage to locate this pixel and make it the same colour as the page or background, then it is entirely invisible. For some headers, I might use the one-pixel dot as a “skip to content” link.

I have experimented with various image replacement (IR) techniques. The version I’m using here works as you would expect: include the image inside the HTML tag along with the text so that you can overpaint the usual background image that is the screen version. Depending on your needs and project requirements, you could integrate the technique with many other popular IR methods.

Caveat emptor
Like many CSS techniques that extend web functionality, this approach can pose some problems. Depending on the demands of your project, you may find that including an extraneous image alongside the screen version is too much of a semantic compromise. You may also determine that it’s too much work for too little gain or take issue with the integration of screen and print content into a single document structure.

These are all valid points, and it’s up to you to decide if and when this technique will be useful for you. Some other technical aspects to consider:

Resizing doesn’t work for CSS background images.
“Hidden” images will show up with CSS turned off (unless you control the size in the <img> tag).
Extra images will increase bandwidth usage.
On the plus side, I have yet to find a modern browser that this technique doesn’t work in. Any browser that understands CSS media types should be able to support this technique. Additionally, this technique is not doing anything like cloaking text or HTML elements with colour or visibility in a way that is likely to look deceitful to search engines.

One question that still intrigues me is whether all browsers download image files that are referenced in a print style sheet but not in the screen style sheet or in the markup? The limited number of browsers I’ve tested do appear to download the images whether the user prints the page or not.

Try it, you’ll like it
Here’s a color logo that prints out as high-resolution black and white line-art (using image replacement in CSS):


Book Whitman—Antique Manucripts
Years ago I used large format cameras for landscape and scenic photography: a vintage 1950s Crown Graphic 4"x5" press camera and a massive, heavy Linhof 4"x5" studio camera. I had a black and white darkroom in my basement and loaded and processed my own sheet film for these cameras. Big enlargements from 4"x5" negatives can be incredibly sharp and grain-free, much finer than even the sharpest 35mm transparency or negative. The problem with these cameras, at least for me, was the sheer inconvenience of traveling with them. They are big, very big, and heavy, very heavy. And the the sheet film must be loaded into bulky holders, two sheets per holder. A stack of four or five film holders for my Crown Graphic, for eight or ten exposures, probably takes up about as much room as a twenty-roll brick of Fuji Velvia 35mm film canisters. I could take boxes of sheet film and a few holders and reload them in the field, but this really requires a dust-free, completely dark environment to do successfully. Perhaps I just wasn't committed enough to the principles of large format landscape photography, but due to these hassle factors, most of my large format exposures were taken within a few miles of my home.

More recently, in a quest to achieve similar high-resolution results with portable, travel-friendly 35mm cameras, I've begun using image-stitching software to assemble huge tiled and panoramic images. There are a number of commercial software packages which can assemble such images, some with more features and capabilities than others. I actually prefer using a free image stitching software package called Panorama Tools. Its ease of use is definitely on the difficult end of the scale, but it is probably the most feature-rich and powerful stitcher currently available, free or otherwise. There are very good tutorials on using Panorama Tools already published on the internet elsewhere, so rather than provide another tutorial on using a particular stitching package, I'll simply show a case study on producing a stitched image mosaic.

I make a distinction between an image mosaic and a stitched panoramic image. By mosaic, I mean a grid (two or more rows of images) of photographs that, when stitched together, resemble the field of view of a single, rectilinear wide-angle lens. By stitched panoramic image I mean a single row of photographs (actually you could use a multi-row grid of photographs as well) that, when stitched together, resemble the panoramic image created by a rotating-lens panoramic camera (like the RoundShot Super 35). Incidentally, Panorama Tools has options to build a stitched image using either lens type, rectilinear (single, wide-angle lens) or cylindrical (rotating-lens which 'paints' an image onto a strip of film as it rotates, as if the film-plane were curved like the inside of a cylinder). In the example Atlanta skyline mosaic below, I've chosen to use a rectilinear projection: the final result approximates shooting the same scene with a large-format camera with a wide-angle lens.

The first step in creating the mosaic is to shoot a series of photographs with overlapping fields of view. Here I've overlapped each adjacent pair of images by perhaps 25%. This shoot was done after sundown and the low light necessitated long shutter speeds. You may notice that the car headlight and taillight streaks in the individual frames are often cut off by the frame boundaries. When I stitched together the final image, I had to hand-edit some regions of the frame to hide these discontinuities.