I build reusable components for CMS platforms, but the editors and site owners decide what content gets published. With the EU AI Act introducing transparency requirements for certain AI-generated content, I need to give them a reliable way to identify AI-generated images. A simple text label works for ordinary images, but what is the correct approach for responsive layouts, CSS background images, irregular shapes, layered images, text overlays, scroll animations, and containers using overflow:hidden? Should the label be baked into the image, rendered as part of the component, stored as metadata, or handled some other way?
3 Answers
For normal images, keep the disclosure as a separate element outside the image itself, such as a caption or label. That is more robust than positioning text over the image because it continues to work when the container resizes or the aspect ratio changes. For CSS backgrounds and more complex compositions, you can expose the information through asset metadata and accessibility properties, but remember that metadata or an aria-label is not a visible disclosure. If a visible label is required, it needs to be rendered as part of the component rather than hidden inside the image or attached with fragile fixed positioning.
Before designing a universal overlay, verify which Article 50 obligation actually applies. The rules distinguish machine-readable marking or provenance information from human-visible disclosure, and the latter is not necessarily required for every decorative AI-assisted image. The exact obligation can depend on how the image was generated, whether it is substantially altered, whether it concerns a matter of public interest, and who has editorial responsibility. A CMS editor reviewing and publishing an asset may be relevant to the editorial-review exemption. This is worth confirming against the current Commission guidance and getting legal advice for the specific use case.
Since your components cannot know whether an uploaded asset was AI-generated, make the CMS responsible for recording that decision. Add an explicit asset field such as “AI-generated,” preserve provenance data such as C2PA or IPTC metadata when available, and provide an optional visible caption or badge that editors can enable. Let the editor choose the disclosure style for normal images, background images, and complex compositions instead of trying to force one overlay technique everywhere. For decorative backgrounds where no visible disclosure is legally required, metadata may be sufficient; where a visible notice is required, render it as a normal responsive element outside the clipped image layer.
Using stock or human-created artwork would avoid the AI disclosure question, but that is not a practical solution for a CMS component library because the people using the system choose and upload the content.
That is the difficult part: hidden captions and ARIA attributes help accessibility, but they are not visible indicators. Baking the label into the image can also fail when the image is cropped or clipped by overflow:hidden, so the component needs a layout-aware disclosure option.