Is there a way to make all the images on my website duotone without resorting to pseudo-elements and wrappers in order to maintain a neat HTML structure?

edit

Yes, there are several ways to make all the images on a website duotone without using pseudo-elements or wrappers.

One way is to use CSS filters. The filter() function in CSS allows you to apply different visual effects to elements, including duotone. Here’s an example of how to apply a duotone filter to all images on your website:

img {
  filter: grayscale(100%) brightness(50%) contrast(200%) hue-rotate(45deg);
}

This CSS will apply a filter that desaturates the image (grayscale), reduces its brightness by 50%, increases contrast by 200%, and applies a 45-degree hue rotation to create a duotone effect.

Another way to add duotone to all images on a website is with a JavaScript library like Duotone.js. This library provides an easy-to-use script that dynamically applies a duotone effect to all images on your website.

To use Duotone.js, you simply include the script in your HTML file and initialize it with the desired colors:

<script src="duotone.js"></script>
<script>
  Duotone.init({
    selector: "img",
    primaryColor: "#ff0000",
    secondaryColor: "#0000ff"
  });
</script>

This will apply a duotone effect to all img elements on your website using red (#ff0000) as the primary color and blue (#0000ff) as the secondary color.

Note that using CSS filters or JavaScript libraries may have performance implications, especially on older or slower devices. Consider testing your website on different devices and browsers to ensure it performs well.