Der Kniff mit der vom Dieb nicht bemerkten "Kopiersperre"! -- Die Blindgrafik oder Transparent-GIF --

Oft wird im Internet die Frage gestellt, "wie kann ich meine Bilder vor missbräuchlichem Zugriff schützen?..."
Die Antwort muss in jedem Fall lauten, dass es wirklich sicheren Schutz im "Netz" nicht gibt... gar nicht geben kann!
Der einzige 100% Schutz ist der: Man stelle seine Bilder nicht online!!! Viele werden diese Weisheit nicht hören wollen, aber es nicht hören zu wollen, ändert leider nichts daran...

Einen recht brauchbaren Kopierschutz gibt es aber dennoch. Für alle die auf das Onlinestellen ihrer Bilder nicht ganz verzichten möchten, die Grafiken aber trotzdem nicht unbedingt mit einem hässlichen Wasserzeichen/Copyright-Aufdruck verunstalten wollen, bleibt noch der Trick mit der Blindgrafik, den ich Interessierten mit diesem Tutorial etwas näher bringen möchte. Und ich gebe dabei nicht nur Tipps wie man das umsetzen kann, sondern weise vor allem auch auf die die Fehler hin, die man dabei besser nicht machen sollte!

Bilddiebe gehen in der Regel immer gleich vor, sie speichern auf ihrer Tour über X Webseiten ein Bild nach dem anderen und sehen erst nach einer gewissen Zeit nach, was es denn so erbracht hat...
Unerfahrene Diebe glauben, wenn sie die kleinen, transparenten und für sie völlig wertlosen GIF's in ihrem Bildordner vorfinden, dass es sich um deffekte Dateien handelt. Erfahrenere wissen jetzt natürlich gleich, dass sie reingelegt wurden. In beiden Fällen aber wissen sie normalerweise nicht mehr, wo sie denn nun das eigentliche Bild zu klauen versucht haben und um welches Bild (Aussehen) es sich gehandelt hätte. Und bei auch nur halbvollen Cache ist es fast aussichtslos, die richtigen (fehlenden) Bilddateien noch zu finden...
Ein weiteres grosses Plus dieser Art seine Bilder zu schützen, ist zweifellos die Tatsache, dass damit eigentlich nur Diebe behindert werden, der gewöhnliche User wird davon kaum betroffen oder gar eingeschränkt sein.

Die bekanntesten und (leider) am meissten verbreiteten Kopiersperren sind zweifellos Rechtsklick- und Markiersperre, basierend entweder auf reinem HTML (im Body-Tag) oder JavaScript. Solche Kopiersperren gaukeln dem unerfahrenen Webmaster/Webmistress eine Sicherheit vor, die reine Utopie ist.
Solche Sperren (egal ob HTML oder Java Script), können nur all zu leicht "augehebelt" werden, wer sich auch mal nur kurz mit diesem Thema etwas ausführlicher auseinander gesetzt hat, weiss wie...
Das grösste Problem an Markier- und Rechtsklicksperre: Der Schutz auf diese Art ist nicht nur löchrig wie ein Schweizer Käse, nein, diese Scripte sind ein empfindlicher Eingriff in die Freiheit von jedem User, seine Mausfunktionen uneingeschränkt nutzen zu können; und da die meisten User in friedlicher Absicht im Netz unterwegs sind, drifft es dabei vor allem sie!
Wer also solchen "Unfug" (Sorry, aber anders kann man solche Scripte nicht nennen) auf seiner Seite einbaut, ist sich offensichtlich nicht bewusst, dass noch viele weitere sehr praktische Funktionen mit der rechten Maustaste direkt abgerufen werden können, als nur "speichern unter", und dass das Markieren noch anders genutzt werden kann, als zum "rüberziehen" von markierten Bildern und Texten, in der Absicht diese zu missbrauchen...

Wer es nicht glaubt, der sollte sich mal diese Seite etwas genauer anschauen: Aktion Freiheit für die rechte Maustaste

