Truc pour protéger vos images contre le copiage

Bien sur, à toute fin pratique, il n’existe pas de trucs qui vont empêcher complètement un visiteur de copier vos images. Il existe des scripts en javascript qui bloquent l’utilisation du bouton droit de la souris, mais ça ne marche pas avec tous les navigateurs (ça peut aussi être très irritant pour les visiteurs, au point de les encourager, même), et rien n’empêche le visiteur de simplement faire une capture d’écran et d’éditer l’image avec un logiciel graphique.

Les meilleurs solutions, en fait, comme afficher une image dans un fichier flash, ou l’emploi des watermark (français: tatouage numériques, visibles ou invisibles) deviennent compliquées et ralentissent passablement la création de nouvelles images pour votre site, sans pour autant dissuader les copieurs plus expérimentés.

En fait, oui, il faut se résigner. Ce qui est publié sur le web va être inévitablement copié. En bout de ligne, la meilleure protection (pour les articles, ou quand vous les trouvez, les images) est de contacter le copieur et de l’informer du bris de droit d’auteur, et si ça ne marche pas, de contacter la compagnie d’hébergement. Il faut aussi toujour s’assurer que votre serveur est configuré pour vous protéger contre le « hotlink » des images, c’est-à-dire l’affichage d’une image sur un autre site web avec un lien direct vers votre fichier.

Mais on peut toujours utiliser des trucs pour mystifier les copieurs débutants sans pour autant y passer trop de temps. Il vous reste, peut-être, la satisfaction d’avoir confondu quelqu’un qui avait de mauvaises intentions.

Voilà donc un truc simple. Nous allons utiliser une image transparente de 1 pixel par 1 pixel pour la positionner directement au-dessus de vos images réelles grâce au CSS:

Voici votre image typique:

<img src="/images/montagne.jpg" width="200" height="100" alt="Montagne" border="0" />

On va entourer l’image d’un DIV en mode de positionnement relatif (pour encadrer l’image transparente flottante) et déposer notre image transparente en mode de positionnement absolue, pour la situer juste au-dessus de notre image réelle, avec la même taille qu’elle, mais avec un z-index supérieur (1, l’image normale étant à 0), pour la couvrir:

1
2
3
4
<div style="position: relative;">
<img src="/images/transparent.gif" width="200" height="100" alt="" border="0" style="position: absolute; z-index: 1;" />
<img src="/images/montagne.jpg" width="200" height="100" alt="Montagne" border="0" />
</div>

Ainsi, comme l’image est transparente (un GIF de 1px*1px transparent), elle n’est pas visible pour les visiteurs, mais si quelqu’un décide de cliquer sur votre image pour la sauvegarder, en fait, tout ce qu’il réussira à télécharger sera l’image transparente sans valeur.

Bien sur, cela n’empêche pas les copieurs plus expérimentés, mais les débutants seront bafoués, et vous n’aviez qu’à ajouter quelques lignes de codes supplémentaires.

Partager cet article:

  • del.icio.us
  • Facebook
  • StumbleUpon
  • Twitter
  • LinkedIn

Catégories: Programmation web | Aucun commentaire »
Les tags de cet article:

Note: Merci pour vos commentaires, j'apprécie ceux qui partagent leurs avis et leurs expériences de webmestre, ou s'il y a lieu, indiquent une erreur dans mes tutoriels, mais je ne peux évidemment pas faire de support technique pour votre site, alors veuillez éviter d'en faire la demande dans cette section.

Laisser un commentaire