How to Take a Screenshot of a Website
3 easy ways to screenshot a page

Everyone once in a while, you are going to need to take a picture of a screenshot. Sometimes, it's to include as part of a document or presentation, sometimes you need want to embed it in another website. Whatever the reason, there are many ways to take a screenshot, and each method has it's pros and cons.

OS Based screenshots

Often times the easiest way to get a screenshot of a page is to use the built in operating system screenshot system:

  • Windows 10 - Windows+Shift+S
  • macOS X - Shift-Command-4 (your screenshot will apper on your desktop as a .png file)
While these are a great place to start, they come with a lot of limitations. For starters, it's a little time consuming since you have to trim the image yourself. On top of that, if the page is larger than what can fit on your screen and you need a full page screen capture, you could get stuck hand stiching multiple screenshots. There is a better way!

Browser based screenshots

Modern Browser now allow you to take screenshots from the command line. For Chrome on a Mac, this might look like:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --headless --screenshot http://www.google.com/

This will create a screenshot of Google's homepage in the current folder.

In Firefox, you can open up the command-line by pressing Shift-F2. From here, you can type the command:

screenshot

to take a screenshot. You can use:

screenshot --fullpage

to get a full page screen capture as well!

Use an API to take screenshots

For people who need thousands of screenshots, the above methods are simply too time-consuming. That's when it makes sense to use a third party screenshot API such as Thum.io. Thum.io has a quick signup process, but you can also request a screenshot instantly right here!




http://image.thum.io/get/http://www.google.com/

(Right-click on the image and select "Save Image As..." to download this image to your computer)