Kann ich Bilder auf meiner Website vor dem Kopieren schützen?

9 Kommentare
Mathias Gamper, Senior Screendesigner

Immer wieder taucht die Frage auch, ob und wie man Bilder, die man auf einer Website veröffentlicht, gegen unerlaubtes Kopieren schützen kann. Grundsätzlich kann man diese Frage mit Nein beantworten. Es gibt zwar verschiedene Methoden, wie man einem Bilderdieb das Handwerk erschweren kann, doch jede Methode hat auch ihre Schwächen. Aber schauen wir uns das im Detail an.

Grundlagen

Bilder werden nach folgendem Prinzip im Quelltext unserer Wesbsite eingebunden. Natürlich passiert das meist im Hintergrund, beispielsweise über ein CMS):

1<img alt="Christbaumkugeln" src="/picures/christbaumkugeln.jpg" />

Das Bild-Element (img) enthält dabei den Dateipfad zum Bild (/picures/christbaumkugeln.jpg) sowie einen Alternativ-Text (Christbaumkugeln). Der Alternativtext beschreibt allen sicht-sehenden Besuchern unserer Website (Suchmaschinen, Screen-Reader-Benutzer, Nur-Text-Browser) den Inhalt des Bildes in Textform.

Unser Browser wird diesen Code dann folgendermassen darstellen:

Christbaumkugeln
Dieses Bild ist so in keiner Weise geschützt.

Um diesem Bild nun zumindest einen gewissen Schutz zu geben, bieten sich folgende Möglichkeiten an:

  1. Unterdrückung der rechten Maustaste im Browser
  2. Überlagerung des Bildes durch unsichtbares Schutzbild
  3. Bild über CSS als Hintergrundbild einbinden.
  4. sichtbares Wasserzeichen auf das Bild
  5. unsichtbares Wasserzeichen auf das Bild

1. Unterdrückung der rechten Maustaste im Browser

Der einfachste und gängigste Weg Bilder aus dem Internet auf den eigenen Rechner zu laden, ist der Klick mit der rechten Maustaste auf das Bild. Darauf erscheint das Kontextmenu, worüber das Bild abspeichert oder in die Zwischenablage kopiert werden kann.

Ansatz

Über einige Zeilen JavaScript lässt sich das Kontextmenu unterdrücken. Da das Kontextmenu aber viele weitere nützliche Funktionen bietet (z.B. das Vor-/Zurückblättern im Browser), sollte zumindest darauf verzichtet werden das Kontextmenu komplett zu deaktivieren, da dies insbesondere bei Benutzern, die intensiv davon Gebrauch machen für Verwirrung oder gar Verärgerung sorgen dürfte. Wir schränken damit die Usability (Benutzerfreundlichkeit) ein.
Sollte diese Methode trotzdem zum Einsatz kommen, ist darauf zu achten, möglichst nur bei Bildern das Kontextmenu zu unterdrücken. Somit steht zumindest in allen Nicht-Bildbereichen einer Website die Kontextfunktion wie gewohnt zur Verfügung.

Christbaumkugeln
Rechte Maustaste über dem Bild unterdrückt (nur bei aktiviertem JavaScript).

Vorteile

  • meist relativ kleiner Aufwand zum Implementieren, insbesondere über ein CMS

Nachteile

  • kann durch deaktivieren von JavaScript im Browser einfach umgangen werden
  • über Drag'n'Drop (also durch Mausklick und ziehen) kann das Bild weiterhin kopiert werden
  • hält Screenshots nicht stand

Fazit:

Diese Methode kann – gewusst wie – leicht umgangen werden und kann somit höchstens unerfahrene Benutzer vom Kopieren abhalten. Zudem greifen wir hier in Funktionalität ein, an die sich die Benutzer gewöhnt haben, was nie unproblematisch ist. Empfehlung: Einmal eingebaut funktioniert es ohne weiteres Zutun. Schutzwirkung: gering.

2. Überlagerung des Bildes durch unsichtbares Schutzbild

