Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Proteggere le immagini con i CSS

Tecniche per scoraggiare il download non desiderato di immagini
Tecniche per scoraggiare il download non desiderato di immagini
Link copiato negli appunti

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:

<div class="picture">
<img src="sample.png" alt="Foto di Londra"><span></span>
</div>

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:

div.picture{; position:relative;
    border: 1px solid #ccc}
div.picture img{display:block;padding:4px}
div.picture span{position: absolute;top: 0;left: 0;
    width: 100%;height: 100%;background: url(blank.gif)}

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.

È 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:

Figura 1 - Screenshot dell'esempio
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:

div.picture{;position: relative;
    background: #C7C7C7;border: 1px solid #999}
div.picture img{display:block;padding: 4px}
div.picture span{position: absolute;top: 0;left: 0;
    width: 100%;height: 100%;background: url(copyright.gif) center bottom}

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.

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:

Figura 2 - Immagine dell'esempio
immagine dell'esempio

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:

<div class="picture" style=";;overflow:hidden">
<img src="sampleCopyright.png" alt="Foto di Londra">
</div>

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

div.picture{border:1px solid #333}
div.picture img{display:block}

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.

Ti consigliamo anche