A List Apart


High-Resolution Image Printing

by Published in CSS, HTML, Interaction Design56 Comments

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:

Exhibit A: The images
10×10 pixel anti-aliased GIF50×50 pixel anti-aliased GIF100×100 pixel anti-aliased GIF
A 10×10 pixel anti-aliased GIF of a circleA 50×50 pixel anti-aliased GIF of a circleA 100×100 pixel anti-aliased GIF of a circle

Then I added these three images to an HTML page and used the img tag to force all three images display 10×10 pixels.

<img alt="" height="10" width="10" />

This left three circles that, while the same size, all looked slightly different:

Exhibit B: Screen Results
10×10 pixel GIF
      displayed at 10×10 pixels
      (file size 85 bytes)
50×50 pixel GIF
      displayed at 10×10 pixels
      (file size 323 bytes)
100×100 pixel GIF
      displayed at 10×10 pixels
      (file size 706 bytes)
A 10×10 pixel anti-aliased GIF of a circleA 50×50 pixel anti-aliased GIF of a circle forced to display at 10×10 pixelsA 100×100 pixel anti-aliased GIF of a circle forced to display at 10×10 pixels

The first circle looks a little nicer than the other two due to anti-aliasing. The other two images are anti-aliased, but because of the browser’s rather brutal pixel-culling when scaling, they look jagged.

The file sizes vary between the three images (85b to 706b). For simple GIFs like these, the real difference is negligible, but it is important to note that in larger JPEGs and PNGs the difference can be significant.

I printed the HTML page that contained the three images and discovered that the print results were actually the opposite of the screen results. The first circle appeared to be of the lowest quality, while the second and third circles looked better.

Exhibit C: Magnified Print Results
10×10 pixel GIF
      (file size 85 bytes)
50×50 pixel GIF
      (file size 323 bytes)
100×100 pixel GIF
      (file size 706 bytes)
A scan of the print quality of a 10×10 anti-aliased GIF (magnified)A scan of the print quality of a 50×50 anti-aliased GIF (magnified)A scan of the print quality of a 100×100 anti-aliased GIF (magnified)

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 utilize 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 color 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 color 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):

logo_printBook Whitman—Antique Manuscripts

And here’s a JPEG thumbnail that prints out as a high-resolution full color image (using two images):

Manuscript ExampleManuscript Example (Hi Res)

About the Author

56 Reader Comments

Load Comments