Die beiden Nachteile der Methode mit unterdrücktem Kontextmenu hat die nächste Methode nicht – dafür allerdings wieder andere.
Doch von Anfang an: Wollen wir auf JavaScript verzichten und auch das Kopieren per Drag'n'Drop verhindern, so bringt uns dieser Trick weiter: Das Bild, das geschützt werden soll, bekommt eine Art Schutzschicht. Diese Schutzschicht besteht nicht aus Stacheldraht und Pfefferspray, sondern – aus einem weiteren Bild. Einem unsichtbaren Bild um genau zu sein. Dieses legen wir deckungsgleich über das zu schützende Bild. Möchte nun ein Langfinger sich an unserem Werk zu schaffen machen, sei es über die rechte Maustaste, oder über Drag'n'Drop, erwischt er immer nur das darüber gelegte, unsichtbare Bild. Und das darf er natürlich gerne verwenden. Der Bilderdienst Flickr schützt seine Bilder nach dieser Methode. Aber probieren Sie selbst:

Christbaumkugeln

Schutz durch darübergelegtes unsichtbares Bild.

Vorteile

  • besserer Schutz als 1. Methode, da schwerer zu umgehen
  • kein Eingriff in die Browser-Funktionalität
  • kein JavaScript nötig

Nachteile

  • aufwendig zu Implementieren und für Laien somit kaum anwendbar
  • zusätzlicher HTML-Code notwendig
  • Bildpfad kann über den Quelltext weiterhin gefunden und somit kopiert werden
  • hält Screenshots nicht stand

Fazit:

Diese Methode scheint verlockend, hat sie doch die gewichtigsten Nachteile der ersten Methode ausgeschlossen. In der Praxis – und somit in der Regel in Kombination mit einem CMS – dürfte diese Methode nur durch eine entsprechende technische Erweiterung effizient zu nutzen sein. Empfehlung: Für HTML-Könner eine gute Methode, die weniger schnell umgangen werden kann. Schutzwirkung: gering bis normal.

3. Bild über CSS als Hintergrundbild einbinden.

Browser erkennen Bilder nur als solche, wenn diese auch als Bilder im HTML-Quelltext ausgewiesen werden. Update (28.11.2014): Neue Browser bieten im Kontextmenü auch Hintergrundbilder zum Download an.
Doch es gibt eine andere Möglichkeit, Bilder auf einer Website darzustellen. Bilder können auch mit Hilfe von CSS als Hintergrundbild eingefügt werden. Dies ist eigentlich für rein dekorative Bilder gedacht, funktioniert aber natürlich mit allen anderen Bildern.

 

Bild über CSS als Hintergrundbild eingebunden

Vorteile

  • kein Eingriff in die Browser-Funktionalität
  • kein JavaScript nötig

Nachteile

  • hoher Aufwand zum Implementieren, daher kaum für Massen tauglich
  • Bild ist über diese Methode nicht mehr Zugänglich/Barrierefrei (kein alt-Attribut möglich). Das bedeutet, dass unser Bild beispielsweise für assistive Technologie wie Screenreader, wie blinde Menschen sie benutzen, unsichtbar bleibt
  • Bilder, die über die CSS-Methode eingebunden sind, lassen sich nur in der Originalgrösse darstellen und nicht skalieren. Update (28.11.2014): Gilt nur für Internet Explorer 8 und kleiner. Alle neuen Browser unterstützen das Skalieren von Hintergrundbildern via CSS (background-size-Eigenschaft).
  • viele Browser lassen das Anzeigen (und somit kopieren) von CSS-Hintergrundbildern über das Kontextmenu (Hintergrundgrafik anzeigen / Hintergrund speichern unter) zu
  • Bildpfad kann über den CSS-Quelltext weiterhin gefunden und somit kopiert werden
  • hält Screenshots nicht stand

Fazit

Diese Methode ist wie die der Überlagerung technisch anspruchsvoll und kann kaum von Ungeübten verwendet werden. Der gewichtigste Punkt aber ist, dass Bilder so von nicht-sehenden Besuchern nicht wahrgenommen werden können. Empfehlung: Für HTML/CSS-Könner eine Methode einzelne Bilder zu integrieren. Für die Masse – da nicht barrierefrei – nicht zu empfehlen. Schutzwirkung: gering bis normal.

4. sichtbares Wasserzeichen auf das Bild

Eine simple, aber effektive Methode ein Bild ohne irgendwelche technischen Web-Tricksereien zu schützen, sind die guten alten Wasserzeichen, also das Überlagern des Bildes durch eine halbtransparente Grafik oder einen Copyright-Text. Das kann mit jedem Bildbearbeitungsprogramm erstellt werden. So werden die Bilder auch bei vielen Online-Bildagenturen geschützt.


