How can a webserver do images like this?

Answer 1

If it is done programmatically, it likely uses an image processing library. GD and ImageMagick are two of the more popular ones.

Answer 2

Yes, you need to do it programmatically on the server. There are some flash plugins to do it, but I think server side is the way to go. This is how I did it: http://www.guangmingsoft.net/htmlsnapshot/html2image.htm http://www.imagemagick.org/script/index.php

Answer 3

You can achieve this screenshot-in-a-note effect by having a template image of the curled-paperclipped-note (the curled border, the paper clip, the shadow) and a mask for where the screenshot of the site should fit inside the template. Once you get the screenshot you just rotate it slightly and compose it with the template.

To compose it programmatically you could use ImageMagick as sugested by cpharmston.

Here's an alternative of how to compose the two images with PIL and python.