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 :

background-image-facebookComme 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 :

csszengarden_2_background_images

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
  1. 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 !

  2. 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…

  3. Bonjour,
    merci pour cette technique que je ne connaissais pas!
    By the way je viens de lancer la version française du site http://www.myows.com
    C’est une application gratuite de gestion des droits d’auteurs.
    On peut stocker jusqu’a 500MO et le site apporte la preuve d’antériorité necessaire en cas de litige.
    N’hésitez pas jeter un oeil.
    C’est une version Bêta donc tout commentaire est le bienvenu!

  4. Bonjour,
    j’ai une photo de moi qui a été volée et utilisée sur différents sites de rencontre dont meetic.J’ai deux préoccupationsje ne sais comment faire pour la supprimer définitivement et empêcher sa réutilisation.j’ai entendu dire qu’il fallait que je contacte le société d’hébergement du site pour leur demander d’effacer.Mais là, c’est chose très difficile.
    Aidez-moi s’il vous plait

  5. Bonjour,
    j’ai une photo de moi qui a été volée et utilisée sur différents sites de rencontre dont meetic.J’ai deux préoccupationsje ne sais comment faire pour la supprimer définitivement et empêcher sa réutilisation.j’ai entendu dire qu’il fallait que je contacte le société d’hébergement du site pour leur demander d’effacer.Mais là, c’est chose très difficile.
    Aidez-moi s’il vous plait

  6. Alors pour l’imprime ecran je crois que y avais un temps “un scripte ou code” ou on pouvais pas prendre un imprime ecran car le résulta c’est un pixel

    je pense qu’il y a image d’un pixel avant la photo enfin un truc comme ça

  7. J’avais déjà rencontré ce “problème” mais je n’ai jamais trouvé la méthode employée.
    De toute manière, un utilitaire de capture est tout simplement incontournable.

  8. Et personne ne sais ou je peux trouvé le scripte !

    Car je sais que y avais une méthode pour l’imprime ecran

    y a une affaire de pixel mais je sais pas le nom de la méthode donc difficile de trouvé sur google

  9. J’avais fait une chose une fois pour me protéger d’un imprime écran.
    J’avais fait un petit flash de 1px x 1px casé dans un coin du site et qui tournait en boucle pour remplir le presse papier.

    Du coup quand il y avait un imprime écran, le copier généré en appuyant sur la touche était remplacé 1/100ème de seconde après par une jolie phrase genre ‘Voler c’est mal’ et donc au “Coller” on avait droit à ça.

    C’était il y a un moment, mais ça doit encore pouvoir se faire ;)

Laisser un commentaire

Vous pouvez utiliser les tags et attributs HTML suivants:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>