Protéger ses photos contre la copie à l’aide de CSS
On vient de voir comment on peut protéger ses photos contre la copie en interdisant le clique droit, en utilisant Flash et en apposant un watermark (filigrane). Voici une autre manière de protéger ses photos à l’aide de CSS et les images d’arrière-plan…
L’objectif ici n’est pas d’exposer une méthode infaillible de protection (qui n’existe pas) mais de donner des idées permettant de ralentir la majorité des internautes qui vont être confrontés à une situation où les méthodes classiques de récupération de l’image ne seront pas possibles.
Je fais notamment référence à la possibilité de mettre une image en arrière-plan à l’aide de CSS et la propriété :
background-image : url(image_01.png) ;
Pourquoi mettre vos photos en arrière-plan ? Cela permet de rendre impossible la commande “Click droit -> Enregistrer l’image sous…” Voici une capture réalisé sur le site de Facebook :
Comme vous pouvez le voir, il n’existe plus que la possibilité de “Enregisrer sous…” mais cela va enregistrer toute la page. Par contre, il va apparaître la possibilité de “Afficher l’image de fond“. Si vous faites cela, l’image va apparaître seule dans une nouvelle page de votre navigateur et vous serez autorisé à l’enregistrer.
Encore une fois, l’idée est de ralentir l’internaute qui ne connaîtra pas cette possibilité.
On peut pousser le vice davantage. Avec le CSS, on peut superposer deux images qui seront toutes les deux des images de fond. Voici un exemple sur Jardin Zen css :
On voit le paysage avec les fleurs de lys (premier niveau d’image d’arrière-plan) et ensuite le logo Jardin Zen CSS en alpha transparence (deuxième niveau d’arrière-plan).
Le logo Jardin Zen CSS, qui consiste en un fichier GIF transparent, permet de faire transparaître des éléments de l’arrière-plan. La capture d’écran ne permettra pas d’afficher le logo isolé. Ainsi, on ne pourra pas utiliser votre logo et on va devoir vous contacter pour obtenir une version propre (et une autorisation par la même occasion).
Encore une fois, un peu de bidouille dans la feuille de style et les adresses des images sont vite retrouvées !
background: url(zen-bg.jpg) no-repeat top left; background: transparent url(h1.gif) no-repeat top left;
ce qui donne ces deux images :
http://www.csszengarden.com/001/h1-fr.gif http://www.csszengarden.com/001/zen-bg.jpg
Je m'appelle Miroslav Kurdov je travaille comme juriste spécialisé en droit des nouvelles technologies et de la propriété industrielle.
Pour plus d'informations vous pouvez consulter mon profil 
Billet intéressant :)
Maintenant, d’autant plus de gens sont au courant ^^
Mais quitte à ralentir et vraiment énerver, on peut aussi couper les images en plusieurs fragments réunis pour l’affichage par du CSS ^^ Ça oblige à récupérer chaque image, et à les recoller une par une.. Ça peut être efficace, mais rien contre l’imprim’ écran..
Bye !
Oui le découpage de l’image est assez sympa comme technique mais franchement je pense pas que c’est nécessaire.
Pour les photos, il faut les mettre en basse résolution ou sinon insérer une filigrane.
Et la capture d’écran est impossible d’interdire…