How to embed images in higher resolutions for printing

Posted Over 12 years ago. Visible to the public.

When you print out a HTML pages, all raster images (like PNGs) will appear aliased. This is because a printer's resolution is usually much higher than that of a computer screen.

If an image absolutely must look awesome when printed, a solution is to embed the image in much higher solution than needed (e.g. four times the horizontal resolution), then scale it down to the desired width using CSS.

Note that this will slightly alter the image's appearance on the screen because browsers will scale down the image using an anti-aliasing method that looks different from that in e.g. Photoshop.

Henning Koch
Last edit
About 12 years ago
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2012-01-04 13:00)