Grafik als Wasserzeichen

Vorteile

  • keine technischen Tricks in HTML nötig
  • relativ einfach zu lösen
  • je nach Platzierung des Wasserzeichens wirksamer oder weniger wirksam (kann am Rand auch ohne Kenntnisse einer Bildbearbeitung gut abmaskiert werden)
    hält auch Screenshots stand

Nachteile

  • manuell recht aufwändig
  • je nach Platzierung des Wasserzeichens wird das Bild unansehnlich oder gar unkenntlich
  • Bildbearbeitungsprofis können das Wasserzeichen in aller Regel entfernen

Fazit

Diese Methode eignet sich für Bildagenturen wo die Bilder die Einnahmequelle bilden, ist aber für andere Verwendungszwecke meist keine Alternative. Empfehlung: Wer keinen grossen Wert auf eine tolle Darstellung legt fährt mit dieser Methode richtig. Schutzwirkung: Je nach Anwendung niedrig bis hoch.

5. unsichtbares Wasserzeichen auf das Bild

Die professionellste Methode ist das Versehen der Bilder mit einem für das menschliche Auge unsichtbaren Wasserzeichen. Dies kann über professionelle Bildbearbeitungsprogramme (beispielsweise Adobe Photoshop über Filter > Digimark) generiert werden. Dieses Wasserzeichen hinterlegt unsichtbare Identifikationsdaten im Bild selber. Bei dieser Methode müssen dem Anbieter aber Lizenzgebühren (in der Regel für eine gewisse Anzahl Bilder) entrichtet werden.

Digimark-Menü in Photoshop

Digimark-Menü in Photoshop

Vorteile

  • keine technischen Tricks in HTML nötig
  • so gut wie nicht mehr manipulierbar
  • keine sichtbare Veränderung des Bildes
  • Tracking möglich (je nach Preismodell). Damit kann im Internet automatisiert nach kopierten Bildern gesucht werden.
  • hält auch Screenshots stand

Nachteile

  • Kosten
  • Bild kann natürlich trotzdem kopiert werden, verliert aber das Wasserzeichen nicht

Fazit

Die Profi-Lösung für alle, die ihre Bilder um jeden Preis schützen möchten. Details finden sich im Fotolia-Blog. Empfehlung: Schöne Bilder ohne HTML-Trickserei, dafür aber kostenpflichtig. Schutzwirkung: hoch

Schlussfazit

Die Methoden 1-3 lassen sich mit den notwendigen Kenntnissen recht einfach umgehen.
Wer diese Kenntnisse nicht hat, kann sich immer noch mit einem Screenshot (Windows: Taste «Print Scrn», Mac: Apfel-Shift-3) das Bild ohne Umwege auf den heimischen Rechner holen. Auch der Browser selber speichert jedes Bild beim Abruf auf der lokalen Festlatte des Benutzers im Cache, wo es durch clevere Bilddiebe aufgestöbert werden kann.
Alleine deswegen lohnt sich der relativ hohe Aufwand für all diese Schutzmechanismen in der Praxis kaum.

Bei den Wasserzeichenmethoden ist die Aushebelung des Schutzes hingegen schon aufwendiger oder gar unmöglich. Ob man dafür aber gewillt ist, unschöne weil sichtbare Wasserzeichen oder Kosten auf sich zu nehmen, muss je nach Anwendungszweck beurteilt werden. Ein Profifotograf dürfte hier andere Ansprüche als ein Hobbyfotograf haben.

Ergänzend ist noch das Einbinden über spezielle Formate (PDF, Flash) zu erwähnen. Auch diese Methoden können gewissen Schutz bieten, müssen sich aber spätestens beim Screenshot auch geschlagen geben.

Alle aufgeführten Methoden haben also ihre Nachteile. Generell aber gilt: Der einzig wirklich sichere Schutz für Ihre Bilder ist, diese nicht ins Internet zu stellen.

Update (7.4.2011): Wie der Einsatz von Digimark in der Praxis ausschauen kann, behandelt der Artikel «Using Digimarc for Copyright Protection in Photoshop».

Bild «Christbaumkugeln»: photocase.com © misterQM

neuen Kommentar erstellen

