How to take a 300 DPI screenshot of a web page

Question

Ok, dumb question, the images on the page are all 72, so you can't have 300. But... what's the best way to print in as high resolution as possible on a brochure?

Solution 1

I don't think you can get a high resolution print from a generic web page keeping the layout perfectly right (so, if your objective is to illustrate how it looks on screen but with print quality, this should be a showstopper).

Even if the text and many elements are a kind of vectorial (scalable) graphic (i.e. in theory you could zoom the page so they are rendered bigger and enlarge the browser window to get an enlarged screenshot), many graphic elements ("normal" images) are raster graphic, that cannot be enlarged without ugly artifacts coming out.

Moreover, many layouts use pixels for sizes of various elements (which means that scaling things up and down may make the layout become a mess).

Solution 2

How about zooming in on the web-page before taking the screen-shot? Most modern browsers allow you to set a custom zoom level.

Note though that the images may not look as great as you would like. You can't do much about this without access to high-res version of the images.

Solution 3

If the browser re-renders for print, and a CSS compliant one should (to respect print display specific rules), then it should be rendering to the resolution of the output device. If you can then output to raw postscript or a high res PDF, perhaps you'd be able to get these high quality printable parts via that route.