Web ToolBox

Image Compare Slider

Intuitively compare two images with a slider

Compare Images

Drop file here

Drop file here

What is Image Compare Slider?

A tool that allows you to visually compare two images by overlaying them and using a slider to reveal differences.

Beyond simple slider operation, the zoom and pan functionality enables detailed verification down to the finest details. Perfect for comparing web design changes, verifying photo editing effects, and before-after comparisons, this tool helps you accurately identify subtle differences between images.

Works entirely in your browser with no software installation required. Supports high-resolution images for pixel-level precise comparisons.

How to Use

Basic Steps

  1. Upload two images by dragging and dropping or using the file selector
  2. Select comparison direction (horizontal or vertical)
  3. Move the slider on the displayed images to reveal differences
  4. Toggle "Image details" switch to display information about both images (optional)
  5. Click the fullscreen button for a larger comparison view

Advanced Operations

Mouse Operations

  • Drag image area: Pan (move) the image
  • Drag slider: Move slider position
  • Ctrl + Wheel: Zoom in and zoom out

Wheel Operations

  • Wheel: Move image vertically
  • Shift + Wheel: Move image horizontally

Keyboard Operations

  • Arrow keys: Fine-tune slider position
  • 0 key: Reset zoom and pan

Reset Function

Use the reset button in the top right corner or press the 0 key to restore all display settings (zoom, pan, slider position) to their initial state.

Use Cases

🎨 Design & Development

Compare website redesigns before and after, verify UI/UX adjustments, test responsive design, and more. Zoom functionality enables pixel-perfect verification to clearly identify design changes.

📸 Photo & Image Editing

Useful for comparing before and after photo editing, verifying color corrections and filter effects. Zoom functionality allows detailed checking of small editing areas.

📊 Presentation & Education

Use for comparing changes over time (landscapes, buildings, etc.), before-after demonstrations of renovations, and creating educational materials that explain visual differences.

Supported Image Formats

Supports common image formats such as JPEG, PNG, GIF, and WebP that browsers support.

Optimal Usage Conditions

  • Matching resolutions: For best results, use two images with the same resolution (width and height)
  • Recommended file size: Keep each image under 10MB for optimal performance
  • High-resolution images: Zoom functionality allows detailed comparison of high-resolution images with smooth operation even for large images

Privacy

All operations are performed within your browser; image data is never sent to any server.

Image Sharing

It is not possible to share compared images using a shared link.
*Note: The sharing feature has been highly requested, so we're considering offering it as a separate service🫡