I need to be able to insert screenshots (mostly cropped sections of web pages, not whole pages) into my WordPress site for instructional purposes.

I have discovered the Awesome Screenshot app for Google and Chrome which does a good job of creating and annotating screenshots.

What I'm unsure of is how or if I can optimise these for retina screens. I don't own a retina device myself so the screenshots are being created on a regular pc. Is my only option to increase the size to 2x for retina after the screenshots have been taken (obviously this will result in loss of quality and readability). Is there any other way to get retina quality grabs in the first place?


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


  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.