Capture Screenshots of Web Pages with WordPress API

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"
Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

0

Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.