The reference shelf for website screenshots
Cheat sheets, comparisons and how-tos from the team behind CurlShot. Each article answers one question first, shows the numbers, and lists where they come from.
Follow by feedLatestCheat sheet
Viewport sizes cheat sheet: phones to desktops
Viewport sizes in CSS pixels, screenshot sizes and device pixel ratios of iPhone, Pixel, Galaxy, iPad and laptop screens, drawn to scale, and the sizes to test.
Read the articleThe short answer
Phone viewports are 360 to 448 CSS pixels wide (iPhone 15 and 16: 393 x 852, Galaxy S24: 360 x 780), tablets in portrait are 744 to 1024 wide (iPad: 820 x 1180), and laptops and desktops start at 1280 (1366 x 768, 1440 x 900, 1920 x 1080). The physical size is the viewport multiplied by the device pixel ratio: 393 x 852 at a ratio of 3 is 1179 x 2556 pixels. A practical test set is 360, 393, 820, 1280, 1440 and 1920 pixels wide.
- Field guideWhy website screenshots look wrong, and the fixesA field guide to 11 ways a website screenshot goes wrong, from blank lazy images to cookie banners and cut-off pages, with the cause and the fix for each.Try the tool: Screenshot without ads
- ComparisonPNG, JPEG, WebP or PDF for website screenshotsA decision flow, a comparison table and our own file-size measurements for choosing PNG, JPEG, WebP or PDF when you save a screenshot of a web page.Try the tool: URL to image
- How-toFull-page screenshot on every device and browserExact keys and menu names to screenshot a whole web page in Chrome, Firefox, Edge, Safari, iPhone, iPad and Android, checked against each vendor.Try the tool: Full-page screenshot
- Cheat sheetSocial preview image sizes: the OG cheat sheetOpen Graph image sizes for Facebook, LinkedIn, WhatsApp, iMessage, Discord, Slack and Google Discover, drawn to scale, with the tags and the fixes.Try the tool: Open Graph images