So, jetzt wieder zurück zum Thema dieser Seite. Hier werden drei Beispiele gezeigt, wie man das mit der Blindgrafik - auch Transparent-GIF genannt - umsetzen kann. Das erste Beispiel ist nicht zu empfehlen. Warum? Siehe Text neben dem Beispiel.
Vorschläge zwei und drei sind dann die positiven Beispiele...

Foto 1 Renn-Truck
«1) Bild als Hintergundgrafik unter Blindgrafik
So wurde es bisher immer gemacht: Über diese Grafik/Foto, die mit CSS als Hintergrund in ein DIV (oder transparente Tabelle) gesetzt ist, ist das transparente GIF einfach darüber gelegt, also nicht mit Position-absolute positioniert, deshalb erscheint beim Markieren im Internet Explorer ein schwarzes Rechteck über dem Bild...
Doch leider könnte gerade dies dem Dieb auffallen... Fazit: Nicht zu empfehlen!

Doch der Clou beim Kopierschutz mit einer Blindgrafik besteht gerade darin - unter anderem weil der Dieb beim Abspeichern nicht gehindert wird - dass nichts auf das Vorhandensein eines Kopierschutzes hinweisst; deshalb sollte dieser Eindruck natürlich möglichst mit nichts entkräftet werden!

Es wird darauf spekuliert, dass der Dieb die Seite mit der Blindgrafik verlässt (Diebestour wo anders fortsetzt) ohne den Schwindel sofort zu bemerken und er es gerade deshalb vor Verlassen der Seite natürlich auch nicht für nötig hält, den Quelltext nach dem Originalbild (URL der Datei) zu durchsuchen, oder gar einfach einen Screenshot zu machen...
Bemerkt er dann später - wenn er nachschaut was die Tour denn so erbracht hat - dass er reingelegt wurde, weiss er in der Regel nicht mehr, wie das Originalbild ausgesehen hat von dem er nur die Blindgrafik in seinem Bildordner vorfindet, geschweige denn, wo er das Original zu klauen versucht hat...

Was sagt das alles jetzt aus? Je besser die Illusion für den Dieb, desto grösser ist der eigentliche Schutz der Bilder vor unbefugtem Zugriff!


Foto 2 Renn-Truck
Blindgrafik mit "position: absolute" platziert (2»
Um das schwarzfärben der Blindgrafik beim Markieren (IE) zu verhindern, muss man einen DIV (Tabelle ist definitiv nicht zu empfehlen) mit style="... position: relative; ..." vorbereiten, damit die Blindgrafik mit style="... position: absolute; ..." über den Hintergrund positioniert werden kann (Verschachteln mit CSS).
Dadurch kann das zu schützende Bild direkt mit einem IMG-Tag in den DIV gesetzt werden (statt als Hintergrundgrafik) da durch die absolute Positionierung das GIF in jedem Fall darüber zu liegen kommt.

Die Illusion, dass es sich beim speicherbaren Bild um die sichtbare Grafik handelt, wird durch den Text in "title" (MouseOver-Text - in allen Browsern sichbar) im IMG-Tag der Blindgrafik noch gesteigert.
Um die Illusion so gut wie perfekt zu machen - zumindest im Internet Explorer - sind die Bildmenueleisten (auf dieser Seite in allen drei Beispielen) NICHT deaktiviert worden ;)
Bildmenueleiste beim Mozilla Firefox     Bildmenueleiste beim Internetexplorer

Das zweite Beispiel ist also bereits um einiges sicherer als das erste. Doch man kann noch mehr tun! Um das nachträgliche Auffinden der Bilddatei in den temporären Internetdateien auf ein absolutes Minimum zu verringern, kann man die zu schützende Grafik zerschneiden und die Teilbilder im DIV wieder zu einem scheinbaren Ganzen zusammenfügen. Die Blindgrafik wird dann wie in Beispiel 2 absolut über die Teilbilder positioniert.
Bei folgendem Beispiel wurde die Bilddatei in der Breite in 6 Teilbilder zerschnitten.


