Website Screenshot Creation

This tool offers a simple and convenient way to obtain screenshots of any website using the Google PageSpeed Insights API. Just input the URL of the website you're interested in and your Google API key, and the tool will instantly provide you with a screenshot.

How to use:

1. Enter the website's URL for which you want to obtain a screenshot in the designated input field.
2. Input your Google API key in the "API Key" field.
3. Click the "Get Screenshot" button.

How to obtain a Google API key:

Quick Method

1. Go to Get Started with the PageSpeed Insights API (opens in a new tab).
2. Click the "Get a Key" button.

Via Console

1. Navigate to the Google Cloud Console (opens in a new tab).
2. Create a new project or select an existing one.
3. In the search bar, type "PageSpeed Insights API" and access the service.
4. Enable the API for your project.
5. Head to the "Credentials" section and create a new API key.

How to manually capture screenshots using the Google PageSpeed Insights API:

If you prefer working directly with the Google API without our tool, you can follow this guide:

1. Construct the request URL as follows:

https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&screenshot=true&key=YOUR_API_KEY

Replace YOUR_URL with the website's URL you wish to capture, and YOUR_API_KEY with your Google API key.

2. Make a GET request to the constructed URL.

The response will encompass a vast array of data concerning the website's performance. Locate the lighthouseResult.audits["final-screenshot"].details.data section - this is your screenshot in base64 format.

3. To display the image on a web page, use the following HTML code:

<img src="data:image/jpeg;base64,YOUR_BASE64_STRING" alt="Screenshot" />

Replace YOUR_BASE64_STRING with the previously obtained base64 string.

Now, you possess all the necessary knowledge to capture website screenshots using the Google PageSpeed Insights API, be it through our tool or directly via the API.

Code examples for screenshot retrieval

npm install node-fetch

const fetch = require('node-fetch');
 
const GOOGLE_API_KEY = 'YOUR_API_KEY';
const URL = 'YOUR_URL';
 
fetch(`https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${URL}&screenshot=true&key=${GOOGLE_API_KEY}`)
  .then(response => response.json())
  .then(data => {
    const screenshot = data.lighthouseResult.audits["final-screenshot"].details.data;
    console.log(screenshot);
});