Pixlane

Converter · SOTA Interactive · embeddable HTML

Image Comparison Slider (Before / After)

Compare two images with an interactive before/after slider. Drag or hover to reveal, toggle side-by-side or difference overlay modes, and export as copy-paste embeddable HTML snippet.


    


    

      
How to Use Image Comparison Slider in 3 Steps

      
    
        
  1. Configure. Drop two images (before + after). They should be the same dimensions for best comparison — Pixlane auto-matches canvas size if they differ.
    2. 
        
  2. Process. Pick comparison mode: slider (drag divider), side-by-side (two panels), or difference (pixel-level diff highlighting changes in red).
    3. 
        
  3. Export. Copy the embeddable HTML snippet to paste in a blog or site. Or download a PNG side-by-side composite for social sharing.
    4. 
      

      
Why Image Comparison Slider on Pixlane

      
Before/after image comparison is essential for showcasing edits, restoration work, filter effects, product mockups, and renovation projects. Pixlane's comparison slider supports three modes — drag slider, side-by-side, and pixel-difference overlay — and exports to embeddable HTML so you can drop the widget into any blog, portfolio, or documentation page. All processing stays in your browser.

      
      
Frequently Asked Questions

      
What if my images are different sizes?
Pixlane auto-matches them to the larger dimensions, centering smaller images on a transparent background. For best comparison, use images at the same exact resolution — any image editor can resize or crop.
What does difference mode do?
It compares pixel-by-pixel between the two images and highlights any pixels that differ. Red overlay intensity reflects the magnitude of difference. Useful for QA (did the render change?), detecting edits, or verifying visual regression tests.
Can I embed it on my site?
Yes. Click 'Copy HTML' to get a self-contained snippet with your two images base64-encoded inline. Paste into your blog post, Notion page, or landing page — no external files needed. Works on any static host.
Is this tool free?
Yes. Image Comparison Slider on Pixlane is completely free with no signup required.

      
Related Tools

      
    

  


  
  `;
}

function render() {
  const mode = q('input[name=ic-mode]:checked').value;
  if (!imgA || !imgB) { q('#ic-preview').innerHTML = '
Upload both images to compare
'; return; }
  if (mode === 'slider') renderSlider();
  else if (mode === 'side') renderSide();
  else renderDiff();
  updateHtml();
}

q('#ic-a').addEventListener('change', async e => { if (e.target.files[0]) { imgA = await loadImage(e.target.files[0]); render(); } });
q('#ic-b').addEventListener('change', async e => { if (e.target.files[0]) { imgB = await loadImage(e.target.files[0]); render(); } });
qq('input[name=ic-mode]').forEach(r => r.addEventListener('change', render));
q('#ic-copy-html').addEventListener('click', async () => { try { await navigator.clipboard.writeText(q('#ic-html').textContent); q('#ic-copy-html').textContent='Copied!'; setTimeout(()=>q('#ic-copy-html').textContent='Copy HTML embed',1200);} catch{} });
q('#ic-dl-png').addEventListener('click', () => {
  if (!imgA || !imgB) return;
  const w = Math.max(imgA.naturalWidth, imgB.naturalWidth);
  const h = Math.max(imgA.naturalHeight, imgB.naturalHeight);
  const canvas = document.createElement('canvas');
  canvas.width = w * 2 + 20; canvas.height = h;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = '#07090d'; ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(imgA, 0, 0, w, h);
  ctx.drawImage(imgB, w + 20, 0, w, h);
  canvas.toBlob(b => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(b);
    a.download = 'comparison.png';
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
  });
});
render();