I want to maximize the size of the screenshot and avoid scroll bar or overflow for the maximum too.

What size do you recommend ?

I'm using lightbox.

3 Answers 3


Here's the excellent Browser Size tool from Google showing how many percent of users will see the different areas of your website. This really helps to check webpages and ensure that people on 'shallow' screens (most laptops have very wide but very shallow/not deep screens) can see your important content and calls to action.

google browser size tool

Update: Google has now added this functionality to Google Analytics, allowing you to see how much your visitors can see of your site: http://analytics.blogspot.com/2012/06/new-feature-conduct-browser-size.html

Google Analytics with new browser size functionality

  • The graphics are kind of ghetto for a Google app, but this looks like a very useful tool, and I assume they probably update the percentage breakdowns regularly so you have the latest screen size data. Commented Oct 14, 2010 at 2:02
  • Yes, ghetto is the right word! It's in Labs, so i'm not sure how well it's maintained, but it is an eye-opener for designers with huge screens. Commented Oct 14, 2010 at 2:18
  • Ah, I was wrong. The image isn't generated live from user data. It's just overlaying a static image over the webpage, and it appears they haven't updated it in about a year: browsersize.googlelabs.com/static/… Commented Oct 14, 2010 at 2:36
  • 1
    Just as a quick nota bene, if your screen is wider than a certain size, the image just repeats. On my 2560x1440 iMac, I can see it nearly twice. It also doesn't do well with centered content.
    – B.R.
    Commented Oct 14, 2010 at 3:27
  • 3
    This tools seems poor, if your site is not fixed width, then it will scale to your browser, and the overlay is totally wrong.
    – silk
    Commented Oct 14, 2010 at 8:08

This could vary by site and user base, but many websites are still supporting a screen width of 1024 pixels wide (because there is still a sizable user base using that resolution). Therefore, you'd want your image to be big enough to fit into a space that was 1024 pixels wide. Let's say you have 15px of chrome on the left and right sides of your lightbox and you wanted a 30px margin on either side of that for people running 1024px wide monitor resolutions.

1024 - 30px(lightbox chrome) - 60px(margins) = 934px wide image.

Again, the specifics might be different for your site, particularly if you want the lightbox edges to lay at a certain point in relation to your page or if you are trying to snap to a grid or something like that.


A cool solution would be to upload the screenshots at a max resolution of 2560x1600. Then when the page loads, detect the browser window size, and use an image handler to resize and save the image on your server on its first request.

That way people with high resolution monitors don't get neglected.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.