Webdesign Rostock

Webdesigner gesucht?
Hobby Webdesign aus Rostock

Verwenden von Fotos, Bildern und Grafiken bei der Homepageerstellung. Lesen Sie nachfolgend, wie sich Fotos, Bilder und Grafiken in eine Homepage einfügen lassen, was hinsichtlich der Optimierung von Bildern, dem Copyright und der Verwendung von Creativ Commons zu beachten ist und welche Bild-Dateiformate es gibt...

Fotos, Bilder und Grafiken in Webseiten

Viele Webseitenbetreiber möchten all ihre individuellen Fotos und diverse Grafiken in die Website eingebunden wissen. Und so hatte ich bisweilen hinsichtlich der diesbezüglichen Wünsche mancher Auftraggeber auch entsprechende Bedenken, dass ein Zuviel an Bildmaterial kontraproduktiv zur gewünschten Aussage und Absicht der zu erstellenden Homepage sein könnte. Bei der Verwendung von grafischen Elementen achte ich daher auf ein ausgewogenes Verhältnis zwischen Texten und den ausgewählten Bildern, Fotos und Grafiken.

Grafik

Zu viele Bilder oder Animationen auf einer Seite können den Leser leicht erschlagen und von textlichen Informationen, um die es eigentlich doch tatsächlich geht, ablenken bzw. ihm das Lesen derselben gar erschweren. Eine gute und platzsparende Möglichkeit ist, Bilder in der Webseite als Tumbnails in einer Lightbox einzubinden. Tumbnails sind kleine Vorschaubilder, und erst wenn man die Originalgröße sehen möchte, klickt man auf das Thumbnail, um das Bild entsprechend vergrößert angezeigt zu bekommen.

Bilder in die Homepage einfügen

Im XHTML oder HTML 5 werden Bilder wie im nachstehenden Beispiel eingefügt:

<img scr="images/xxx.jpg" width="100" height="150" alt="xxx"/>

Der Pfad, wo das Foto innerhalb der Homepagedateien liegt, wird zuerst angegeben, in diesem Beispiel im Ordner "images". Nach einem Schrägstrich wird der Name der Bilddatei angegeben, wie z.B. hier xxx.jpg, und es folgen die Angaben der Bildmaße sowie die textliche Kurzbeschreibung innerhalb des alt-Attributes. Bei HTML 5 entfällt der Schrägstrich vor der schließenden spitzen Klammer.
Anzeige
Im CSS können außerdem weitere Eigenschaften für das Aussehen des eingefügten Bildes festgelegt werden. Soll das Bild ohne Rahmen erscheinen, so gilt im CSS die Anweisung { border : 0;} bzw. für Bild mit Rahmen { border : 1px;} als dünne Strichstärke. Auch Rahmenfarbe, Aussehen des Rahmens usw. wird im CSS definiert. Ebenso auch die flexible Anpassung eines Bildes für die unterschiedlichen Displaygrößen der Endgeräte (Responsive Design). Dies gilt dann für jedes eingefügte Bild gleichermaßen bzw. lassen sich auch Festlegungen für unterschiedliche Darstellung von Bildern innerhalb der Homepage treffen.

Auf diese Weise lassen sich alle Bild-Dateien, wie Fotos, Grafiken, Banner, Logos, Icons, Smilies u.a. in eine Webseite einbinden. Generell ist auf die jeweilige Pixel-Größe der Bild-Datei zu achten, die in die Homepage eingebunden werden soll, da die Ladezeiten abhängig sind von der bei den Usern eingesetzten Übertragungstechnik. Datenübertragung per DSL High Speed macht bezogen auf Kilo- und Megabytes sicher kaum Probleme, aber bei langsameren Verbindungen oder älteren Equipment und auch in internetfähigen Handys kann es schon etwas dauern, bevor ein zu megabyte-lastiges Bild entsprechend angezeigt wird. Insofern habe ich für diese Website im CSS die Einstellungen so vorgenommen, dass die oben stehende große Headergrafik in Smartphones nicht geladen und somit in Handy-Displays nicht angezeigt wird.
Anzeige
Es empfiehlt sich, stets mit entsprechendem Bildbearbeitungsprogramm eine Bildoptimierung vornehmen, und zwar in der Art, dass dennoch die Bildqualität beim Betrachten gewährleistet bleibt und das Bild nicht allzu sehr verpixelt wird. Derzeit finden die beiden Grafikformate GIF und JPEG im Internet die meiste Verwendung, da diese Formate von allen Browsern unterstützt, also entsprechend angezeigt werden.

Dateiformate, Copyright, Creativ Commons

Dateiformat JPEG (Joint Photographies Expert Group)