Foto 3 Renn-Truck
«3) Beispiel Teilbilder
Hier wurde im Unterschied zum obersten Beispiel (1), zwei Dinge verändert:
Zum einen ist das GIF hier mit style="... position: absolute; ..." über das zu schützende Bild positioniert (wie in Beispiel 2), was den Vorteil hat, dass beim Markieren der Blindgrafik über dem Bild, dieses teiltransparent grau (Raster) erscheint. Also kein Unterschied zum 'normalen' Bild und somit ist der Dieb nicht gewarnt.
Zum anderen wurde hier die zu schützende Grafik in 6 Teile zerschnitten, um das Aufinden im Cache (nachdem der Dieb lange nach Verlassen der Webseite - die er dann in der Regel nicht mehr finden kann - den 'Betrug' bemerkt hat) zusätzlich zu erschweren...

Es ist eine Tatsache, dass es selbst bei nur halbvollem Cache bereits sehr, sehr schwierig ist, eine unzerschnittene Grafik (von der man in der Regel nicht mehr genau weiss wie sie ausgesehen hat, geschweige denn, gar nicht wissen kann wie sie heisst) im ganzen Wirrwar des Cache aufzufinden... ausser man ist z.B. Informatiker und kennt die Tricks wie man vorgehen könnte.
Ist die Grafik dann noch zerschnitten, so dass man bei "Miniaturansicht" in den Internetdateien auf den Teilbildern kaum etwas erkennen kann und wählt man zudem den Dateinamen geschickt - also kein Dateiname der naheliegend wäre - hat man es dem Bilddieb fast unmöglich gemacht, die passende/n Datei/en aufzufinden...
In den drei Beispielen wurde die zu schützenden Bilddateien nicht lkw[.].jpg genannt, sondern wkl[.].jpg, also einfach lkw rückwerts. Versucht jetzt der Dieb die Datei mit der Suche zu finden und gibt "lkw", "truck" oder "lastwagen" ein, wird die Suche erfolglos ablaufen... Aber das ist natürlich nur ein Beispiel wie man den Dateinamen wählen kann, um das Aufinden der Dateien mit der Suche zu verhindern. Man kann naturlich auch andere "unpassende" Namen wählen, oder eine Folge von Zahlen und/oder Buchstaben.
Dabei sollte man es sich aber auf keinen Fall zu schwer machen, man soll ja schliesslich selber nicht den Überblick verlieren, sondern es lediglich dem Dieb erschweren...

Und was ganz wichtig ist!!! Jedes zu schützende Bild muss sein eigenes Transparentgif erhalten (unterschiedliche Namen der Blindgrafiken) da sonst andernfalls spätestens beim (vermeintlichen) Speicherversuch des zweiten Bildes, der Dieb gewarnt wird...
«C:Dokumente und Einstellungen......blabla.gif besteht bereits. Möchten Sie sie ersetzen?» erscheint und der Dieb weiss, hier kann etwas nicht stimmen! [???]

Auch sollte man unbedingt vermeiden [!], die Blindgrafiken beispielsweise transparent[1].gif, transp[2].gif, blanco[3].gif, leer[4].gif, abstandhalter[5].gif oder gar blind[6].gif ect. zu nennen. Diebe sind vielleicht gewissenlos, aber in der Regel (leider) nicht bescheuert!
Doch im Gegensatz zu den Originalbildern, kann man für die dazugehörigen Blindgrafiken dann ruhig Namen wie lkw1.gif, truck2.gif oder laster3.gif nennen - man sollte sogar - denn es soll beim Abspeichern für den Dieb ja möglichst authentisch wirken! *g*

Hier ist der Code zum Kopieren! Masse natürlich anpassen...


<style type="text/css">
<!--
div.dbs1 {
  position: relative ;
  left: 0px;
  top: 0px;
  margin-bottom: 15px;
  width: 301px;
  height: 201px;
  overflow: hidden;
}

img.ibs1 {
  position: absolute ;
  left: 0px;
  top: 0px;
  width: 300px;
  height: 200px;
}

div.links {
  float: left;
  margin-right: 15px;
}

