Manager We need to be compliant with the EU AI Act before we close Q3
Engineer Oh yeah we should work on that before the law takes effect, when will that be?
PO It is enforced since last August, almost 2 months ago.
Engineer Oh… I see. And what do we need to do exactly on the website?
PO Legal said we need to display a marker on all AI generated pictures
Engineer Oh that is easy we will just put a CSS overlay and…
PO No, no, legal said the marker needs to be burned on the picture so if the user saves it the marker will still be visible on the picture.
Engineer Sooo no CSS overlay, well that makes things more complicated but I think we can add some rules on our CDN configuration and let them handle the composition...
Neckbeard The CDN will strip the C2PA provenance envelope
Engineer The what?
PO Oh and the designers are still in discussions about where to display the marker. We use a flexible layout with components that overlay each other and many pictures use CSS cover. If we just burn a mark on a corner, depending on the screen size and the aspect ratio, the mark will not be visible and then the user will not clearly see that the image was generated.
Engineer Give me a second, this is giving me a headache already.
Neckbeard We respect the spirit of the law. We would be doing our best effort. Citizens are safe.
Engineer Right, he is right, surely the legal team does not expect us to create lots of variants of each picture with the burned mark on different spots just to…
PO .
Engineer Oh I see…
Manager Yeah, legal has real concerns about this. We want to play it safe, yada yada...
Neckbeard What if... we just use real photos?
PO [Pokemon face]
What is the “EU AI Act”?
It is a good measure.
It’s about forcing transparency when generative AI gets used as content for end users. It applies to text and video as well but today I’m just describing EU AI ACT, Pictures edition.
- Article 50(2) requires providers to mark synthetic content in machine-readable format.
- Article 50(4) requires deployers to visually label deepfakes.
AI generated pictures used on digital products need to be clearly marked both for humans and machines. More on that in a second.
When will it apply?
It has been in force since 02.08.2026.
Examples?
Not really yet. If you browse the websites of European companies none add a mark to their pictures, or maybe… they are not using genAI yet…
Should I care?
Absolutely, if you have a digital product that shows realistic AI generated imagery.
Will there be fines?
Most likely, at some point, to incentivise compliance. It is known the EU has already sent inquiries to a handful of AI providers.
Here is the potential financial risk:
- Up to €35M or 7% of global turnover for prohibited practices
- Up to €15M or 3% for other non-compliance (including transparency)
Do all AI generated pictures need to be disclosed?
No. Illustrations, artistic images or abstract images do not need to have a disclosure. But if the picture has a realistic style that could be mistaken for a photo, then it needs to be disclosed. The EU definition says:
If an image looks like something real and could be mistaken as authentic, then it needs a label. If the AI image strongly resembles something real and someone could take it as an authentic photo, then it needs a visible disclosure.
The law is there to protect people from all kinds of deepfakes, no matter if people, objects or buildings are represented.
How to mark the pictures
1. For machines
This is only relevant if you are an AI gen provider. The law says the disclaimer needs to be machine readable. The industry (MS, Adobe, OpenAI) came up with a solution: the C2PA provenance envelope. C2PA is some signed metadata glued to the image to tell you where it comes from and to prevent tampering.
Images generated in ChatGPT already come with it. The tooling is still limited. There is this: c2patool (MIT licensed) Here is what the C2PA header looks like:
> ./c2patool ChatGPT\ Image\ Sep\ 19,\ 2026,\ 09_16_28\ AM.png
{
"active_manifest": "urn:c2pa:186b9d47-96f6-4ea1-a20a-47a25841d812",
"manifests": {
"urn:c2pa:186b9d47-96f6-4ea1-a20a-47a25841d812": {
"claim_generator_info": [
{
"name": "OpenAI Media Service API",
"icon": {
"format": "image/svg+xml",
"identifier": "self#jumbf=/c2pa/urn:c2pa:186b9d47-96f6-4ea1-a20a-47a25841d812/c2pa.assertions/c2pa.icon"
},
"specVersion": "2.2.0",
"org.contentauth.c2pa_rs": "0.79.2"
}
],
(...)
Google Chrome Canary has experimental features to make use of C2PA, but on the current Linux build it still does not seem to use it to display a watermark to the user or even to answer questions like “Is this picture AI generated?” on Google Lens.
2. For real people
It needs to be obvious. The image needs to have some kind of watermark, an icon or text that states that the image was generated. There are European guidelines and examples of what the composite should look like but each company can choose to display whatever they feel appropriate. It is not enough to disclose it on the footer. It needs to be on the picture. Overlays are not enough for compliance.
Technical issues
- Trouble because CDNs strip C2PA (thumbnail generation, variants, etc.)
- Trouble on the frontend because the mark must be displayed to the user no matter the aspect ratio. This is difficult on flexible layouts or very limiting unless you put the mark near the center of the picture.
What I did
100% frontend. Take the visible part of the image, copy it to a canvas, apply a composite to the canvas, replace the picture. This is surprisingly fast because all operations are GPU accelerated
Demo
Original
With composited AI watermark done on the browser
Show me the code
I don’t want to maintain such a project. Here is a prompt you can use. Make your own.
Write a client-side TypeScript library (single file, default-exported class, no dependencies, no comments) that turns "img data-watermark" elements into "canvas" with a watermark. Functionality: - Static entry point that queries all matching images (optionally within a subroot) and initializes one instance per image; if an image hasn't loaded yet, wait for its load event. - The canvas replaces the img in the DOM, copying its class, id, and inline styles, and exposing accessible name/role. - On draw: render the original image cropped like object-fit: cover, then overlay a small rounded-corner watermark pill with semi-transparent background and bold text, positioned at a corner OR at an arbitrary "x%, y%" coordinate. - Configurable via data-watermark-* attributes: position, text, theme (dark or light), an optional 90° rotation, and an optional data-watermark-image URL that draws an image (e.g. an EU AI label SVG) instead of the text pill, falling back to text if it fails to load. - Automatic redraw on resize (use ResizeObserver), rendering at devicePixelRatio resolution for sharp output, and debounce redraws via requestAnimationFrame.