Come impedire il salvataggio di foto o immagini dal mio blog o sito?
Di Marco Barontini del 03/04/2012 @ 21:20:00, in CSS Design
Spesso vorremmo impedire il salvataggio di una foto o di un’immagine
che abbiamo pubblicato sul nostro blog (o sito web).
Diciamo subito che non è possibile impedire una simile operazione.
Basta avere un po’ di dimestichezza con i browser e qualsiasi contenuto pubblicato online è scaricabile.
Tuttavia è possibile complicare un po’ le cose e, quanto meno, ostacolare tutti quegli
utenti meno esperti che di fronte ad una bella foto cliccano con il tasto destro del mouse per
scegliere la voce “Salva con nome…”.
Il sistema che vi mostrerò si basa su di un semplice meccanismo che sovrappone
una foto trasparente a quella originale. In questo modo facendo clic con il tasto destro
del mouse e scegliendo “Salva con nome…” si salverà
solo la trasparenza e non la foto “vera”.
Mettiamo ad esempio che la foto da inserire nel nostro blog sia quella rappresentata qui sotto:
Il codice HTML da inserire sarà pertanto il seguente:
<img src=”image-m-048.jpg" width="530" height="398">
Per rendere la nostra foto non salvabile si deve sostituire il codice visto sopra con il seguente:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" style="background-image:url(image-m-048.jpg);" width="530" height="398">
In pratica la nostra immagine sorgente (img src) è diventata questa riga
data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
Che altro non è che la trasposizione codificata in base64 di un’immagine gif di 1x1 pixel trasparente.
R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
è un'unica stringa (negli esempi qui sopra spezzata su 2 righe a causa della formattazione della pagina).
La vera immagine è stata inserita nella proprietà background-image.
Per una corretta funzionalità è necessario impostare le dimensioni esatte dell’immagine
originale (in questo caso width="530" height="398").
Se volete provare l'effetto provate a scaricare questa foto con il tasto destro del mouse:
(La foto fa parte della mia raccolta disponibile nella sezione Foto gratis)