Bilder

Webfähige Bildformate

Das Internet ist ein weltweites Datennetz, das ist ja kein Geheimnis. Der ein oder andere von euch hat sicher noch einen Anschluss über ein Modem, oder kann sich an die Zeit mit Modems erinnnern.

 

Damals war teilweise langes warten angesagt wenn man eine Seite aufgerufen hat. Das nervt gewaltig.In 99% der Fälle ist daran aber nicht der riesen Text der Seite schuld.

 

Nein, es sind die vielen Bilder auf einer Seite die zu einem langsamen Seitenaufbau führen.Heute haben zwar viele einen schnelleren Anschluss, doch wir als Webdesigner sollten auch an den rest der Welt denken, dabei sind die gemeint die nur eine langsame verbindung ins Internet haben.Es ist also ratsam es mit Bildern auf einer Seite nicht zu übertreiben.

 

Aus den Gründen der langsamen Datenübertragung wurden im Internet schon immer Bildformate verwendet die, die Dateigröße optimieren. Das kann, muss aber nicht umbedingt auf kosten der Qualtität des Bildes gehen.Folgende Formate sind gut geeignet um auf Internetseiten verwendet zu werden.

 

JPEG

Das JPEG Format ist besonders gut dazu geeignet Fotos zu komprimieren und das, nahezu verlusst frei. Aus diesem Grund wird das JPEG Format heutzutage auch gerne in digitalen Fotoapparaten eingesetzt.

 

GIF

Das GIF Format eignet sich besonders gut für das Speichern von Zeichnungen, Buttons etc, mit nicht ganz so vielen Farben wie in Fotos. Darüberhinaus hat das GIF Format ein paar weitere Features. Eines dieser Features ist, transparenz. Mit dem GIF Format kann man einen Bereich im Bild als transparent defnieren.

 

Ein weiteres Feature ist, Animation. Mit dem GIF Format kann man eine Animation aus mehreren einzelnen Bildern erstellen. Aber auch den Einsatz zu vieler animierter GIF's sollte man vermeiden.Es ist kein guter Stil zu viele animierte GIF's zu verwenden und die Bilder sind meistens auch eher Speicherintensiv. Das GIF Format war jedoch umstritten da es einem Patent unterlag.

 

PNG

Aus dem Grund das, das GIF Format einem Patent unterlag, wurde ein alternatives Format erschaffen was alle Vorteile und Features des GIF Formats haben sollte. Dieses Format ist das PNG Format.

 

Für den Einsatz von Bildern, und generell ist es wichtig das man die genaue Schreibweise beachtet. Auch Groß- und Kleinschreibung ist hierbei zu beachten.Wenn du zuhause ein Windows Betriebssystem hast, ist das zwar egal weil unter Windows nicht zwischen Groß- und Kleinschreibung unterschieden wird.

 

Im Internet wird deine Seite aber meist auf einem Unix oder Linux System gespeichert.Unix und Linux sind im Internet deshalb so verbreitet, das das Internet aus diesem Bereich kommt.Diese Betriebssysteme haben ausserdem auch in Punkto Sicherheit große Vorteile.Doch wie bindet man jetzt so ein Bild ein?

Einbinden eines Bildes

Um eine Bildquelle (eng Image Source) einzubinden. Gibt es in HTML den Tag:

<img src="bild.gif" /> 

Mit diesem Tag wird das Bild "bild.gif" eingebunden. Dieses muss sich in diesem Fall im gleichen Verzeichnis wir die HTML Seite befinden.


Es sind hier aber auch realtive, und absolute Pfade im Dateisystmen möglich. Ratsam ist aber ein realtiver Pfad, das es sonst beim Überspielen auf dem Webserver Probleme geben kann.

Hier Beipiele für realtiven und absoluten Pfade. Wir gehen dabei einfach mal von der folgenden Situation aus:

  • Webserver und Arbeitscomputer unter Linux
  • Homeverzeichnis des Webserver "/var/www"
  • Verzeichnis für Bilder "/var/www/bilder"
  • Name des Bildes meinbild.gif.


Wenn wir dieses Bild mit einem absoluten Pfad einbinden wollen müssten wir folgenden Tag verwenden:

<img src="/var/www/bilder/meinbild.gif" />

Wenn wir einen relativen Pfad verwenden sieht der Tag so aus: 

<img src="./bilder/meinbild.gif" />

Soweit so gut, aber was ist wenn wir jetzt unsere Seite mal auf einen Server im Internet verschieben, inklusiver aller Unterordner.


Du kannst das ja mal ausprobieren. Es wird zwar bei dir funktionieren, wenn du die Seite auf deinem Computer noch nicht gelöscht hast. Aber bei anderen nicht, denn der Browser sucht das Bild lokal unter /var/www/bilder/meinbild.gif und dort wird der Bowser in den meisten Fällen nichts finden.

Der absolute Pfad ist nur auf deinem Rechner gültig, auf einem anderen Rechner existiert wahrscheinlich unter dem absoltung Pfad garkein Bild.

Ausserdem ist auch noch eine URL als Bildadresse möglich, also eine Adresse im Internet.  Ein Beispiel dafür wäre:

<img src="http://www.admin-wissen.de/banner/test.gif" />

Das ist von Vorteil wenn man Bilder von einer anderen Webseite einbinden möchte, man sollte den Webmaster der Seite aber vorher Fragen. Damit ist es natürlich auch möglich auf die eigene Url zu verweisen.

Alternativtext

Da man manchmal auf Grafiken etwas warten muss und auch Suchmaschinen eine Berschreibung des Bildes wünschen, weil Sie ja nicht so gut "sehen" können. Gibt es ein Attribut, mit dem man einen alternativen Text für ein Bild angeben kann. Dieser wird angezeigt wenn das Bild nicht geladen werden kann, oder oft auch wenn man die Maus über das Bild bewegt.

Dieses Attribut ist "alt". Hier erstmal ein Beispiel.

<img src="test.gif" alt="Mein Testbild" />

Manchmal wünscht man sich für seine Bilder auch einen Rahmen, dass ist nicht nur Zuhause so.


Auch bei HTML können wir einen Rahmen einbauen.

Rahmen

Um einen Rahmen einzubauen, brauchen wir ein weiteres Attribut. Dieses nennt sich "border" mit "border" wird die breite des Ramens in Pixel angegeben.

Hier ein Beispiel:

 

 <img src="test.gif" alt="Mein Testbild" border="1" /> 

Alternativ kann auch über das style Attribut mit css ein Rahmen festgelegt werden

 <img src="test.gif" alt="Mein Testbild" style="border: solid 1px;" /> 

Es wäre auch toll wenn wir die größe des Bildes verändern könnten. Um dies zu erreichen, kannst du das width und height attribut benutzen bzw. das css attribute width und height.

 <img src="test.png" width="100" height="100" />
 <img src="test.png" style="width: 100px; height: 100px" />

Breite und Höhe eines Bildes festlegen

Die HTML Attribute für breite und höhe sollten nur genutzt werden für fein tunning. Wenn ein Bild grundsätzlich zu groß ist, sollte es verkleinert werden um Bandbreite zu sparen.

Eine Kernfunktionalität des www sind links. Mit links kann auf andere webseiten verwiesen werden und der benutzer kann sie durch stöbern um so von der einen zu anderen Seite des www zu gelagen.

Auf der folgenden Seite wird erklärt, wie du links in deiner Webseite verwenden kannst.



Navigation