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

Updated . Posted . Visible to the public.

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.

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.
Henning Koch
Last edit
Henning Koch
Keywords
high, quality
License
Source code in this card is licensed under the MIT License.
Posted by Henning Koch to makandra dev (2018-01-23 09:07)