JPEG bzw. JPG reduziert im Bild die Anzahl der Bits, und es werden wiederholt vorkommende Bilddaten eliminiert. Daher kann mit JPEG viel Speicherplatz gespart werden, es ist das gebräuchliche Dateiformat, um einen datensparenden Bilddatentransfer vornehmen zu können und findet daher im Internet hauptsächlich Verwendung. Das Verfahren der Komprimierung ist allerdings nicht verlustfrei. Dieser Dateityp entfernt, wie schon erwähnt, Farbdetails aus dem Bild und fasst auf diese Weise größere Bildflächen mit einheitlichen Werten zusammen. Diese Farbdaten werden später wieder in das Bild gerechnet, so dass es vollständig zu sehen ist, und so ist die Datenverdichtung mit dem Verlust zwar vorhanden, aber nicht oder nur wenig sichtbar. Es sind bis zu 1,6 Millionen Farben speicherbar. Der Vorzug von JPEG besteht darin, dass sich der Grad der Komprimierung festlegen lässt.

Dateiformat GIF (Graphics Interchange Format)

Das Format GIF dient der Speicherung und Übertragung von Pixel-Grafiken, die aus einer Vielzahl von Bildpunkten bestehen. Jeder einzelne Pixel hat eine Farbtiefe von 8 Bits, was einer Auflösung von 256 Farben entspricht. Die Kompression erfolgt auf einfache Weise und wird nicht extra festgelegt. Das Anzeigen einer GIF-Datei auf der Homepage geht sehr schnell vonstatten, und zwar über Interlace. Es handelt sich dabei um einen stufenweisen Aufbau des Bildes, in dem ein Zeilensprungverfahren abläuft, wie beim Empfang von Fernsehzeilen.

Interlace bedeutet übersetzt Verflechten. Das Bild baut sich, sofern es sich beispielsweise um eine langsamere Datenübertragung per Modem handelt, zuerst grob und in voller Fläche auf. Das hat den Vorteil, dass der Betrachter bereits erkennen kann, um was für ein Bild es sich handelt. Mit dem steigenden Datentransfer wird das Bild nach und nach feiner bis zu seiner vollständigen Größe aufgelöst.

Copyright von Bildern und Grafiken

Auch Bilder und Grafiken, die im Internet zu finden sind, unterliegen zumeist einem Copyright, und das bedeutet, dass es einen Autor gibt, der die Rechte an diesen Werken hat. Urheberrechte sind einzuhalten, denn eine Verletzung ist kein Kavaliersdelikt und kann eine kostenpflichtige Abmahnung zur Folge haben. Es empfiehlt sich daher, eigene Fotos, Bilder und Grafiken zu verwenden, um nicht mit den gesetzlichen Bestimmungen in Konflikt zu geraten. Möchte man jedoch ein schönes Foto eines anderen Autors mit in seine eigene Homepage einfügen, dann ist in jedem Fall der Besitzer des Copyright zu konsultieren, ob er dem zustimmt.

Verwendung von Creativ Commons (CC)

Dabei handelt es sich um eine Non-Profit-Organisation, die sechs unterschiedliche Lizenzverträge für die Veröffentlichung und Verbreitung digitaler Medieninhalte, so also auch von Bildmaterial anbietet. Die Autoren bzw. Rechteinhaber bestimmen dabei selbst, unter welchen Bedingungen ihr Werk (z.B. Foto) genutzt werden darf. Der einfachste CC-Lizenzvertrag sieht vor, dass der Nutzer, der zum Lizennehmer wird, den Namen des Urhebers/Rechteinhabers, also des Lizensgebers, bei der Veröffentlichung mit angibt. Es gibt jedoch auch Lizenzen, die weitere Einschränkungen behinhalten. D.h. ob beispielsweise ein Foto kommerziell genutzt werden darf, ob Bearbeitungen und Veränderungen an dem Original erlaubt sind oder ob nicht.

Auf der Website wikimedia.de sind viele Fotos enthalten, die als sogenannte gemeinfreie Bilder ohne jegliche Bedingungen frei verwendet werden dürfen, weil eine Lizenz nach Ablauf einer gewissen Zeit nicht mehr vorhanden ist. Ebenso lassen sich viele Bilder mit einfachen Lizenzbedingungen, also nur mit der Bedingung auf Namensnennung des Autors, finden. Auch sind beispielsweise auf der Seite http://de.freepik.com diverse Fotos, Vektorgrafiken und PSD-Formate zu finden. Grundsätzlich sind die angeführten CC-Lizenzen jedoch zu beachten und einzuhalten, wenn man nicht mit dem Urheberrecht in Konflikt geraten will, was u.U. auch recht teuer werden kann.


Einbinden von Sound bei der Homepageerstellung

Auf der folgenden Seite finden Sie einige Informationen, wie sich ein Musik Player in Webseiten einfügen und sich Sound in eine Homepage einbinden lässt:

Mehr lesen

Anzeigen