Mathe und Info

Seite

Image <img>

Sinn und Zweck

Über Sinn und Zweck von Bildern braucht man wohl im Zusammenhang mit Internet nicht soviel zu reden.
Mit Hilfe dieses Tags kann man Bilder auf einer Website anzeigen lassen. Allerdings muss man bei der Verwendung von Bildern auch auf

Rechtliche Probleme bei Bildern im Web

hinweisen. Das Internet zählt offiziell als öffentlicher Raum. Konkret für Bilder bedeutet das, ein Bild im Internet veröffentlichen ist dasselbe, wie eine Anzeige in einer Zeitung zu veröffentlichen oder ein Buch drucken zu lassen. Speziell bei Bildern gibt es ein Urheberrecht und ein Persönlichkeitsrecht.

Urheberrecht: Wer ein Bild in seine Website einbaut (dabei muss das Bild nicht notwendigerweise auf dem eigenen Server liegen), muss die Veröffentlichungsrechte daran besitzen. Einfach ausgedrückt, ist es dein Bild / Logo, dann darfst Du es veröffentlichen, sonst nicht.
Persönlichkeitsrecht: Jeder Mensch besitzt das Recht am eigenen Bild. Das bedeutet, dass man nicht einfach ein Foto von jemand Fremdes machen darf und es im Internet veröffentlichen darf. Man benötigt die Einwilligung des / der Betroffenen.
Folgen bei Verstößen: Unabhängig von der Größe, (selbst bei 10x10 Pixel und weniger) kann ein Verstoß gegen das Urheberrecht oder das Persönlichkeitrecht zu erheblichen Kosten führen. Es gibt Anwaltskanzleien, deren Hauptzweck in der Suche nach solchen Verstößen besteht. Dann folgt schnell eine Abmahnung mit Kosten von mindestens 500€. Es sind aber auch schon Abmahnungen wegen Bildern in Höhe von mehreren tausend Euro ausgestellt worden.

Jeder sollte für sich prüfen, ob er vielleicht absichtlich oder unabsichtlich auf seiner Website Bilder von anderen veröffentlicht hat. Es sind schon Leute wegen des Bildes einer Bratwurst verklagt worden ...

Jetzt aber zurück zu dem eigentlichen Thema dieses Artikels:

Dem Image Tag <img>

Beispiele für <img>

Ähnlich wie bei dem Link wird in dem Starttag die Information abgelegt, welches Bild gemeint ist. Dies wird in dem Attribut src abgelegt:

Man sieht sofort, dass <img> ein Tag ohne Inhalt und Endtag ist. Das Bild wird dann an der Stelle im Text angezeigt. Desweiteren ist <img> ein sogenanntes Inline-Element. Ebenfalls möglich ist es auf ein Bild auf einer anderen Website zu verweisen:

ACHTUNG: Es gelten auch hier die Regeln für das veröffentlichen von Bildern. D.h. die Bilder müssen nicht auf dem eigenen Server liegen, es reicht, wenn sie auf der eigenen Website angezeigt werden, um dafür haftbar gemacht werden zu können.

Attribute des Image Tags

Neben dem notwendigen src (sonst wäre das Tag sinnlos) gibt es noch ein paar weitere Attribute, die wichtig sind. Da wären z.B.:

height:
verändert die Höhe, Angabe in Pixel.
width:
verändert die Breite, Angabe in Pixel.
alt:
Alternativer Text, wird angezeigt, wenn das Bild nicht geladen werden kann.

Zusammen sieht das dann so aus:

Empfehlung: Man sollte bei allen Bildern einen alternativen Text anbieten, falls das Bild nicht geladen werden kann, oder das Bild nicht dargestellt werden kann.
Inbesondere auch für behinderte Menschen ist die alternative Beschreibung wichtig. So können sie wenigsten lesen / vorgelesen kommen, was zu sehen "wäre".

Dateigrößen bei Bildern

Alle Bilder, die auf einer Website angezeigt werden, werden zunächst von dem Server auf den lokalen PC heruntergeladen und dann vom Browser angezeigt.
Selbst bei einem Flatrate-Anschluss und einem sehr schnellen Internetzugang macht die Dateigröße eines Bildes etwas aus.
Dies lässt sich sehr einfach an einem Thumbnail (also einer kleinen Vorschau eines Bildes) erklären.
Wenn ein Bild (von einer Digi-Cam mit 3 MegaPixel) abgespeichert wird, so benötigt es ca. 0,5 Megabyte. Klingt nicht viel, aber wenn dieses Bild als Bitmap abgespeichert wurde, so sind es direkt 80 MB(!).
Wenn dieses Bild aber auf einer Website nur in der Größe 30x30 Pixel angezeigt werden soll, so macht es keinen Sinn, zuerst 80 MB herunterzuladen und dann auf 30x30 anzuzeigen.
Daher gibt es folgende Ratschläge, die bei der Bereitstellung von Grafiken berücksichtigt werden sollten:

Skaliere mit einer Grafiksoftware die Bilder auf die beabsichtigte Größe
Benutze ein speichersparendes Format (gif oder jpg)
Speichere die Bilder in unterschiedlichen Auflösungen, wenn nötig.
Verwende die Attribute height und width nur um kleinere Anpassungen zu machen

Dateiformate bei Bildern

Bei den Dateiformaten gibt es weniger Probleme. Die modernen Browser können auch die gängigen Bildformate alle darstellen. Wer jedoch mit einem sehr ausgefallen Grafikprogramm arbeitet, der kann schon mal auf Schwierigkeiten stossen.
Insbesondere können i.d.R. keine Vektorgrafiken von Browsern angezeigt werden. Daher sind Pixel-Formate zu verwenden. Jedes Grafikprogramm kann in gif, jpg oder bmp (als letzte Wahl) exportieren. Diese drei Formate kann wirklich jeder Browser anzeigen.

Infoblätter und Arbeitsblätter

Das <img> Tag und die wichtigsten Attribute
Info: Dieses Infoblatt beschreibt die wichtigsten Attribute des Image-Tags. Desweiteren gibt es grundsätzliche Informationen über den Umgang mit Bildern im Netz., z.B. rechtliche Grenzen und Probleme

HTML Aufgabe zum Image-Tag
Info: Die Aufgabenbeschreibung für das Image-Tag. die benötigten Bilder für diese Aufgabe s.u.. Das Infoblatt zum Thema Image-Tag findet man unter Informatik/HTML.

Raw-Bilder für die Übung zum Image-Tag
Info: Dies ist eine ZIP Datei, die die benötigten Bilder für die Hausaufgaben enthält.