Read more

Chrome: Making high-resolution website screenshots without add-ons

Henning Koch
January 23, 2018Software engineer at makandra GmbH

If you want to make a screenshot of a website that works well in print or on a high-DPI screen (like Apple Retina displays), here is how you can capture a high-resolution screenshot.

Illustration money motivation

Opscomplete powered by makandra brand

Save money by migrating from AWS to our fully managed hosting in Germany.

  • Trusted by over 100 customers
  • Ready to use with Ruby, Node.js, PHP
  • Proactive management by operations experts
Read more Show archive.org snapshot

You can do this without an addon:

  • Open the website
  • If you have multiple monitoros:
    • Resize the Chrome window so it covers multiple monitors (in Linux you can hold ALT and resize by dragging with the right mouse button)
    • Zoom into the page using CTRL + and CTRL - so it covers most of the window area. Leave a little padding on the left and right so it looks good.
  • If you only have single screen:
    • Open the responsive view ("device toolbar" - CTRL SHIFT M)
    • Set a small zoom (e.g. 25%) with a viewport that covers the width of your physical screen
  • Open developer tools (CTRL SHIFT J)
  • Open developer tools action bar (CTRL SHIFT P)
  • Quicksearch for the action "Capture full size screenshot"
  • A few seconds after selecting the action, a file picker will ask you where to save the PNG.
Posted by Henning Koch to makandra dev (2018-01-23 10:07)