Capture Screenshots of Web Pages with WordPress API

Published in: screenshots - WordPress

There are innumerous 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

    function getURL() {
        var u = document.getElementById("siteurl").value;
        var w = document.getElementById("imgw").value;
        var s = "" + encodeURIComponent(u) + "?w=" + w;
        document.getElementById("screen").value = s;
        return s;
    <input name="URL" id="siteurl" value="" size="30" />
    <input name="Width" id="imgw" value="1024" size="4" maxlength="4" />
    <input id="Go" onClick="" name="Go" type="button" value="Go" />
    <input type="text" id="screen" readonly="readonly" />

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="" />

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 "-" " mShots;"
GET / HTTP/1.1" 200 23475 "-" " mShots;"
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+)"
📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: screenshots - WordPress

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

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. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube