How to embed a before and after image slider on your website

A before and after slider is one of the most convincing things you can put on a page. Retouchers use it to show edits, developers use it to show a redesign, and reviewers use it to show an upscale or a graphics setting. The problem is that most ways to add one involve a JavaScript library, some CSS, and hosting the images yourself. If you just want a working slider on your site, there is a faster way: make the comparison once and embed it.

The no-code way

1. Go to the home page and drop in your two images, a before and an after.
2. Drag the divider to check it looks right, and label each side.
3. Publish the comparison. You get a permanent link.
4. Open the comparison and click Embed. Copy the snippet.
5. Paste it into your page wherever you want the slider to appear.

That is the whole process. The slider runs inside your page, sized to your image, and your visitors can drag it with no app or signup. Here is one embedded exactly the way yours will look:

Why embed instead of a library

If you are comfortable with code, libraries like a React comparison slider give you full control. But for most sites the embed wins on three things. There is nothing to install or maintain, so an update never breaks it. The images are hosted and served fast for you, so you are not paying bandwidth or worrying about large files. And the same comparison also gives you a standalone link you can share on social or in a thread, which a library on your own page does not.

Good practices for a clean embed

• Use two images of the same dimensions so nothing stretches.
• Keep the before and after aligned. If the subject moves between the two shots, the slider shows the movement instead of the change you care about.
• Add clear labels so a first-time viewer knows which side is which.
• Put the slider near the top of the relevant section. It is the thing people came to see.

If you used to embed imgsli

imgsli was the tool a lot of people embedded for this, and it is no longer online, which means old embeds on those pages are now broken. imgi is a free, modern replacement that does the same job: a slider, a permanent link, and an embed snippet. If you have a dead imgsli embed on a page, swapping in an imgi one takes a minute. For more on the switch, see the best imgsli alternative in 2026.

Ready to add one? Make your comparison, grab the embed, and paste it in. Free, no signup.