Storybook Visual Regression Inspector

Upload Loki baseline and latest PNGs, highlight visual diffs in the browser, and export a heatmap report.

Comparison

Select the Loki baseline and latest PNG files. Unzip your report and choose matching screenshots.

Highlight color
Upload Storybook/Loki screenshots to generate a visual diff.

Overview

Inspect Loki visual regression snapshots in the browser. Highlight differences, review metrics, and export a heatmap—no CLI required.

How to use

  1. Unzip your Loki run and upload the corresponding baseline/latest PNGs.
  2. Adjust the diff threshold and highlight color to separate signal from noise.
  3. Review the heatmap, copy summary numbers, and download the annotated PNG for feedback threads.

Use cases

  • Approve Storybook visual regression diffs before merging pull requests.
  • Share heatmaps with designers to confirm intentional UI updates.
  • Audit Loki failures quickly on workstations without the full toolchain.

Tips & knowledge

  • Capture baseline and latest screenshots with the same viewport size and device pixel ratio.
  • Stabilize dynamic timestamps or data in stories to reduce false positives.
  • If dimensions drift, rerun the capture so screenshots align before sign-off.

Related tools

Comparison

CDN Latency Diff

Compare baseline vs candidate CDN latency across regions with diffs and budgets.

Comparison

Compare Slider

Intuitive before/after comparison.

Related articles

Comparison

Complete AI Upscaling Artifacts Guide 2025 — Identification, Diagnosis, and Reprocessing Practice

Ringing/halo/over-sharpening/wax skin/checkerboard/banding/color shift... Systematizing causes→diagnosis→solutions for typical artifacts, covering FFmpeg/Sharp implementation, quality evaluation, and checklists for comprehensive understanding.

Comparison

AVIF Encoder Comparison 2025 — SVT-AV1 / libaom / rav1e Quality and Speed

A comparison of major AVIF encoders useful for migrating from WebP or making recompression decisions. Organizing image quality, file size, encoding speed, and recommended presets for practical use.

Comparison

Compression Artifact Audit 2025 — Critical Areas, Degradation Conditions, and Avoidance Strategies

Quick practical procedures to identify JPEG/WebP/AVIF compression artifacts in production. Covers common failure points, degradation conditions, and specific avoidance strategies.

Comparison

Image Quality Metrics SSIM/PSNR/Butteraugli Practical Guide 2025

Practical procedures for effectively utilizing mechanical numerical indicators to objectively compare and verify image quality after compression and resizing. Usage patterns and precautions for SSIM/PSNR/Butteraugli, plus examples of workflow integration.

Comparison

AVIF vs WebP vs JPEG XL Comprehensive Comparison 2025 — Measurements and Adoption Strategy

Comprehensive comparison of major modern image formats AVIF, WebP, and JPEG XL from the perspectives of quality, size, decode speed, and browser support. Presents practical adoption strategies, fallback design, and integration examples for existing workflows.