Bilder in HTML-Dokumente einfügen

Bilder werden in eine HTML-Datei per Referenz eingebunden. Das heißt, dass an der gewünschten Stelle im HTML-Quelltext ein Verweis auf die Position eingefügt wird, an der die Bilddatei gespeichert ist. Geeignete Formate sind insbesondere GIF und JPEG, mit Einschränkung auch PNG. Weitere Informationen zu den einzelnen Grafikformaten finden Sie unter Bilder erstellen, zur Erstellung von HTML-Dateien unter HTML.

Für die Veröffentlichung im Internet ist es von großer Bedeutung, dass die eingebunden Bilddateien nicht zu groß sind. Wenige Nutzer werden minutenlang darauf warten, bis sich Ihre Seite vollständig aufgebaut hat. Das gleiche gilt für das Einbinden zu vieler Bilder in eine einzige HTML-Datei. Falls Ihre Studierenden von zu Hause per Modem auf Ihre Seiten zugreifen sollen, sollten Sie darauf achten, dass die einzelnen HTML-Dateien inklusive aller referenzierten Bilder nicht größer als ungefähr 100kb sind. Die Größe einer Bilddatei hängt von verschiedenen Faktoren ab (z. B. Auflösung, Farbtiefe, Format), unter Bilder erstellen finden Sie nähere Informationen, wie Sie Ihre Bilder für eine Veröffentlichung im Internet aufbereiten sollten. 

Falls Sie Ihre Bilder manuell in den Quelltext einfügen möchten müssen Sie an der gewünschten Stelle folgenden Code einfügen:

<img src= "Pfad/zur/Datei/bild.jpg" width= "200" height= "150" alt= "Titel" >

Das Attribut „src“ ist zwingend notwendig und gibt den Speicherort des Bildes an. Die Attribute „width“ und „height“ geben die Größe des Bildes in Pixel an, dies ist beim Aufbau der HTML-Seite im Browser von Vorteil. Im Attribut „alt“ sollte ein aussagekräftiger Bildtitel angegeben werden, um dem Nutzer eine Basisinformation zur Verfügung, falls das Bild nicht angezeigt werden kann. Dies ist auch ratsam, möchte man die Accessibility-Richtlinien befolgen, die u. a. das Lesen einer Webseite auch für Blinde ermöglichen sollen.

Falls Sie Ihre HTML-Datei mit einem sogenannten WYSIWYG-Editor wie z. B. Microsoft Frontpage oder Macromedia Dreamweaver erstellen, können Sie Ihre Bilder über einen entsprechenden Befehl im Menue einbinden. In einem Dialogfenster machen Sie die notwendigen Angaben wie Position und Größe des Bildes. Diese Programme erzeugen den Quelltext automatisch.

Weiterführende Informationen zum Einbinden von Bildern in HTML-Dokumente finden Sie in dem Kompendium SELFHTML.

Bilder in PDF-Dokumente einbinden

Sie können ein PDF-Dokument aus einem Dokument erstellen, das Sie in einem anderen Anwendungsprogramm erstellt haben, z. B. Microsoft Word. Bilder, die in dieses Dokument eingefügt wurden, werden im PDF-Dokument weitgehend originalgetreu dargestellt. Wir haben für Sie Informationen zu PDF sowie eine Liste mit Programmen, mit denen Sie PDF-Dokumente herstellen können, zusammengestellt.

Achten Sie auch bei der Erstellung von PDF-Dokumenten darauf, dass die eingebundenen Bilder nicht zu groß sind, insbesondere, wenn das Dokument im Internet veröffentlicht werden soll.

Bilder in Präsentationsfolien einbinden

Mit Präsentationsprogrammen wie Microsoft PowerPoint oder OpenOffice Impress können Folien zur visuellen Vortragsbegleitung erstellt werden. Diese Folien können mit Fotos, Grafiken etc. angereichert werden. Die meisten Präsentationsprogramme unterstützen die gängigen Grafikformate wie JPEG, PNG, BMP, GIF oder TIFF.

Das Einbinden eines Bildes funktioniert in Microsoft PowerPoint folgendermaßen:
Wählen Sie die Folie, in die Sie ein Bild einfügen möchten. Analog zum Vorgehen in Word gelangen Sie über die Registerkarte „Einfügen > Grafik” zu einem Dialogfenster, in dem Sie die gewünschte Datei auswählen können. Klicken Sie auf „Einfügen” und das ausgewählte Bild wird auf der Folie platziert. Nun können Sie das Bild verschieben und durch Ziehen des Auswahlrahmens skalieren: Ziehen Sie an einer Ecke, bleiben die Bildproportionen erhalten, ziehen Sie an einer Seite, wird das Bild gestaucht bzw. gestreckt. 

In anderen Präsentationsprogrammen funktioniert das Einbinden eines Bildes meist sehr ähnlich.