div.rechts {
  float: right;
  margin-left: 15px;
}

div.mitte {
  position: relative;
  left: 50%;
  margin-left: -150px;
/* margin-left entsp. hier minus halbe Bildbreite */
}

//-->
</style>
<div class="dbs1 links">
      <img src="bild-name.jpg" width=300 height=200 />
    <img class="ibs1" src="blindgrafik-name.gif" alt="alternativer Text / Bildbeschreibung" title="hier steht ein mouseOver-Text" />
</div>

<!-- Oberes Beispiel mit ungeteiltem Bild,
                          unteres Beispiel mit 6 Teilbildern. -->


<div class="dbs1 rechts">
      <img src="teilbild1-name.jpg" width=50 height=200 /><img src="teilbild2-name.jpg" width=50 height=200 /><img src="teilbild3-name.jpg" width=50 height=200 /><img src="teilbild4-name.jpg" width=50 height=200 /><img src="teilbild5-name.jpg" width=50 height=200 /><img src="teilbild6-name.jpg" width=50 height=200 />
    <img class="ibs1" src="blindgrafik-name.gif" alt="alternativer Text / Bildbeschreibung" title="hier steht ein mouseOver-Text" />
</div>
«StyleSheet (Head / CSS-Datei)
Bildercode (Body-Bereich)»
Der Code auf der linken Seite kommt in den Head-Bereich - ohne die CSS-Auszeichnung (blau) in ein CSS-Dokument - fettmarkiertes anpassen!
Rot markiert sind die Klassen...
Diese müssen im StyleSheet mit denen im Bildercode übereinstimmen. links, rechts oder mitte kann man wählen, je nachdem ob man...

...das Bild links mit rechts umfliessendem Text, oder...
...das Bild rechts mit links umfliessendem Text, oder...
...das Bild in der Mitte haben möchte - ohne Text daneben.
Das Umfliessen des Textes kann vorzeitig abgebrochen werden, einfach <br style="clear: left;" /> für das Beispiel "links" oder <br style="clear: right;" /> für das Beispiel "rechts" in den Quelltext einfügen, und weiterer Text geht unter dem Bild weiter.

Die zu schützende Grafik/Bild, kann entweder am Stück eingefügt werden (oberer Bildercode) oder in, in der Breite aufgeteilten, Teilbildern. Die Anzahl und Grösse der Teilbilder im Code und die Biler-URL's einfach anpassen und den Bildercode so oft wiederholen, wie gleich grosse zu schützende Bilder vorhanden sind...
Wichtig! Das Bild sollte nur in der Breite, nicht aber in der Höhe zerschnitten werden! Das Einfügen in zwei oder mehreren Zeilen wäre zwar machbar, doch spätestens beim Markieren des fertigen Ergebnisses, zeigt sich die Schwachstelle (nur im IE): Ab der zweiten Zeile der zu schützenden Teilbilder wird die darüberliegende Blindgrafik schwarz (siehe wie bei erstem Beispiel ganz oben auf dieser Seite).

Tipp: Es ist einfacher, wenn alle zu schützenden Bilder auf die gleiche Grösse (Höhe und Breite) gebracht werden; so kann man für alle das gleiche Style Sheet (Masse nur einmal anpassen) verwenden!
 
Nutzungsbedingungen: Sämmtliche Bilder und Texte auf dieser Seite unterliegen dem Copyright von @carmentrigs und dürfen weder kopiert, noch unter eigenem Namen veröffentlicht werden. Einzige Ausname davon bildet der Code, der auf dieser Seite zum Kopieren angeboten wird und die Blindgrafiken. Der Code darf zum schützen der Bilder auf der eigenen Webseite genutzt werden; es ist aber strengstens untersagt, den Code seinerseits den Besuchern auf der eigenen Webseite zum Kopieren anzubieten und ihn damit sozusagen als sein Eigentum auszugeben!
Auf der eigenen Webseite einen Link zu dieser Seite anzubringen, ist jedoch erwünscht, die Seite darf dabei aber nicht innerhalb des eigenen Framesets angezeigt werden!