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

3ème conseil pour protéger les images de son site web avec une solution plutôt originale et design !

Comme lors du conseil n°1, nous allons établir un moyen pour contrer le clic droit et le drag and drop d'images.

En général, la désactivation du clic droit permet d'empêcher à la grande majorité de vos Internautes (S'il ne s'agit pas d'un site ciblant des Hackeurs ou bidouilleurs..) de copier vos images.

Les autres conseils pour protéger ses images:

Conseil n°1: Une image transparente superposée contre le click droit

Conseil n°2: Incustez un Watermark à votre image

Protéger les images de son site: #3 Image flashée avec sWFIR

Théorie

Vous connaissez peut être swfIR (SWF Image Remplacement) qui permet de remplacer une image par un SWF.

Nous allons l'utiliser pour désactiver le clic droit + drag and drop sur l'image. En prime vous pourrez donner des effets spéciaux à vos images: Cadres, Orientation ...

Pratique

1) Téléchargez swfIR et ajoutez la librairie JS dans votre page web

Téléchargez la dernière version sur le site de swfIR

2) Affichez votre image normalement sur votre page

<img src='/images/billets/2009-01/.orig/sunset.jpg' alt='Mon Image à protéger' class='pic' />

Spécifiez bien une classe (class='pic') pour pouvoir la transformer avec swfIR.

3) Insérez le code Javascript pour transformer vos images

<script type="text/javascript">

window.onload = function(){    
  rotate = new swfir();
  rotate.specify('src', '/swfir.swf');
  rotate.swap(".pic");
}

</script>    

Modifiez bien la classe de vos images et le chemin vers le flash swfir.swf

4) Si vous souhaitez donner des effets à vos images, ajoutez les paramètres au JS

Légère inclinaison de votre image:

  rotate = new swfir();
  rotate.specify('src', '/swfir.swf');
  rotate.specify('rotate', '-5');
  rotate.swap(".pic");

Il est aussi possible d'ajouter une ombre, un cadre ... allez voir les démonstrations sur le site de swfIR

Démonstration

Limites

Encore une fois, votre image peut être récupérée si le javascript n'est pas activé ou en regardant attentivement le code source de votre flash.

Il est donc conseillé d'ajouter un Watermark à vos images en plus de swfIR.

Et attention incompatibilité avec Mootools et jQuery, il faut prendre le plugin swfIR correspondant pour le faire marcher correctement.