Grafik-Workshop: Grafiken und Fotos in die eigene Homepage einbinden


So richtig lebendig wird eine Webseite erst durch bunte Grafiken und Bilder. Aber es gibt vieles zu beachten, damit die Grafiken auch wirklich eine Zierde sind und keine Besucher verschrecken.

Grundsätzlich gelten folgende Regeln für Grafiken und Fotos:

  • Kleine Grafiken mit wenigen Grundfarben immer als .gif-Format einbinden
  • Fotos und große Grafiken sowie grundsätzlich vielfarbige Bilder immer im .jpg-Format einbinden
  • Das Windows-Standard-Bildformat .bmp ist nicht zur Einbindung von Bildern in Webseiten geeignet, da die Bilddateien viel zu groß sind!!!
  • Grundsätzlich sollten Grafiken maximal 100 kb groß sein
  • Vermeiden Sie lästige Blink-Gifs. Das tut in den Augen weh und vertreibt die Besucher. Eine schöne Animation kann als Gif aber durchaus ein Eyecatcher sein!
  • Animierte Grafiken sind nicht im .jpg Format möglich, sondern nur als .gif oder .png

Wie binde ich eine Grafik oder ein Foto ein?

Hier haben wir diese Schaf-Grafik als Beispiel eingebunden:

Im Quelltext sieht das wie folgt aus:

<img src=”schaf.gif” width=”120″ height=”120″ alt=”Das ist ein Schaf”>

Wie Sie sehen, ist die Grafik mit img=src”schaf.gif” eingebunden, zusätzlich wird mit width=”120″ die Breite und mit height=”120″ die Höhe in Pixel angegeben. Der Alternativtext alt=”Das ist ein Schaf” ist ebenfalls unverzichtbar

Falls Sie einen Editor wie Expression Web oder Dreamweaver benutzen, brauchen Sie sich um den Quelltext keine Gedanken zu machen. Sie finden in der Symbolleiste entweder ein Symbol wie dieses hier Bild einfügen oder Sie gehen auf Einfügen > Bild…. Anschließend bekommen Sie ein Menü zur Auswahl Ihres Bildes, das dann wie folgt oder ähnlich aussieht:

Im oberen Teil dieses Auswahlfeldes können Sie ein Bild aus einer Datei einfügen. Dazu klicken Sie auf Durchsuchen und wählen eine Grafik-Datei aus einem Verzeichnis auf Ihrer Festplatte aus. Dann noch öffnen oder einfügen geklickt und schon ist das gewünschte Bild eingefügt.

Achten Sie darauf, dass Sie nur Bilder aus dem Heimatverzeichnis Ihrer Homepage so einbinden. Falls Sie Bilder aus anderen Verzeichnissen auswählen (z.B. Eigene Bilder etc) müssen Sie sich nicht wundern, wenn diese im Web nicht angezeigt werden. Der Grund ist ganz einfach: auf dem Webspace ist die Verzeichnissstruktur oft anders als auf Ihrer Festplatte.

Eine der häufigsten Fehlerquellen ist es, wenn Bilder wie folgt verlinkt sind: file:///C:/Eigene Dateien/Meine Bilder/bild1.jpg. Dieses Bild wird im Web nicht angezeigt, da die lokale Festplatte des jeweiligen Surfers als Bildquelle eingebunden ist und dort das gewünschte Bild natürlich nicht gefunden wird. Nur beim Autor wird das Bild angezeigt, da er es ja auf seiner Festplatte hat.

Im unteren Teil der Auswahlmaske haben Sie noch die Möglichkeit, ein Bild direkt aus dem Web zu verlinken. Dies ist eine Möglichkeit, um Bilder z.B. von einem 2. eigenen Webspace zu verlinken oder aber auch ganz fremde Bilder von anderen Webseiten einzubinden. Zu beachten ist dabei, dass nicht jeder Homepagebetreiber solch einen Bilderklau duldet und zudem diese Bilder auf dem fremden Webspace nicht dauerhaft vorhanden sein müssen.

Nun haben Sie schon mal ein Bild eingefügt aber es fehlt noch etwas. Das Bild bekommt noch eine Beschreibung, und zwar hat dies folgende Gründe:

  • wichtig für blinde Surfer, die anstatt des Bildes den Beschreibungs-Text als Ausgabe erhalten (ist sehr wichtig, da viele Blinde das Web als aktuelles Informationsmedium nutzen)
  • Während des Ladevorganges des Bildes wird der Text bereits angezeigt und der User kann schon mal entscheiden, ob er den Ladevorgang abwartet oder weitersurft – daher ist eine interessanter und gut beschreibender Text vorteilhaft
  • Die Suchmaschinen können diese Alternativtexte zu den Bildern auslesen und bei der Bildsuche verwenden.

Mit Rechtsklick auf das eingefügte Bild können Sie die Bildeigenschaften bearbeiten und es öffnet sich ein Kontextmenü wie dieses:

Hier haben Sie jetzt folgende Möglichkeiten: Unter Alternative Darstellungsweisen sollten Sie unter Text die Beschreibung des Bildes eingeben. Unter Standard-Hyperlink können Sie das Bild mit einer Webseite verlinken, so dass bei Klick auf das Bild die entsprechende Webseite geöffnet wird. Unter Ziel-Frame können Sie einen Ziel-Frame definieren, in den der Link geöffnet werden soll. Nun ist das Bild komplett fertig eingefügt und der Quelltext sieht wie folgt aus:

<a href=”http://www.meine-erste-homepage.com” target=”_blank”><img src=”schaf.gif” alt=”Dies ist ein Schaf” border=”0″ width=”120″ height=”120″></a>

Eine interessante, alternative Möglichkeit ein Bild einzubinden ist die Data-URL. Mit dem Data-URL-Generator von www.data-url.de können Sie Ihre Grafik-Links in Data-URLs umwandeln. Unter http://de.wikipedia.org/wiki/Data-URL wird bei Wikipedia erklärt, was Data-URLs sind, was die Vor- und Nachteile sind und vieles mehr… Falls Sie auf der Webseite den Generator suchen – ziehen Sie einfach ein Bild z.B. aus dem Windows-Explorer in das Feld Drag and drope your files here -Fast, easy and simple- und schon wird die Data-URL generiert!



Fehler melden Sie haben einen Fehler auf meine-erste-homepage.com gefunden? Informieren Sie uns, damit wir den Fehler beheben können!

Neue Seite melden Sie haben ein neues Webmastertool für uns? Hier können Sie die für Webmaster nützliche Webseite bei uns anmelden!
Erstellt mit ❤ Liebe und Wordpress