HTML & CSS: 🌉 Bilder! // Der Weg zur eigenen Webseite! - Guide.
Heute befassen wir uns mit Bilder auf unserer Webseite. Welche Bildformate sind für das Internet geeignet? Wie binde ich Bilder/Grafiken auf einer Seite ein? Und vieles mehr! Ich wünsche dir viel Spaß beim Durchlesen.
Wenn dir etwas unklar ist, schreib einfach einen Kommentar. Ich freue mich schon drauf.
Was wir bisher gelernt haben.
Bald dürfen wir uns Webdesigner nennen!! Wir können schon mit dem HTML-Grundgerüst umgehen, Texte formatieren und einige HTML-TAGs wie DIV und SPAN. In einer extra Ausgabe beschäftigten wir uns nochmal mit den neuen HTML5-Elemente wie header, nav, section, article, aside und footer. Seit dem letzten Teil können wir auch schon CSS schreiben und richtig auf der Seite einbinden.Auf gehts!
START
Bilder in Webseiten
Webseiten ohne Bilder oder Grafiken? Das wären ziemlich langweilige Textpassagen, die man sich nur durchliest, wenn man es muss. Selbst diejenigen, die meinen das Grafiken nur vom eigentlichen Inhalt ablenken, werden feststellen müssen, dass jedes noch so kleine Grafik auf der Seite helfen kann, deine Inhalte zu verstehen.
Die wichtigsten Grafikformate für uns Webdesigner sind: jpg, gif, png und svg.
Es gibt zwar wesentlich mehr Formate, doch diese werden von allen modernen Browsern an allen Endgeräten unterstützt.
Bevor wir Grafiken auf der Webseiten einbinden, müssen wir verstehen, wie unser Browser mit Grafiken umgeht. Wichtig ist dabei, dass jede Grafik einen langen Weg zurücklegen muss, bis sie bei uns zuhause ist. Sie wird von unseren Webserver mittels Internet zu uns nach Hause "transportiert".
Das große Problem: Umso höher unsere Bildqualität, umso länger dauert der Transport, wenn wir die Bildqualität enorm verringern, sieht unser Bild aber nicht mehr schön aus.
Wir müssen also einen Mittelweg zwischen Dateigröße und der Qualität finden. Dies ist schwieriger als es sich anhört. Dies gibt besonders für mobile Endgeräte (Smartphone und Tablet). Moderne Geräte haben sehr hohe Bildschirmauflösungen, aber eine langsamere Internetverbindung.
Du solltest auch schon bei der Planung deiner Seite beachten, dass du nur mit den vier Formaten: jpeg, gif, png und gif arbeitest. Nur diese werden überall unterstützt!
Formate
Jedes Format hat seine Besonderheiten
Bevor wir die Bilder einbinden und hochladen können, müssen wir alle in eines der vier Formate konvertieren. Ich gehe zuerst alle vier Arten ausführlich durch.
JPEG
Den Anfang macht jpeg. Dies steht für Joint Photografic Experts Group. Der Name spricht schon Fotografie-Experten an. JPEG wurde Anfang der 1990 entwickelt. Schnell wurde es zum Standardformat für Bilder und Grafiken. Bis heute ist es das populärste Grafikformat, nicht nur im Web. Millionen von Farben werden unterstützt, einfach Ideal für Fotos.
Fast alle Kameras und Smartphones speichern ihre Bilder in jpeg.
Ein weiterer Vorteil: Relativ kleine Dateigrößen bei hoher Qualität.
Der Nachteil: Wenn man die Bilder komprimiert, gehen auch Bildinformationen verloren und die Qualität wird schnell schlechter.
GIF
Das zweibeliebteste Grafikformat ist GIF. Dies steht für Graphics Interchange Format. 1987 entwickelte CompuServe (ein Onlinedienst) das GIF-Format. Es wurde schnell zu einem beliebten Grafikformat im Web.
Das GIF-Format ist jedoch ganz besonders. Die Dateien haben nur eine Farbtiefe von 8-Bit. Maximal können also 2 hoch 8 (also 256) Farben dargestellt werden. Natürlich sind das nicht viele Farben, aber für Icons und Grafiken mit einfachen Farbflächen ausreichend
Ein Vorteil: Das Format unterstützt transparenz (jpeg tut das nicht) und einfach Animationen sind möglich.
Das GIF-Format ermöglichte bewegte Bilder im Web.
Beispiele für GIFs
Da ich selbst wenig passende Bilder im GIF-Format hege, hab ich trotzdem einen Link für euch mit vielen GIF's. Man kann sich da ein sehr gutes Bild darüber machen, wie man das GIF-Format sehr gut nutzen kann.PNG
PNG ist ein weiteres sehr beliebtes Format. Es steht für Portable Network Graphics.
Dieses Format entstand bei einem Rechtsstreit. In der Mitte der 1990er hob die Firma Unisys einige Patentansprüche auf Algoritmen im GIF-Format. Es entwickelte sich ein langandauernder Streit um das Copyright mit der vorhin erwähnten Firma CompuServe.
Die Situation war angespannt und viele Anwender fürchteten wegen ein paar Bilder verklagt zu werden. Keine Sorge, die Patente sind vor vielen Jahren ausgelaufen und damit ist das GIF-Format heute lizenzfrei.
In diesen unsicheren Zeiten entstand das PNG-Format. Es wurde als alternative zum GIF-Format entwickelt. Vom W3C (die Vereinigung die die Webstandards festlegen) wird empfohlen PNG als Standardformat zu verwenden.
Die Besonderheiten von PNG: Da es Ähnlichkeiten zu GIFs aufweist, gibt es hier auch eine verlustfreie Kompression. Transparenz wird auch unterstützt.
Der Vorteil: PNG kann im Gegensatz zu GIF mehrere Millionen Farben darstellen. Es ist also auch eine Alternative zum JPEG-Format.
Der Nachteil: Durch diese riesige farbvielfalt steigt natürlich auch die Dateigröße.
Wo verwende ich das PNG-Format? Ich nutze es für Fotos, die transparente Stellen haben.
SVG
Das letzte Format, dass ich vorstelle ist das SVG-Format. Es ist noch relativ jung und stellt dennoch eine recht große Verbreitung dar. Es steht für Scalable Vector Graphics.
Im Jahr 2001 wurde das Format erstmals vom W3C empfohlen. Es ist eine Auszeichnungssprache, die auf dem Format XML basiert. Das Format wurde für Vektorgrafiken geschaffen.
Was sind Vektorgrafiken? Das sind Grafiken bei denen keine Bildpunkte festgelegt sind. Bei normalen Bilder (jpg, png) ist einfach festgelegt, dass der erste Bildpunkt den Farbwert rgb(0,0,0) haben soll. Vektorgrafiken beschreiben die Beziehung untereinander. Durch dieses Prinzip lassen sich diese Grafiken beliebig vergrößern und verkleinern, ohne Qualitätsverlust.
SVG-Dateien können theoretisch auch mit dem Text-Editor bearbeitet werden, da sie normale Textdateien sind.
Das Besondere: SVG-Dateien können über CSS gestylt werden. Damit ist es beispielsweise möglich eine SVG-Datei einzubinden und später über CSS den Hintergrund oder sonstige Farben zu ändern.
Das Format wird von allen modernen Geräten unterstützt. Es eignet sich besonders für Logos, Symbole und Icons auf unserer Webseite.
Das Beispielbild für SVG ist aus technischen Gründen hier auf steemit.com nicht möglich, da ich ein Beispiel trotzdem noch auslassen wollte, hab ich einen Link für euch:
zum SVG-Beispiel
Da ich derzeit kein passendes Bild fand, hab ich eines von pixabay gewählt, einer Plattform für freie Bilder. Gemacht von OpenClipart-Vectors.
Einbinden.
Wie können wir Bilder in unsere Webseite einbinden?
Wenn man Bilder in eine Webseite "einfügt" spricht man eigentlich vom "einbinden".
Das Prinzip ist sehr einfach: Dafür gibt es den img-TAG
- Bevor wir das Bild einbinden können, müssen wir das Bild natürlich hochladen.
- Ich umhülle die das Bild mit einem p-TAG, damit es in der Zeile liegt.
- Danach nehmen wir das img-TAG
- Dem img-TAG geben wir einige Attribute mit:
src = Quelle
height = Höhe
width = Breite des Bildes
alt = Alternativtext, falls das Bild nicht geladen werden kann.
Um die Bilder zu vergrößern, einfach draufklicken.
Noch mehr!
Bilder mit CSS einfügen!
Wir haben auch die Möglichkeit Bilder als "Hintergrund-Bilder" eines TAGs zu definieren. Beispielsweise könnten wir dem body-TAG einen Hintergrund verpassen. Dafür müssen wir dem z.B. dem body-TAG nur folgendes CSS anhängen.
| Befehl | Bedeutung | Beispielangaben |
|---|---|---|
| background | Hintergrundfarbe | blue, green, red, ... oder HTML-Farbangabe |
| background-image | Hintergrundbild | none oder die URL des Bildes |
| background-repeat | Kacheln / Wiederholen | repeat, repeat-x, repeat-y, no-repeat |
Zur Erklärung für background-repeat: Falls das Bild nicht 100%ig in dem HTML-TAG platz hat, kann man das Bild wiederholen lassen. Entweder in alle Richtungen (repeat) oder in X-Richtung (horizontal: repeat-x) oder in Y-Richtung (vertikal: repeat-y) oder auch gar nicht (no-repeat).
Wie man die "Repeat"-Eigenschaft jedoch besser ausnutzen kann, erkläre ich in einem der folgenden Beiträgen.
Heute haben wir sehr viel über Bilder erfahren! Welche Dateiformate für das Webdesign bevorzugt werden. Welche Besonderen Eigenschaften und Vorteile jedes einzelne hat. Aber auch wie wir diese in unsere Webseite einbinden.
Wenn du nichts verpassen willst folge mir einfach!
Mehr Wissen!
Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas interessantes für dich dabei:
- HTML5-Elemente: header, nav, footer uvm. ... - Internet-Basics #9
- HTML: DIV und SPAN-Elemente - Internet-Basics #8
- HTML-TAG: Texte strukturieren und formatieren. - Internet-Basics #7
- Der Weg zur eigenen Webseite! - Guide. Alles von Beginn an. - Internet-Basics #6
Im nächsten Teil beschäftigen wir uns ein wenig mit Farbenlehre. Wir Erfahren: Wie das genau funktioniert und welche Möglichkeiten wir haben, um die Farben besser abzustimmen. Du wirst erkennen, dass die Farbwahl sehr sehr wichtig!DANKE!