Protéger les images de son site avec un filigrane

Deux approches : incruster le filigrane dans les fichiers avant l'envoi, ou le superposer en CSS. Leurs avantages, et leurs limites.

Méthode 1 : incruster dans l'image (la plus solide)

Ajoutez le filigrane aux fichiers avant de les mettre sur le site, avec un traitement par lot. Le filigrane fait alors partie de l'image : quiconque la télécharge l'emporte avec.

Méthode 2 : superposer en CSS

Le filigrane est un élément affiché par-dessus l'image, sans la modifier. Exemple :

<div class="photo">
  <img src="photo.webp" alt="Description">
</div>

.photo { position: relative; display: inline-block; }
.photo::after {
  content: "© Votre nom";
  position: absolute; right: 10px; bottom: 10px;
  color: rgba(255,255,255,.7); font-size: 14px;
}

C'est léger et facile à changer, mais le filigrane n'existe que sur la page : l'image téléchargée seule n'en a pas.

Ce qu'il ne faut pas attendre

Bloquer le clic droit ou le glisser-déposer est contourné en quelques secondes : n'importe quel visiteur peut enregistrer la page ou lire le code. Ces blocages gênent surtout vos visiteurs honnêtes.

Bonnes pratiques

• Publiez des images à taille raisonnable : une photo en 1200 pixels de large est moins exploitable qu'un fichier haute définition.
• Gardez l'original en haute définition hors du site.
• Ajoutez une mention de droit d'auteur dans les mentions légales.

Questions fréquentes

Le filigrane CSS protège-t-il vraiment ?

Non : il s'affiche sur la page mais l'image téléchargée reste sans marque. C'est un affichage, pas une protection.

Quelle taille d'image publier ?

Une largeur de 1200 à 1600 pixels suffit à l'écran et limite l'intérêt d'un téléchargement pour l'impression.