MeowcateLe 01/04/2016 à 15:14
En fait, au lieu de mettre une image de dimension W*H, on crée un élément vide (div, span, qu'importe) de taille W*H avec le sprite en background, et on déplace la position du background de x;y.
Il ne s'agit donc pas à proprement parler d'une image mais d'un élément avec un background spécifique.
Bien sûr, cette technique est à réserver uniquement aux éléments de design (boutons, bordures, icônes...) car cela casse l'interaction qu'on peut avoir avec des images (comme tout le menu contextuel d'une image obtenu par un simple clic droit).
Mais cette technique peut justement être utilisée pour protéger (superficiellement) une image : on en fait un background d'un élément de taille identique, et dans cet élément on met une image composée d'un pixel transparent 1x1 étiré aux dimensions de l'image. Un clic droit pour enregistrer l'image, et on se retrouve en fait avec un pixel transparent. Ça n'empêche absolument pas de récupérer l'image si on creuse deux secondes, mais c'est plus élégant que les scripts JS bloqueurs de clic droit.