PNG: for 1:1 pixel checks
PNG has fixed dimensions and suits checks of cropping, grids, circle geometry, and pixel mapping when the display does not scale the image.
Display Test Card Generator
Choose a resolution and test layers to create PNG or SVG cards for TVs, monitors, and projectors.
Card settings
Resolution preset
Export format
Card ready. Adjust settings or export it now.
Preview and output
1920 × 1080
Press Esc to exit fullscreen.
Press Esc to exit fullscreen.
Output summaryReady to export
Card dimensions1920 × 108016:9 · PNG
- Total pixels
- 2,073,600
- Estimated RGBA memory
- 7.9 MB
- Enabled layers
- 8
- File name
- display-test-card-1920x1080.png
Active layers
- Pixel border
- Grid
- Geometric circle
- Center crosshair
- Safe area
- Standard color bars
- Grayscale strip
- Corner marks
The preview uses a scaled canvas; downloads use the target pixel dimensions or the SVG viewBox.
Choosing a fixed-pixel or scalable card
SVG: for multiple sizes and vector output
SVG keeps the layer structure in one viewBox and scales without loss. After display scaling, a 1px line may be resampled, so it is not strict pixel evidence.
Learn more
Create and use a test card
Choose the target resolution, then combine the grid, circle, center crosshair, safe area, color bars, and grayscale. For 1:1 checks, download PNG and disable scaling, overscan, and picture enhancement on the player. Choose SVG for print or multi-size work.
Generation and dimension rules
The preview draws into the available space, while export creates the target dimensions. The safe area is the selected percentage of width and height with equal margins. The circle uses the shorter side to reveal geometric stretching.
Performance and scope
Browsers cannot all create the same Canvas size. An 8K PNG can require about 126.6 MB of raw RGBA memory before extra browser caches. If export fails, use SVG, lower the size, or remove layers.
Should I choose PNG or SVG?
Use PNG for pixel mapping, cropping, and one-pixel checks. Use SVG for lossless scaling, printing, or reuse at different sizes; scaled SVG no longer represents a source pixel.
What if a 4K or 8K test card fails to export?
Try SVG, remove unused layers, reduce grid density, close other memory-heavy pages, or lower the dimensions. Canvas limits vary by browser and device.
Why does a circle look like an oval on the TV?
The input, player, or TV is probably applying non-uniform scaling. Match the resolution and picture mode, then turn off stretch, scaling, and overscan.
What safe-area percentage should I use?
90% works as a general visual reference. Broadcast, livestream, subtitle, and platform specifications may require different margins.
Privacy, implementation, and sources
Preview and export happen locally in this browser. Settings and generated files are not uploaded, and no third-party runtime API is called.
The tool is implemented with native HTML, CSS, and JavaScript and has no third-party runtime library.