Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Basiswissen

Bilder auf Webseiten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Was wären Webseiten ohne Bilder oder grafische Elemente? Genau, ziemlich unansehnliche und langweilige Textwüsten. Werfen Sie also einen Blick auf die gängigen Grafikformate und was Sie beim Einsatz von Grafikdateien beachten müssen.

Transkript

Was wären Webseiten ohne Bilder oder grafische Elemente? Genau, ziemlich dröge und graue Textwüsten, die man nur gezwungenermaßen durchwandern möchte. Selbst wenn man meint, Grafiken oder Bilder seien überflüssiger Firlefanz, der nur vom eigentlichen Inhalt ablenkt, wird man rasch feststellen, dass ein kleines Icon hier, ein Hinweispfeil da, oder eine dezente Grafik dort der Informationsvermittlung enorm aufhelfen kann. Werfen wir also einen Blick auf die gängigen Grafikformate und was Sie beim Einsatz von Grafikdateien beachten müssen. Die vier wichtigsten Grafikformate für Webdesigner sind: JPG, GIF, PNG und SVG. Die vier Formate haben alle ihre Besonderheiten, auf die Sie achten müssen. Doch bevor wir uns damit beschäftigen, stellen wir einige grundsätzliche Überlegungen zum Einsatz von Grafiken auf Webseiten an. Bevor Sie Grafiken auf Webseiten einsetzen, müssen Sie wissen, wie ein Browser überhaupt mit Grafiken umgeht. Denken Sie immer daran, dass eine Grafik zuerst via Internet vom Server an den Browser geschickt werden muss, damit er sie darstellen kann. Dummerweise gilt nun aber, dass die Bildqualität um so besser ist, je größer einer Datei. Je größer aber eine Datei, desto länger dauert ihr Transport via Internet. In der Praxis heißt das, Sie müssen immer einen Kompromiss finden zwischen Dateigröße und Qualität. Das ist nicht ganz einfach und verlangt viel Erfahrung. Dieser Punkt ist besonders wichtig, je stärker Smartphones und Tablets in unseren Alltag Einzug halten. Denn moderne Mobilgeräte besitzen ein hochauflösendes Display, sind aber oft über langsame Verbindungen mit dem Internet verbunden. Schließlich müssen Sie daran denken, dass Sie im Prinzip nur vier verschiedene Grafiktypen einsetzen, nämlich die vier genannten JPEG, GIF, PNG und SVG. Nur diese vier werden heute von allen Browsern unterstützt. Das weithin populäre Format TIFF zum Beispiel gehört nicht dazu. Es hat also wenig Sinn, beim Entwurf einer Webseite mit TIFF-Grafiken arbeiten zu wollen. Diese Dateien müssen vor ihrem Einsatz in eines der gängigen Formate konvertiert werden. Schauen wir uns nun einmal die einzelnen Formate etwas genauer an. Nun beginnen wir mit JPEG. JPEG steht füt Joint Photografic Experts Group, also für die Verbindung der Fotografie-Experten. Das ist dann etwas pompöser Name, den diese Gruppe aber völlig zurecht trägt. Das JPEG-Format wurde Anfang der 90er-Jahre entwickelt und sehr schnell zum dominierenden Standardformat für Bilder und Grafiken aller Art. Es ist bis heute das wohl populärste Grafikformat überhaupt und das nicht nur im Internet. Das Format unterstützt Millionen von Farben, was es zum idealen Format für Fotos macht. Alle gängigen, digitalen Kleinbildkameras oder Smartphones speichern ihre Fotos in diesem Format ab. JPEG ist unter anderem deshalb so beliebt, weil das eine hohe Qualität bei relativ kleinen Dateigrößen ermöglicht. Allerdings wird dabei eine verlustbehaftete Komprimierung benutzt, das heißt, je kleiner die Dateien werden, desto mehr Bildinformationen gehen verloren und desto schlechter wird die Qualität. Der zweite große Grafikstandard ist GIF. GIF steht für Graphics Interchange Format. Dieses Format wurde 1987 vom Onlinedienst CompuServe entwickelt und sehr schnell zum populärsten Grafikformat im Internet allgemein und im Web insbesondere. GIF weist einige Besonderheiten auf. GIF-Dateien haben eine Farbtiefe von 8-Bit, können also maximal 2 hoch 8, also 256 Farben darstellen. Das ist nicht viel, reicht für viele grafische Elemente aber aus. Anders als JPEG arbeitet GIF mit einer verlustfreien Komprimierung. Es gibt in diesem Format, also trotz recht kleinen Dateigrößen, keine Bild-Informationen verloren. GIF-Dateien werden bis heute vor allem für Icons und Grafiken mit einfachen geschlossenen Farbflächen benutzt. Außerdem unterstützt das Format Transparenz, es sind also etwa Freisteller möglich und einfache Animationen. Nie war es einfacher, Bewegbilder in's Netz zu bringen, als mit GIF. Ein typisches GIF sieht also ungefähr so aus, wie in diesem Beispiel. Wir haben eine Grafik auf weißem Grund, also eine freigestellte Grafik. Mit einigermaßen geschlossenen Farbflächen, einfachen Farbverläufen, relativ wenig Bild-Informationen, für diese Art von Grafiken reichen 2 hoch 8, also 256 Farben problemlos aus, und hier ist GIF das Format der Wahl. PNG ist das dritte, sehr populäre Format. PNG steht für Portable Network Graphics. Und die Entstehung von PNG verdanken wir einem Rechtstreit. Mitte der 90er Jahre meldete die Firma Unisys Patentansprüche auf bestimmte Algoritmen im GIF-Format an. Es kam zu einem langwierigen Copyright-Streit mit CompuServe, später auch mit anderen Anbietern. Die Situation war für Anwender sehr unerfreulich, da immer die Gefahr bestand, aus heiterem Himmel wegen ein paar Grafiken auf eine Webseite verklagt zu werden. Falls Sie sich jetzt Sorgen machen, keine Angst, die Patente von Unisys sind vor einigen Jahren ausgelaufen, und laut den Experten, des Software Freedom Law Centers, ist GIF heute ein freies Format. Wie auch immer, der unsicheren Rechtslage erdanken wir das PNG Format, dass von der Open-Source-Szene, als Alternative zu GIF entwickelt, und von W3C als Standard-Format für Grafiken auf Webseiten empfohlen wird. Auch PNG hat natürlich einige Besonderheiten, und des weist als Alternative zu GIF natürlich auch Ähnlichkeiten mit GIF auf. Wie GIF, arbeitet PNG mit einer verlustfreien Kompression und wie GIF unterstützt es Transparenz. Anders als GIF kann PNG allerdings mehrere Millionen Farben darstellen, ist also durchaus auch eine Alternative zu JPEG. Der Haken, PNG-Dateien sind in der Regel erheblich größer als JPGs oder GIFs. Typischerweise wird PNG für Fotos und freigestellte Bereiche auf Webseiten eingesetzt, wie in diesem Beispiel hier, wir haben hier ein Foto mit ziemlich vielen Farben freigestellt auf weißem Grund. Das ist ein typisches PNG. JPG, GIF und PNG sind weithin bekannte Formate, für SVG gilt das noch nicht. Das Format ist noch relativ jung und noch nicht ganz trivial. SVG steht für Scalable Vector Graphics, also für skalierbare Vektorgrafik. Was das genau ist, machen wir gleich. Es ist ein auf der komplexen Auszeichnungssprache XML-basierendes Format für Vektorgrafiken, und wurde erstmals 2001 von W3C in einer Empfehlung spezifiziert. Wie genau müssen wir uns SVG also nun vorstellen? SVG ist ein Format für Vektorgrafiken. Was heißt das? Nun, ganz einfach, in solchen Grafiken werden die Bildpunkte nicht fest definiert, sondern in ihrer Beziehung untereinander beschrieben. Klingt etwas kompliziert, ist aber ganz einfach. Vektorgrafiken können Sie beliebig skalieren, also beliebig vergrößern und verkleinern, ohne dass es zu Qualitätsverlusten kommt. SVG-Dateien sind normale Text-Dateien, die mit jedem Text-Editor bearbeitet werden können. Der Clue dabei ist, SVG-Dateien lassen sich über CSS stylen. Sie können also eine SVG-Grafik einbauen, und dann zum Beispiel über CSS die Farbe verändern. SVG ist zwar ein noch etwas unbekanntes Format, wird aber inzwischen von praktisch allen webfähigen Geräten und Clients unterstützt. SVGs eignen sich besonders für Symbole und Icons, die auf eine Webseite eingesetzt und die in verschiedenen Größen auftauchen sollen, wie jetzt zum Beispiel hier dieses kleine Schlüsselsymbol.

Grundlagen der Webprogrammierung: Basiswissen

Lernen Sie die wichgsten Technologien und Begriffe des World Wide Web kennen und sehen Sie, wie Sie sie selbst anwenden können.

2 Std. 21 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!