Bloccare il salvataggio delle immagini del sito

Indice dei contenuti

Creare contenuti originali ed interessanti per il proprio blog e sito web è un lavoro complesso e che richiede attenzione, energie e dedizione continua. Scrivere articoli originali o rivisitati è un vero e proprio lavoro che può portare grandi soddisfazioni. Chi è in questo campo conosce benissimo cosa si prova a nel ricevere un riscontro positivo per i propri contenuti, anche un solo commento positivo ad un post può rallegrarci molto la giornata.

Per rendere interessante un articolo di blog è risaputo che implementare immagini originali migliori la comprensione del testo, rendendo più scorrevole la lettura dello stesso. Dunque anche la creazione in immagini è importante. Qui però sorge un problema che colpisce la molti blogger, “il furto delle immagini”, cioè il salvataggio e riutilizzo delle immagini del nostro sito in modo non autorizzato.

In questo post ti spiegherò passo passo come poter bloccare e impedire il salvataggio delle immagini presenti in un sito web, e una procedura semplice per prevenire questo “furto” di immagini anche in blog WordPress.

Impedire il salvataggio delle immagini del sito

Prima di spiegarti i differenti metodi per impedire che un utente esterno effettui il salvataggio delle immagini dal nostro sito, devo prima fare una premessa.

Dal momento stesso in cui visiti una pagina web di qualsiasi tipo con un browser web (Es. Chrome, Edge, Firefox), quest’ultimo scaricherà in modo autonomo tutte le immagini presenti per mostrartele a schermo. Questo significa che non esiste un modo infallibile per bloccare il download delle immagini da una pagina internet e un qualsiasi utente esperto può comunque scaricarle tramite un browser. Leggi come si possono scaricare le foto e immagini (apparentemente protette) da un sito.

I consigli che ti sto per dare dunque, ti serviranno a proteggere le immagini da utenti non esperti o con poca dimestichezza con i browser.

Posso suggerire di utilizzare uno o più metodi di questi per ottenere una protezione più completa dei contenuti. Alcuni di questi sistemi possono essere utilizzati anche per la protezione dei testi e impedire la copia non autorizzata di questi.

Metodo 1 – CSS “pointer-events”

Il metodo di protezione tramite CSS è il più utilizzato e comune, previene facilmente il download dei contenuti grafici impedendo l’interazione diretta con essi. Questo metodo in realtà può essere usato con qualsiasi elemento presente in una pagina web, poiché fa uso di una proprietà CSS integrabile in qualsiasi tag HTML.

Qui il codice esempio:

img{
   pointer-events:none;
 }

Tramite la proprietà CSS “pointer-events” con valore “none” è possibile impedire qualsiasi interazione da parte del visitatore con l’elemento predisposto (in questo caso “img“). Questo si traduce in: cliccando con il tasto destro del mouse su di una foto, non apparirà il menu contestuale con l’opzione “Salva con nome…“.

Puoi implementare il codice CSS inline (esempio: <img src="miafoto.jpg" style="pointer-events:none">) oppure in un foglio di stile. Prova a salvare la foto qui in basso.

Per chiunque abbia un po’ di dimestichezza con il CSS questo blocco è facilmente superabile.

Metodo 2 – CSS “background-image”

Il secondo metodo CSS che vedremo è più funzionale del precedente ma non infallibile. Per questa procedura sarà necessario utilizzare una proprietà CSS alternativa che permette di visualizzare una grafica come sfondo all’interno di un elemento.

In questo caso non faremo uso del tag <img> specifico per le immagini HTML, ma di un comune tag <div> come contenitore generico, ma con uno sfondo dedicato dove sarà presente la foto da mostrare.

Questo si fa con la proprietà “background-image” accompagnato dall’URL dell’immagine interessata.

<div class="image-div"></div>
<style>
.image-div{
  width:300px;
  height:400px;
  background-image: url("mia-immagine.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 
}
</style>

Questo sistema scoraggia più facilmente utenti con bassa/media esperienza. Ricorda sempre di impostare correttamente le dimensioni del div come quelle dell’immagine originale per non perdere qualità e dettaglio.

Metodo 3 – Overlay Div

Una buona alternativa ai precedenti metodi, più o meno efficace, è il metodo del “overlay div” o “div sovrapposto“. Questo sistema consiste nell’interporre sopra all’immagine <img> un <div> trasparente delle medesime dimensioni.

L’utente che intende scaricare l’immagine, penserà di fare click con il tasto destro del mouse sull’immagine, tuttavia questo verrà effettuato a sua insaputa sul div sovrapposto.

Anche con un eventuale ricerca con il “browser inspector” del codice risulterà inutile per trovare l’URL dell’immagine.

<div class="contenitore">
    <div class="divSovrapposto"></div>
    <img src="mia-immagine.jpg">
</div>

<style>
.contenitore{
  position: relative;
}
img{
  position: absolute;
  width: 100%;
  height: auto;
  top: 0px;
  left: 0px;
  z-index:-1
}
.divSovrapposto{
  position: absolute;
  width: 100%;
  height: auto;
  top: 0px;
  left: 0px;
  background-color: transparent;
  z-index: 2;
}
</style>

Questo metodo lo trovo un po’ più efficace ma meno pratico da applicare nel caso si gestiscano numerose immagini.

Metodo 4 – JavaScript

JavaScript è un vero linguaggio di programmazione che consente di definire il comportamento degli elementi HTML presenti in una pagina web. Questo significa che tramite l’integrazione di poche righe di codice JS, possiamo bloccare l’interazione degli utenti e impedire il salvataggio delle immagini presenti nel sito aggiungendo il seguente script a fondo pagina.

let immagini = document.querySelectorAll("img");
immagini.forEach((value)=>{
    value.oncontextmenu = (e)=>{
        e.preventDefault();
    }
})

In questo caso parliamo di un blocco più efficace rispetto a quello CSS, ma anche in questo caso non si tratta di un rimedio infallibile perché basterà disabilitare l’esecuzione di JavaScript nella pagina corrente.

Metodi per WordPress

Nel CMS WordPress è possibile seguire due vie alternative per la protezione delle immagini: una via codice CSS (correlato al primo metodo visto) e una via plugin.

Aggiunta di codice CSS al tema

Questa procedura consentirà di applicare la proprietà CSS “pointer-events:none” in tutte le immagini del sito WordPress attraverso l’aggiunta di regole CSS personalizzate. Per fare questa modifica:

Accedi al pannello amministratore del sito WordPress;
Clicca su Aspetto>Personalizza;
Nel menu a sinistra clicca la voce “Opzioni avanzate” poi su “CSS aggiuntivo“;
Copia e incolla il seguente codice CSS e clicca su Pubblica per confermare.

img{
   pointer-events:none;
 }

Verifica che non ci siano immagini cliccabili necessarie al corretto utilizzo del sito (es. banner pubblicitari). In questo caso provvedi alla loro esclusione[…] dalla regola CSS.

Installazione plugin

A tale scopo, puoi installare appositi plugin per WordPress. Non entrerò in merito a questo argomento ma mi limiterò a consigliarti dei buoni plugin.

No Right Click Image Plugin
Disable Right Click For WP (utile anche per disabilitare l’accesso al codice sorgente e impedire la copia dei testi)

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: