BYTETOOLS

Before/After Image Slider Generator

Build a self-contained before and after image slider as a single HTML file, with both images inlined and no external assets to host.

1. Drop the “before” imageEverything is encoded locally — nothing is uploaded
2. Drop the “after” imageBoth images are scaled to a common size

The result is a single .html file with both images baked in as data URIs, so you can drop it straight into a blog post, a client email or a static site with no other assets to upload.

What is the Before/After Image Slider Generator?

A before-and-after slider is the clearest way to show a retouch, a renovation, a redesign or a restoration.

  • One self-contained .html file — zero external requests, zero dependencies
  • Both images scaled to a common size with cover fitting so they align exactly
  • JPEG, PNG or WebP inlining with a quality slider and a live file-size figure
  • Custom before and after labels plus a configurable starting handle position
  • CSS clip-path reveal driven by a labelled range input, so it works with keyboard and touch
  • Everything encoded in your browser — the images are never uploaded

How to use the Before/After Image Slider Generator

  1. 1

    Drop your before image into the first upload area and your after image into the second.

  2. 2

    Set the output width, pick JPEG, PNG or WebP for the inlined images, and adjust quality if needed.

  3. 3

    Type the labels you want on each side and choose where the handle starts.

  4. 4

    Click Build the slider and drag the preview to check the alignment.

  5. 5

    Copy the HTML or download compare.html and drop it straight into your page.

About the Before/After Image Slider Generator

A before-and-after slider is the clearest way to show a retouch, a renovation, a redesign or a restoration. This generator takes your two images, scales them to a common size so they line up pixel for pixel, and produces a single .html file with both pictures inlined as data URIs and the slider logic embedded.

That means no build step, no JavaScript library, no CDN and no image hosting. The file works when you open it from your desktop, when you drop it into a static site, when a client opens it from an email attachment, or inside an iframe on a page you do not control. The reveal is a CSS clip-path on the top layer driven by a range input, so it is keyboard accessible and works on touch.

Everything is prepared in your browser: the images are drawn onto a canvas, re-encoded at the width and quality you choose, and base64-encoded locally. Nothing is uploaded. Because data URIs add about a third to the encoded size, the tool shows the finished file size so you can trade width and quality against it.

Frequently asked questions

How do I make a before and after image slider?

Drop your two images into this tool, set the width and labels, and click build. You get one HTML file containing both pictures and the slider code, ready to open or embed anywhere.

Does the slider need JavaScript libraries?

No. The reveal is a CSS clip-path driven by a native range input, with about six lines of inline JavaScript to keep them in sync. There is nothing to install and nothing to load from a CDN.

Why is the generated HTML file so large?

Both images are embedded directly in the file as base64 data URIs, and base64 adds roughly a third to the encoded size. Lowering the output width or the JPEG quality is the fastest way to bring it back down.

What if my two images are different sizes?

They are both redrawn at one common size using cover fitting, so they fill the frame and line up pixel for pixel. For the cleanest comparison, start with two shots of the same scene at the same aspect ratio.

Can I embed the slider in WordPress or a CMS?

Yes. Paste the generated HTML into a custom HTML block, or upload compare.html and load it in an iframe. Because it has no external assets, it works the same in both cases.

Related tools