Bilderklau schwer gemacht (II)

02.07.2003 - Fortsetzung von Bilderklau schwer gemacht (I) - Äußerlich wird der Besucher mit einem neueren Browser - vom Farbton abgesehen - keinen Unterschied feststellen zwischen dem oberen orangenen und dem unteren blauen Bild. Dennoch lässt sich das blaue Bild scheinbar nicht kopieren. Ein kurzer Blick in den Quelltext bringt auf Anhieb keine Erklärung. Beide Bilder sind in einer Tabellenzelle eingebunden:

Zeile 27:
<td bgcolor="#FFFFFF" style="padding:0; vertical-align:bottom" width="200px"><img src="../bilder/paris_orange.jpg" width="200" height="207" border="0" alt="Eiffelturm orange"></td>

Zeile 45:
<td bgcolor="#FFFFFF" class="extra" style="padding:0; vertical-align:top" width="200px"><img src="../bilder/paris_blau.gif" width="200" height="207" border="0" alt="Eiffelturm blau"></td>

Bei genauerem Hinsehen entdeckt man, dass es sich bei dem unteren Bild um ein GIF handelt, im Gegensatz zu dem oberen Bild, das im JPEG-Format eingebunden ist. Die Frage, warum man nach dem Abspeichern des GIFs auf diesem nichts sieht, lässt sich leicht beantworten: Bei der Grafik handelt es sich um ein Blind GIF, d.h. es ist vollständig transparent, eine Eigenschaft, die JPEG-bilder nicht aufweisen können. Offen bleibt allerdings die Frage, wo denn nun der blaue Eiffelturm versteckt ist.

Beim Vergleich der beiden Tabellenzellen fällt auf, dass die Zelle in Zeile 45 einer CSS-Klasse "extra" zugeordnet ist. In der externen CSS-Datei bilderklau.css finden wir in Zeile 11 folgende Definition für Tabellenzellen, die der Klasse "extra" zugeordnet sind:

td.extra { margin:0; padding:0; width:200px; height:207px; background-image:url(../bilder/extra.jpg); background-repeat:no-repeat; }

Neben weiteren Angaben wird hier auch der Hintergrund definiert, in diesem Fall durch die Angabe einer Hintergrundgrafik. Des Rätsels Lösung: das transparente GIF paris_blau.gif liegt über dem Hintergrundbild extra.jpg, das den Eiffelturm in blau aufzeigt. Da beim einfachen Kopiervorgang niemals ein Hintergrundbild übertragen wird, sondern stets die "normal" eingebundenen Grafiken, ist dies zumindest ein Schutz gegen Bilderklauer, die sich mit den Raffinessen von HTML und CSS nur bedingt auskennen. Es ist allerdings auch ein recht umständliches Unterfangen, Bilder auf diese Weise in seine Webseite einzufügen, für jede einzelne Grafik muss eine gesonderte Style Sheet Klasse definiert werden. Man kann die Hintergrundbilder natürlich auch ohne CSS direkt im Quelltext unterbringen, dort sind diese dann allerdings auch leichter zu entdecken:

<td background="../bilder/extra.jpg" style="padding:0; vertical-align:top" width="200px"><img src="../bilder/paris_blau.gif" width="200" height="207" border="0" alt="Eiffelturm blau"></td>

Das Einbinden von Hintergrund-Grafiken mittels HTML berücksichtigt auch ältere Browser, die nicht CSS-fähig sind und das Bild ansonsten überhaupt nicht anzeigen. 100%-igen Schutz vor unerlaubtem Kopieren bieten diese Verfahren allerdings nicht, wertvolle Bilder sollte man besser durch Einfügen eines Wasserzeichens schützen.

Zum Thema Content-Klau siehe auch Webnotizen Textklau! und Traffic-Klau