Local Tools

Change language?

Changing language will clear the input on this page, including any selected image and results. Continue?

Tools

Responsive image simulator

CSS px

Screen

Drop or paste · JPEG / PNG / WebP · 15MB / 16MP

Drag the device edges to resize the screen, or the image’s lower edge to resize its frame.

Your image and settings stay on this page. No upload or saved history.

Help & FAQs

Choose a local image, adjust the screen width and frame, and compare the visible source area in contain and cover.

How to compare image layouts

  1. Choose one static JPEG, PNG or WebP, or drop or paste a local image.
  2. Adjust the screen width and fixed frame height or ratio. Both panels share padding, position and background.
  3. Compare the visible source maps and percentages. Generate a real PNG to share the layout assumptions.

Image pixels, file size and layout are different

An 800×400 image keeps its 2:1 source ratio. A page may place it in a 390×240 CSS pixel frame: contain shows all of it with blank space, while cover fills the frame and crops the sides. File size in KB describes encoded bytes; smaller KB does not by itself change CSS layout.

The width is a declared CSS viewport assumption, not a phone model, DPR, physical size or complete browser emulator. Preview display scale fits the workspace and is labeled separately. Blank space measures area outside the drawn image, not transparent source pixels. Source rectangles can have fractional coordinates; they describe geometric sampling, not an integer crop operation.

Explicit local comparison

Inputs are limited to one static JPEG/PNG/WebP, 15MB, 16MP and 8192px per side. Width is 200–1440 CSS px, frame height 32–4096; ratio terms are integers 1–8192 and the resulting height rounds to the nearest integer. Padding is 0–96 per side, leaving at least 32px. Object position is 0–100%.

The PNG contains two labeled layouts, numeric geometry and an explicit opaque background. One CSS px maps to one output px; no input filename or metadata is copied. Output stays within 16MP, 8192px per side and 50MB, with 45-second checkpoints. Image mode makes no upload or remote image request and does not persist your image.

Website

Loading connects your browser to the website, which may receive cookies and load other resources. The address stays on this page and is excluded from analytics.

Some sites block embedding. This restricted preview cannot sign in, submit forms, open popups or export a webpage screenshot. It changes viewport size, not browser identity or device capabilities.

Resize the device to check responsive layout. Display scale only changes the on-page view.

Common questions

Why does cover crop my image?

Cover uses the larger of the width and height scale factors. The image fills the frame and the excess lies outside it. Position selects which part remains visible; contain instead uses the smaller factor and keeps the whole source.

Does changing the preview compress the source?

No. The source file remains unchanged. CSS width, source pixels and encoded KB are separate measurements. Generating the comparison creates a new PNG report.

Can I preview a webpage URL?

Some sites block embedding. This restricted preview cannot sign in, submit forms, open popups or export a webpage screenshot. It changes viewport size, not browser identity or device capabilities. Loading connects your browser to the website, which may receive cookies and load other resources. The address stays on this page and is excluded from analytics.