Retina quality screenshots?

Increasing a non-retina screenshot to 2X size will not be any different than showing the original.

Instead, alter your browser settings to emulate a retina display:

Firefox: Go to about:config, and change layout.css.devPixelsPerPx from -1 to 2

Chrome:

  • Zoom to 200%
  • At the bottom of the JS console (Option-Command-J), click on “Emulation”
  • Check the “Emulate screen” box
  • Set “Device pixel ratio” to 2
  • Make sure “Emulate viewport” is unchecked (otherwise the content gets resized)
  • Uncheck “Shrink to fit” (it doesn’t seem to do anything useful)
  • Uncheck “Enable text autosizing”

Source: https://wincent.com/wiki/Taking_Retina_screenshots_on_a_non-Retina_display