Alex's Gravatar
Was passiert denn, wenn ich per digimark geschütztes Bild kopiere, in ein Grafikprogramm einfüge und erneut speichere? ISt das Wasserzeichen dann noch da?
Alex, am 18. Januar 2010 um 15:13 Uhr
Mathias Gamper's Gravatar
Ja, Digimark sollte selbst dem Kopieren oder Grössenveränderungen des Bildes standhalten.
Mathias Gamper, am 18. Januar 2010 um 15:17 Uhr
Normand Bellemare's Gravatar
Hallo Hr. Gamper,

täusche ich mich, oder nicht? Wenn ich einen Screenshot mache und anschließend das gewünschte Bild "ausschneide", dann ist doch das Digimarc-Wasserzeichen auch "verschwunden"; oder?
Normand Bellemare, am 10. März 2011 um 14:37 Uhr
Mathias Gamper's Gravatar
Das Digimarc-Wasserzeichen ist zwar für das menschliche Auge unsichtbar, trotzdem aber optisch auf dem Bild hinterlegt und so maschinell auslesbar. Somit werden diese Copyright-Informationen auch bei einem Screenshot im Bild erhalten und sollen – laut Digimark – selbst Bildmanipulationen standhalten.
Mathias Gamper, am 10. März 2011 um 15:22 Uhr
Normand Bellemare's Gravatar
Danke für die Rückmeldung,

das werde ich heute Abend doch gleich mal ausprobieren müssen...
Normand Bellemare, am 10. März 2011 um 15:24 Uhr
Bruno Walter's Gravatar
Hallo Herr Gamper

Habe mit viel Interesse Ihren Artikel über den Schutz von Bildern gelesen. Zur Zeit habe ich meine Seite, welche sehr Hochwertige Tieraufnahmen zeigt deaktiviert. Ich habe mich lange damit auseinander gesetzt meine Bilder zu schützen, Fazit: Mir wurden nur in der letzten Woche fast jeden Tag >30MB geklaut. Nun habe ich am Freitag, bevor ich Ihren Bericht gelesen habe, den Digimarc Professional gekauft. Ich habe so dass Gefühl, dass diese Software ihren Dienst gut erledigt. Sie verhindert zwar nicht, das Kopiert werden kann, aber die Bilder sind auffindbar im Netz. Ich habe dieses Programm schon früher einmal gesehen, aber die lieben Kosten hielten mich doch ab. Nun habe ich 99 US $ bezahlt für 2000 Bilder und das ist O.K wenn man die Dienstleistung dahinter beachtet. Auf jeden Fall ist es nun so, dass ich alle meine Bilder neu berechnen lasse und diese dann mit dem Digimarc Urheber Schutz rechtlich schütze. In der zwischen Zeit habe ich auch mit dem Java Script, welches die Rechte-Maustaste blockiert herumgepröbelt, aber das Ergebnis ist nicht sehr überzeugend, da das Script ja auch bei jedem Bild eingebunden werden muss. Danke noch einmal für Ihren Beitrag. Mit freundlichen Grüssen Bruno Hess
Bruno Walter, am 11. Mai 2014 um 08:06 Uhr
JamesD's Gravatar
Mit diesem Thema habe ich mich lange mit Webdesign Winterthur beschäftigen müssen, da wir bezgl. der Umsetzung extrem unterschiedlicher Meinung waren. Am Ende habe ich mich durchgesetzt. Meine Bilder sind meine Bilder
JamesD, am 20. März 2016 um 11:04 Uhr
Yvette's Gravatar
Ist natürlich so ne Sache. Ich mag es auch nicht, wenn meine Bilder von jedem benutzt werden. Und dann muß man eventuell noch nachweisen, das man der Eigentümer ist. Ich lasse sie deshalb regelmässig sichern und auf DVD kopieren. Man weiß ja nie wie alls in Versuchung kommt
Yvette, am 18. August 2016 um 17:09 Uhr
Bitte lassen Sie dieses Feld leer
Kommentar hinzufügen


Bitte lassen Sie dieses Feld leer
Beitrag als E-Mail verschicken
E-Mail via Webmail versenden

Schön, dass Ihnen unser Beitrag gefallen hat. Benutzen Sie folgende Social Networking Dienste, um den Beitrag abzulegen und zu verteilen. Selbstverstädlich können Sie ein direktes Lesezeichen auf diesen Artikel setzen.