Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)

HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)

Kaum eine Webseite kommt ohne Grafiken aus. Kein Wunder also, dass das Thema Grafiken auch in dieser Reihe einen wichtigen Platz einnimmt. In diesem und den nächsten Video-Trainings wird gezeigt, wie ihr Grafiken in eure Webseiten einbinden könnt. Am Anfang steht aber ein anderer Aspekt im Vordergrund: Welche Bildformate eignen sich überhaupt für den Online-Einsatz? Im zweiten Teil geht es dann darum, wie sich Bildpfade referenzieren lassen.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Wenn ihr Bilder in einem Grafikprogramm abspeichert, werden ganz verschiedene Grafikformate angeboten. Welches davon soll man aber wählen, wenn es um darum geht, das Bild in eine Webseite einzubinden?

Bilder



 
Will man auf seiner Webseite ein Bild präsentieren, hat man die Wahl zwischen drei Formaten.

• GIF
• JPEG
• PNG

Welches Format wählt man aber für welchen Einsatzzweck? Nimmt man für Fotos lieber GIF oder PNG? Zunächst ein kurzer Überblick über die Fähigkeiten der einzelnen Formate.
Eigenschaft JPEG GIF PNG
Verlustfreie Speicherung Nein Ja Ja
Farben 24 Bit indiziert bis 256 indiziert (bis 256), 24 bit oder 48 bit
Transparenz Nein Ja, eine Farbe Ja
Progressives Laden bzw. Interlacing Ja Ja Ja
Animationen Nein Ja Nein

Diese kleine Übersicht zeigt bereits die unterschiedlichen Eigenschaften der Formate. Da verwundert es natürlich wenig, dass sich bestimmte Formate für einzelne Einsatzzwecke besser eignen als andere. Genau an diesem Punkt setzt der folgende Abschnitt an. Dort wird gezeigt, wann man am besten welches Format einsetzt.


Fotos

Keine Frage, für Fotos setzt man JPEG ein. Denn hierin lassen sich Bilder sehr gut komprimieren, wobei die Qualität variabel gewählt werden kann. Man findet hier die richtige Balance zwischen Qualität und Kompressionsrate.


Screenshots/Diagramme

Hierfür eignet sich das PNG-Format am besten. Interessant ist PNG auch für technische Zeichnungen, Grundrisse usw. PNG kann außerdem bei Bildern verwendet werden, bei denen man mit transparenten Bereichen arbeitet.


 

Schriften/Logos

Wenn ihr in eurem Logo Text stehen habt oder überhaupt Schrift darstellen wollt, solltet ihr GIF oder PNG verwenden. Aufgrund der besseren Performance greift man jedoch üblicherweise zu PNG. JPEG ist für die Darstellung von Schriften jedenfalls ungeeignet, da die Ränder unsauber angezeigt werden.


Transparenz

Wenn es um die Darstellung transparenter Bereiche geht, scheidet JPEG vor vorneherein aus. Übrig bleiben also GIF und PNG. Welches dieser beiden Formate verwendet man aber nun, wenn es auf die Transparenz ankommt? GIF kann prinzipiell zwar mit Transparenz umgehen, die Ergebnisse sind aber meistens unsauber. Ein Pixel kann im GIF-Format nämlich entweder nur vollständig sichtbar oder aber eben vollständig transparent sein. Bei PNG tritt dieses Phänomen nicht auf. Dieses Format besitzt einen zusätzlichen Alphakanal, dank dem feinere Transparenz-Ergebnisse erzielt werden.


Bilder einbinden

Grafiken lassen sich über das img-Element einbinden. (Beachtet bitte, dass Bilder mittlerweile sehr oft über CSS eingebunden werden. Ausführliche Informationen zu CSS folgen natürlich noch. Der gezeigte HTML-Weg ist aber völlig standardkonform und kann auch in HTML5 bedenkenlos genutzt werden.)
<img src="logo.png" alt="PSD-Tutorials.de" />

Bei img handelt es sich um ein Standalone-Element. Über die entsprechenden Attribute lässt sich das Bild näher beschreiben. Das wichtigste Attribut ist dabei zweifellos src. Denn hierüber gibt man das Bild an, das eingebunden werden soll. Im gezeigten Beispiel gehe ich davon aus, dass sich die Grafik logo.png im selben Verzeichnis wie die HTML-Datei befindet, in welcher das img-Element definiert wurde.

Damit die Bilder tatsächlich angezeigt werden, muss man den Pfad zu ihnen richtig angeben. HTML stellt für die Referenzierung verschiedene Möglichkeiten zur Verfügung.

• Absolute Pfade
• Absolute Pfadangaben relativ zur Basis-Adresse
• Relative Pfadangaben relativ zur Basis-Adresse

Zunächst zu den absoluten Pfaden. Diese Variante verwendet man üblicherweise immer dann, wenn sich das Bild nicht auf dem eigenen Server befindet. Angenommen, ihr wollt den von PSD-Tutorials.de bekannten Schmetterling in eure Webseite einbinden. Dann könntet ihr das theoretisch direkt von dem Server laden, auf dem es liegt. Ermittelt zunächst den Pfad des Bildes. Das geht am einfachsten, indem man das Bild im Browser mit der rechten Maustaste anklickt und dann Bild-URL kopieren wählt.

