How to embed images in higher resolutions for printing

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.