How to take full-size website screenshots

Sometimes you may need to take a full-size screenshot of a website (yours of your competitor’s). That’s useful for design reviews, or when you want to make a few design changes, see how they’d look (and A/B-test these versus the original) without changing the code.

Yes, there are quite a few tools, which allow you to do that. Most are paid, add a watermark logo on the screenshot, reduce its quality, and upload it immediately to third-party servers.

There’s actually an embedded feature in Chrome browser that allows you to take a high-quality screenshot of an entire page of a website without a need for any plugins. Here’s how to use it.

For desktop

2. If you want to take screenshot of a desktop website — on the right side of the newly-opened panel click on the 3-dots symbol and select “Run Command”:

3. Type in “screenshot” and select “Capture full size screenshot” option from the drop-down menu:

Wait a bit… and there you have it — saved in your “Downloads” folder:

For mobile

And here’s your full-height screenshot of a mobile website:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sergei Golubev

Designer, entrepreneur and foodie from 🇪🇪. I run The School of UX https://schoolofux.com in London 🇬🇧. Previously UX at Microsoft, Heathrow, British Gas.