kulturbanause blog

Illegalen Bilddownload einschränken

Aufgrund vieler Anfragen über meine “Technik” den unerwünschten Download meiner Bilder zu verhindern habe ich mich dazu entschlossen eine kleine Anleitung zu schreiben.

Eins vorweg: Es gibt keine Möglichkeit den Download komplett zu verhindern. Ich erkläre im Folgenden jedoch eine Möglichkeit die Inhalte zumindest für semiprofessionelle User zu “tarnen”. Ebenso integriere ich eine unübersehbare Copyright-Information in die Grafik um so zumindest sicherzustellen, dass jeder User der das Bild zu klauen versucht nicht später behaupten kann er hätte nicht gewusst, dass dieses Bild urheberrechtlich geschützt ist.

Das Workaround setzt Photoshop- und Coding-Kentnisse voraus.

Copyright-Hinweis verstecken und Bild positionieren

Wir beginnen damit die Bilddatei mit einem Copyright-Hinweis zu versehen. Dazu vergrößern wie die Arbeitsfläche des Bildes um eine beliebige Anzahl an Pixeln nach oben oder unten. In diesen neuen Bildbereich schreiben wir unseren Hinweis.
Nun wechseln wir in unseren Quellcode und erstellen einen Div-Container mit der ID #image-container und weisen ihm mit CSS die Abmessungen des später sichtbaren Bildes (also abzüglich die Höhe des Copyright-Hinweises) zu. In diesem Container definieren wir unser Bild als Hintergrundbild und positionieren es oben links. Sollte der Copyright-Hinweis oben im Bild angebracht sein, so muss der Hintergrund mittels negativem margin um die Höhe des Hinweises verschoben werden.

<div id="image-container"></div>

#image-container {
  background:url(../Pfad zum Bild) 0 0 no-repeat;
  padding:0;
  position:relative;
  width: Breite des Bildes;
  height: Höhe des Bildes;
}

Wenn nun ein Seitenbesucher mittels “Rechtsklick > Hintergrund anzeigen/speichern” das Foto anzeigt, so wird er unseren Copyright-Hinweis unweigerlich sehen. Soviel zu Schritt eins.

Rechtsklick verhindern

Um ein Bild vor dem Rechtsklick zu schützen erstelle ich zunächst ein 1 Pixel großes transparentes GIF. Dieses GIF speichere ich ab und nenne es “do-not-steal-my-images.gif”. Nun erstellen wir einen neuen Div-Container weisen ihm die Klasse “.magic-cap” zu, vergeben per CSS eine Höhe sowie eine Breite von 100% und kacheln unsere GIF-Grafik als Hintergrundbild hinein. Den neuen Div-Container positionieren wir nun innerhalb des bestehenden Bild-Divs. Nun liegt über dem sichtbaren Bild eine Fläche unsichtbarer 1px-großer GIFs.

<div id="image-container">
  <div class="magic-cap"></div>
</div>

#image-container {
  background:url(../Pfad zum Bild) 0 0 no-repeat;
  padding:0;
  position:relative;
  width: Breite des Bildes;
  height: Höhe des Bildes;
}
 
.magic-cap { /* a small step to save my images */
  height:100%;
  float:left;
  background:url(../do-not-steal-my-images.gif) repeat;
  position:relative;
  width:100%;
}

Praxistest

Wenn nun ein Seitenbesucher versucht mittels Rechtsklick das Foto anzuzeigen erhält er lediglich eine leere GIF-Datei. Der Dateiname “do-not-steal-my-images.gif” dient dazu dem Besucher bereits an dieser Stelle klarzumachen, dass das Bild nicht zum Download gedacht ist.
Wer das Bild trotzdem downloaden will muss in den CSS-Quellcode und dort an entsprechender Stelle den Pfad zur Hintergrundgrafik finden. Diesen Pfad gibt er wieder in der Adresszeile ein und erhält schließlich unser Bild. Jedoch inkl. des für den Besucher bisher unsichtbaren Copyright-Vermerks.

EXIF-Daten verwenden und Quellcode komprimieren

Um das Bild zusätzlich zu schützen (wie erwähnt, es gibt keinen 100 prozentigen Schutz) kann noch der CSS-Quellcode mittels einem Kompressions-Tool zusammengefasst werden. Dies reduziert die manuelle Lesbarkeit des Codes und sollte noch einige Diebe mehr abschrecken.
Dem Bild verpassen wir mit Bridge noch einige EXIF-Daten wie Copyright und/oder Autor.

Kein semantisches Markup!

Das hier beschriebene Workaround zeigt eine Möglichkeit auf, Fotos zu schützen. Da das Foto jedoch als Hintergrund eines Divs im Quellcode auftaucht und zudem ein zweiter “Schutz-Div” darüberliegt, ist die semantische Struktur des Quellcodes mehr als fragwürdig. Das Foto liegt nun nichtmehr als HTML-Inhalt vor, sondern wird nur mittels CSS angezeigt. Seitenbesucher die beispielsweise mittels Screenreader den Quelltext erfassen finden demnach an entsprechender Stelle nur sinnlose und für sie überflüssige Quelltext-Informationen vor. Das eigentliche Bild ist für diese Menschen unsichtbar. Auch ALT oder TITLE-Attribute fehlen vollständig. Die mit dieser Methode geschützten Bilder werden daher auch von Suchmaschinen nicht oder nur schlecht indiziert.

Ich verwende diese Methode ausschließlich zum Schutz von Layout-Grafiken.

Themenverwandte Artikel:

Folgende Beiträge könnten dich ebenfalls interessieren.

• W3C Unicorn: HTML, CSS, Feed & Mobile Validator
• Photoshop-Farben als Hexadezimalwert/HTML kopieren
• Internet Explorer 9 (IE9) Platform Preview
• Video Zen-Coding
• Zen-HTML/CSS/Coding: Schneller, besser, cooler!