fonds d'écran - créations numériques - webmastering - photograhie - création de site - référencement efficace


 

 

pub

Passons à une autre méthide de protection des images, basée sur les propriétés de la CSS, pour essayer de répondre à ce problème le plus souvent posé sur le web : comment protéger les images mises sur un page web ?

scripts et aide : | interdire le clic droit avec JavaScript | JavaScript pour les images | Protéger ses images avec la CSS | watermark | les recours |

L'avantage par rapport à JavaScript est quand même que la CSS ne demande pas d'activation dans les navigateurs, mais bien sur , si cela va détourner, une fois de plus pas mal de "copieur" potentiel, elle aussi peut toujours réussir à être contournée ...

Nous allons donc essayer de faire en sorte que l'internaute qui va vouloir copier cette image, se retrouve avec une image ... vide et inutilisable . Sur cette page la protection contre le clic droit n'est donc pas activée par JavaScript, vous pouvez le vérifier, et si vous prenez l'image ci-dessous,' à consommer avec modaration' ..., faîtes un clic droit dessus et enregistrez l'image, vous aurez vite compris la fonction de cette 'class ' en CSS. Vous pouvez d'ailleurs en trouver les composants en faisant une petite recherche dans le code source de la page.

Cette propriété CSS est cependant bien plus simple que l'on peut le penser :

.pas_copier {
height:167px;
width:300px;
background:url('../images/consommer-avec-moderation.jpg') center center no-repeat ;
}

et elle ne demande donc qu'une seule image supplémentaire à mettre, toute petite, en général de 1 px par 1 px que l'on place ainsi : " <img src="../images/image_a_copier-.gif" alt="image avec protection par la CSS" title="image avec protection par la CSS" class="pas_copier"/> "

image avec  protection par la CSS

Que se passe t-il si je veux copier cette image ?

- En copiant l'image au click droit vous récupérez une image vide !

- En faisant un glisser/deposer sur le bureau , vous récupérer une image vide !

- En faisant (dans FireFox) "afficher l'image" , vous voyez une image vide !

- Le plug-in " down them all ", ou autres plugins d'ailleurs, vous propose de copier l'image vide !

- Désactiver le javascript dans ce cas ne sert a rien ! , toujours cette image vide ! ...

- Désactiver la css va la faire disparaître totalement !

Solution (il y en a toujours une !) : Pour la trouver , scrutez le css et cherchez une image de background appliqué a une balise image !

En bref 3 lignes de css pour proteger une image:

- sa hauteur.

- sa largeur.

- et son adresse mise en background.

La source de ce script, ainsi que quelques autres variantes, est visible sur le site de GC

Une autre solution bien sympa, dans la CSS, pour interdire l'impression de la page:

@media print {
img {
display:none;
}
* , .pas_copier { /* toutes les images d'arriere plan, reprendre les class et id si necessaire */
background-image:none;
}
}

Essayez avec cette page et vous verrez bien si cette belle image est dans votre fichier qui a été imprimé ... Bien sur dans ce cas particulier, une copie d'écran est facilement réalisable pour récupérer l'image, mais si vous avez à faire à un fond d'écran, comme certains présent dans ce site, de très grandes dimensions, plus grandes que votre taille d'écran, là le problème se posera un peu plus sérieusement !

Il existe également d'autres moyens de protection via la CSS par exemple, surtout pour les images, via l'intégartion de codes plus lourds ou de fonctions en php, via également l'insertion de copyright sur les créations.

Il n'y a donc plus la possibilité de faire un clic droit pour 'enregistrer l'image sous', même si, comme moi sous FireFox, vous disposez de plugins pour le faire cela ne changera rien, et si vous regardez ou copiez le lien vers cette image, celà vous ne vous donnera rien non plus ....

Bon, une fois encore, ce n'est pas la fonction ultime, loin de là, mais on peut qaund même dire qu'avec JavaScript ou CSS l'internaute 'lambda' sera débouté, le copieur expert, lui, parviendra toujours à ses fins ... mais dans quel but ? Pourquoi copier des images qui n'ont de valeur que dans leur contexte la grande majorité du temps ?

Après ces petites démonstrations avec la CSS, qui en décourageront quand même plus d'un soyons honnête mais qui restent toujours 'contournables', pour protéger des images dans une page web, on peut encore envisager d'autres solutions "ultimes" celles-ci ...

Pour tout commentaire ou question sur ce sujet, mettre un post sur le blog, la réponse arrivera ...