Protéger les images de son site web - Conseil #1

Voici une nouvelle série de billet cette semaine. Après les conseils sur comment  "Lutter contre le spam efficacement", nous allons maintenant voir comment protéger les images de son site web !

Souvent la notion de copyright dépasse complètement la raison des internautes. Ils savent vaguement qu'elle existe, mais tout le monde "pique" des images sur Internet, donc pourquoi pas moi ?!

Il est vrai qu'il est assez difficile de protéger réellement ses propres images sur Internet.

Même s'il n'existe pas de solution miracle, voici plusieurs conseils pour protéger vos images des pillards du web...

Protéger les images de son site: #1 Image transparente superposée

Cette technique est déjà utilisée par de nombreux services online comme Flickr.

Théorie

Il suffit de superposer une image transparente à l'image que vous souhaitez protéger, en utilisant du CSS.

Ainsi les visiteurs qui souhaiteront récupérer votre images feront un click droit sur l'image transparente, mais ne pourront pas accéder facilement à l'image protégée !

Pratique

Si vous n'avez pas encore saisi le principe, un peu de pratique en dira plus !

Mise en pratique n°1: à la main

1) Choisissez l'image à protéger.

Préparez votre image. Pour l'exemple, nous allons prendre cette image:

Rien de plus simple pour le moment que de la récupérer: Un clic droit > Enregistrer l'image sous... et c'est réglé.

2) Préparation de notre image transparente

Créez une image transparente de taille 100*100px, un .GIF est conseillé, car pris en charge par tous les navigateurs (Même IE ...).

3) Superposez vos images avec du CSS

Insérez le code suivant pour afficher votre image. La taille de votre GIF doit être adaptée à celle de votre photo avec les propriétés height et width.

<div style="background-image: url('PATH_IMG/votreImageAProteger.jpg'); background-repeat: no-repeat;">
    <img src="antiCopy.gif" height="250px" width="300px">
</div>

4) Voilà ce que ça donne

Vous pouvez essayer de sauvegarder l'image, vous n'arriverez pas à récupérer la photo protégée avec un clic droit.

Nous avons contré 80% des internautes avec cette technique !

Mise en pratique n°2

Il existe des librairies javascript permettant de faire ce travail de manière automatique: dwImageProtector.

Téléchargez la version Mootools

Téléchargez la version jQuery

Les exemples sur le site parle d'eux même.

Ces librairies vous seront très pratiques si vous souhaitez mettre en œuvre cette technique de manière automatique.

Limites de cette technique

Certes, avec cette image superposée nous allons contrer 80% des internautes qui ne sont pas forcément experts en informatique, mais il reste les 20% !

Effectivement, on peut récupérer l'image avec un peu de ruse.

La preuve:

1) Utilisez firefox avec le plugin Firebug

2) Inspectez avec le plugin Firebug l'image protégée

Vous devriez obtenir l'architecture HTML qui a été utilisée.

Vous pourrez alors voir quelle image a été mise en background (Même si elle est renseignée dans une feuille de style et pas directement dans le code source).

3) Copiez cette adresse dans votre navigateur et voila !

Rien de plus simple, il faut juste le savoir ...

Dans le prochain conseil, nous verrons une technique plus radicale pour protéger nos images.