image compare in markata go

markata-go now has web awesome integration for image compare. It renders a nice web component with a slider to compare two images.

It’s done with a class wrapper around the image components.

::: wa-comparison
![d628ffba-de18-4fff-91a8-700f037df119.webp](https://dropper.wayl.one/file/d628ffba-de18-4fff-91a8-700f037df119.webp)
![](https://dropper.waylonwalker.com/file/ca30665f-1a15-453e-aab8-221901c7df99.webp)
:::

Without markata-go’s web awesome integration, the above would look like:

<script type="module">
  import 'https://ka-f.webawesome.com/[email protected]/components/comparison/comparison.js';
</script>

<wa-comparison>
  <img
    slot="before"
    src="https://dropper.wayl.one/file/d628ffba-de18-4fff-91a8-700f037df119.webp"
    alt="Grayscale version of kittens in a basket looking around."
  />
  <img
    slot="after"
    src="https://dropper.waylonwalker.com/file/ca30665f-1a15-453e-aab8-221901c7df99.webp"
    alt="Color version of kittens in a basket looking around."
  />
</wa-comparison>