There are in numerous software apps that let you capture screenshots of web pages with a click. You open some page in your browser, hit the capture button and the screenshot gets saved as a static image.

Simple. There can however be instances when you may want to capture ‘dynamic’ screenshots of web pages – images that refresh automatically if the content, or the layout, of the underlying web page has changed. How do you do that?

The short answer is this simple web form. Just fill in the URL of any web page, the width of the screenshot and hit the Go button. It will create a link that points to the dynamic screenshot of that web page while the screenshot image itself will open in another window.

Generate Screenshots of Web Pages

<script>
  function getURL() {
    var u = document.getElementById('siteurl').value;
    var w = document.getElementById('imgw').value;
    var s = 'http://s.wordpress.com/mshots/v1/' + encodeURIComponent(u) + '?w=' + w;
    document.getElementById('screen').value = s;
    return s;
  }
</script>
<form>
  <input name="URL" id="siteurl" value="http://www.labnol.org/" size="30" />
  <input name="Width" id="imgw" value="1024" size="4" maxlength="4" />
  <input id="Go" onClick="javascript:window.open(getURL())" name="Go" type="button" value="Go" />
  <input type="text" id="screen" readonly="readonly" />
</form>

Here’s a sample screenshot image that is 1024 pixels wide that is also ‘dynamic.’

You may be wondering why would anyone want such ‘dynamic’ screenshots? Well these are regular images so you can use the standard <img> tag of HTML to directly embed these screenshot on to any another web page. There’s no need to upload screenshot images to a server first before embedding them on a page – see the following example:

<img src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Flabnol.org%2F?w=1024" />

There are other potential uses as well. If a particular web page is inaccessible from your current location, say due to some restrictions, you may use these server-side screenshots to at least get some idea of the content of that page.

Certain websites serve different versions of pages based on the IP address of the visitor but you may use these screenshots to check the US version of a web page. Web developers may use this technique to insert screenshots programmatically in their apps with simple JavaScript.

Behind the scenes – The Geeky part

WordPress has a Python based tool called Mshots that they use internally to generate screenshots of these featured sites. This is also available as a WordPress plugin.

WordPress MShots may take a few seconds to generate the first screenshot of a new web page but subsequent requests for that same URL will fetch almost instantly. The WordPress user-agent string, that is responsible for generating screenshots, reads something like this:

HEAD / HTTP/1.1" 200 367 "-" "WordPress.com mShots; http://support.wordpress.com/contact/"
GET / HTTP/1.1" 200 23475 "-" "WordPress.com mShots; http://support.wordpress.com/contact/"
GET / HTTP/1.1" 200 5959 "-" "Mozilla/5.0 (X11; U; Linux x86_64; en-us) AppleWebKit/525.1+ (KHTML, like Gecko, Safari/525.1+) pythumbnail.py"