Proteggere le immagini con i CSS

Una di quelle domande che molti dei lettori, soprattutto alle prime armi, si saranno
posti almeno una volta è "Come posso impedire agli utenti di scaricare le immagini dal mio sito?".
La risposta breve è "Non puoi". I lettori più smaliziati sapranno infatti che:

• Tutto ciò che è incluso in una pagina web viene automaticamente scaricato
  nella cache del browser
• Tutto ciò che è visibile a schermo è anche catturabile, anche
  solo con un Print Screen.

È passato ormai il tempo del Javascript per disabilitare il tasto destro e
si possono elaborare soluzioni un po' più leggere per proteggere le nostre immagini,
o quanto meno scoraggiarne il download volontario, per esempio con i CSS.
In questo articolo ne vedremo un paio che magari potranno essere di ulteriore
spunto al lettore. Prima di cominciare, ci tengo a puntualizzare che si tratta
di soluzioni aggirabili e facilmente comprensibili a chi sa un minimo di
CSS e HTML anche solo con la visualizzazione del codice.

Inibire il tasto destro con i CSS

Tutti sappiamo che con il click del tasto destro su un'immagine di una pagina
web compare la voce "Salva immagine con nome". Inibire questa funzionalità
del browser è piuttosto semplice, come è possibile notare nel primo esempio.
In sostanza si tratta di coprire totalmente la nostra immagine con un altro elemento che
abbia come sfondo una gif trasparente. In questo modo quindi il click del tasto destro
andrà a vuoto, non dando la possibilità di salvare l'immagine stessa. Partiamo dal
codice HTML dell'esempio:

Si noterà l'elemento span vuoto che segue l'immagine. Tale elemento è necessario
ai fini della tecnica, ma non influisce su contenuto e accessibilità della pagina, dato che è
presentazionalmente neutro di default. Lo span sarà infatti il nostro aggancio
grafico a cui verrà attribuito lo sfondo di copertura. Vediamo a questo punto il CSS
dell'esempio per intero:

Per il div viene specificata una larghezza esplicita
tale da consentire di contenere l'immagine (a cui verranno attribuiti quattro
pixel di padding aggiuntivi su tutti i lati) e un bordo di un pixel.
La dichiarazione fondamentale è senza dubbio position:relative, che
consente di creare un contesto per i posizionamenti assoluti.
Dopo aver reso block-level l'immagine, procederemo infatti a trattare lo span:
questo verrà posizionato assolutamente nell'angolo in alto a sinistra del div contenitore,
di cui assumerà le dimensioni. Verrà infine dichiarato come sfondo la piccola gif trasparente
(blank.gif).

Il nostro esempio è così ultimato: sono bastati uno span
aggiuntivo e tre regole CSS. L'idea può essere elaborata ulteriormente, vediamo come.

Aggiungere il copyright e proteggere l'immagine

È possibile inibire il tasto destro su un'immagine e allo stesso tempo aggiungere
una notifica di copyright sull'immagine, come nel secondo esempio
di cui riporto uno screenshot:

Il CSS del secondo esempio è sostanzialmente identico al primo. In questo caso l'immagine
usata per coprire l'immagine è una gif semitrasparente larga 550x447 pixel, in cui la porzione
al fondo è grigia e include la notifica di copyright. Vediamo il CSS per intero:

Da notare che in questo secondo esempio il messaggio di copyright copre la parte inferiore
dell'immagine, effetto che potrebbe essere non desiderato. Basta in questo caso aggiungere
un padding-bottom: 32px, (o comunque pari all'altezza della banda di notifica)
al div contenitore per lasciare intatta la superficie dell'immagine, come è stato fatto
nel terzo esempio.

Includere il copyright nell'immagine e nasconderlo con i CSS

Arriviamo all'ultimo esempio di questo articolo, che è stata ispirato
da An Update to a Savvy Approach to Copyright Messaging.
L'idea di Derek Powazek è in un certo senso l'esatto opposto degli ultimi due esempi qui visti:
si tratta infatti di includere il copyright nell'immagine stessa, e tagliarne a schermo
la parte inferiore.

Vediamo così il quarto esempio e la sua immagine utilizzata:

In questo modo l'immagine eventualmente salvata dall'utente conterrà la notifica
di copyright. Basta in questo caso attribuire dimensioni esplicite e overflow:hidden
al div contenitore, così che la parte inferiore dell'immagine non venga mostrata.
Vediamo l'HTML dell'esempio:

Ed ecco il CSS relativo che, grazie alla presenza di stili in linea nel markup risulta molto leggero:

Questa tecnica si può rivelare un po' laboriosa per la necessità di aggiungere ogni volta
il messaggio di copyright alle immagini con un programma di editing e includere stili in linea
per ogni immagine. Per aumentare ulteriormente la sua efficacia può essere combinata con quella
vista nel primo esempio, utilizzando uno span vuoto nell'HTML che sia totalmente coprente e abbia
come sfondo una gif trasparente.

Lascio al lettore la scelta della strategia da utilizzare, con la speranza di
aver fornito qualche spunto per chi si trova a voler proteggere le immagini sul
web. La compatibilità degli esempi visti, che sono disponibili per il download,
dovrebbe essere estesa a tutti i browser con un minimo supporto dei CSS. Alla prossima.