Bilder



 
Das, was in die Zwischenablage geladen wird, sollte im Endeffekt so aussehen:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Hierbei handelt es sich also um die vollständige Adresse des Bildes. Diese Information genügt bereits, um das Bild einzubinden.
<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Man weist dem src-Attribut also den vollständigen Pfad zum Bild zu.

Bilder



 
Das Problem an diesen absoluten Pfaden ist aber letztendlich, dass man keine wirkliche Kontrolle über den eingebundenen Inhalt hat. Wird die von euch referenzierte Grafik also vom Server gelöscht oder dort in ein anderes Verzeichnis verschoben, gibt es einen Anzeigefehler.

Bilder



Daher sollte dieses absolute Referenzieren tatsächlich die Ausnahme sein.
 

Absolute Pfadangaben relativ zur Basis-Adresse

Diese Variante bietet sich immer dann an, wenn die Grafik auf dem gleichen Rechner/Server wie die HTML-Datei liegt und über das aktuelle Protokoll erreichbar ist. Das klingt kompliziert, ist es aber nicht.

Ein Beispiel:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dabei handelt es sich um die vollständige Adresse. Der folgende Teil ist dabei die absolute Pfadangabe.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Diese absolute Pfadangabe bezieht sich relativ auf die Basis-Adresse http://4eck-media.de.


Relative Pfadangaben relativ zur Basis-Adresse

Die jetzt vorgestellte Variante ist sicherlich am gebräuchlichsten. Dabei wird immer der aktuelle Pfad als Bezugspunkt genommen, von dem aus letztendlich adressiert wird. Auch hierzu wieder einige Beispiele. Angenommen, es gibt die Datei index.htm, in die ihr ein Bild einbinden wollt. Zusätzlich existiert auf derselben Ebene das Verzeichnis images, in dem besagtes Bild liegt.

index.htm
images
--logo.png


Der Aufruf im src-Attribut sähe in diesem Fall so aus:
src="images/logo.png"

Wie würde das Ganze aber aussehen, wenn sich das Bild in einem Verzeichnis befindet, das oberhalb der HTML-Datei liegt?

projekt
--images
-----logo.png
--archiv
-----index.htm


In diesem Fall liegt die index.htm ein Verzeichnis unterhalb des einzubindenden Bildes logo.png.
src="../images/logo.png"

Die Syntax bedeutet hier also: Gehe eine Ebene nach oben, wechsle dort in das Verzeichnis images und zeige die logo.png an.

projekt
--images
----logo.png
----2013
------januar
--------index.htm


Hier sieht die Syntax so aus:
src="../../images/logo.png"

Das Bild logo.png liegt in diesem Fall zwei Ebenen oberhalb der index.htm im Verzeichnis images.

Der Vorteil der relativen Pfadangaben ist deren Flexibilität. Ihr könnt so beispielsweise das Projekt lokal entwickeln und dann auf einen "echten" Server kopieren. Die Pfade stimmen danach unverändert.


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:08

Herzlichen Dank für das Video.

Portrait von BeBa
  • 22.04.2015 - 06:18

Besten Dank! Deine Reihe is echt super und sehr informativ!

Portrait von ZainaPhoto
  • 28.03.2015 - 20:38

Großen Dank für das Video.

LG Zaina

Portrait von Kiasa
  • 26.02.2015 - 10:08

Vielen Dank! Super erklärt! :)

Portrait von MichiL
  • 25.11.2014 - 07:01

Beim Beispiel "Pfade absolut zur Basisadresse" hat sich ein kleiner Fehler eingeschlichen. Vor dem Pfad muss noch ein slash stehen, da es sich sonst um einen relativen Pfad handelt.

Der Pfad im Beispiel lautet also folgendermaßen:
/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Gute Erklärung des gesamten Zusammenhangs.

Portrait von Kundentest
  • 23.11.2014 - 22:17

Herzlichen Dank für das Tutorial.

Portrait von pallasathena
Portrait von Caesarion2004
  • 23.11.2014 - 19:01

Vielen Dank für das weitere Texttutorial der Reihe!

Portrait von Domingo
  • 23.11.2014 - 18:38

sehr interessantes Tutorial, vielen Dank dafür.

Portrait von B_Kukuk
  • 23.11.2014 - 18:01

Vielen Dank für die Vertextlichung Deines Tutorials. Es arbeitet sich doch besser wenn man den Text zum Video hat.

Portrait von BOPsWelt
  • 23.11.2014 - 16:33

Vielen Dank für einen weiteren Teil dieser Reihe.

Portrait von rocking_sid
  • 23.11.2014 - 16:26

Vielen Dank für das informative Tutorial!

Portrait von Steve007
  • 09.11.2014 - 17:04

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von arko2013
  • 01.11.2014 - 11:21

Danke für die guten Erklärungen.

Portrait von renate_C
  • 01.11.2014 - 10:46

Ich bedanke mich für das interessante Video.

Portrait von pallasathena
Portrait von Caesarion2004
  • 01.11.2014 - 10:30

Vielen Dank für das informative Video und die Materialien.

Portrait von MichiL
  • 01.11.2014 - 09:32

Beim Beispiel "Pfade absolut zur Basisadresse" hat sich ein kleiner Fehler eingeschlichen. Vor dem Pfad muss noch ein slash stehen, da es sich sonst um einen relativen Pfad handelt.

Gute Erklärung des gesamten Zusammenhangs.

Portrait von Kundentest
  • 01.11.2014 - 09:14

Herzlichen Dank für das Video.

x
×
×