Kinderleicht: Bilder einfügen in HTML ?

Du möchtest gerne erfahren wie du kinderleicht in HTML Bilder einfügst? na klar… sonst wärst du nicht hier 😉

Fotos sind heute nicht mehr weg zu denken, vorallem wenn man eine Webseite betreibt oder für einen Kundenauftrag anfertigen möchte.

Glaub mir es ist super easy und geht nach einige malen ins Blut über. Also lass uns wie immer keine Zeit verliere!

Bild einfügen mit dem Tag img

Zuallerst muss du natürlich wissen welcher HTML Tag genutzt werden muss. Es ist der img Tag und sieht Codetechnisch so aus:

<img>

Doch du fragst dich bestimmt, woher weiß der Browser welches Bild geladen werden soll?

Genau diese Frage werd ich dir im nächsten Abschnitt beantworten.

Pfad zuweisen

Im Prinzip wird dem Tag <img> den Parameter „src“ zugewiesen.

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

Die Verlinkung zum Bild kann natürlich unterschiedlich sein, je nachdem ob du den absoluten Pfad (siehe oben) oder einen relative Pfad eingibst:

<img src="/img/log.png">

Wichtig: Wenn du den relativen Pfad nutzt, dann immer von deinem HTML Dokument aus betrachten.

Fotos richtig verlinken

Eine andere coole Sache ist, deine Fotos zu verlinken. Solltest du bereits schon Kenntnisse in der HTML Verlinkung haben, dann wirst du nicht sonderlich überrascht sein 🙂

<a href="https://google.de"><img src=/img/logo.png""></a>

Wie du siehst habe ich um den „img“ Tag einen „a“ gesetzt, um den Browser mitzuteilen, dass nur das Bild bei der Verlinkung eingeschlossen ist.

Würde ich auf das Bild klicken, dann würde ich automatisch auf Google landen.

Bonus: Wenn du möchtest, das die Verlinkung in einem neuen Tab öffnet dann nutze folgendes:

<a href="https://google.de" target="_blank"><img src=/img/logo.png""></a>

Der Parameter „target“ wird mit einem „_blank“ versehen. Weitere Optionen findest du hier.

Super einfach positionieren

Natürlich kannst du auch deine Bilder in HTML positionieren.

Solange du Text um das Bild hast und du möchtest es z.B. linksbündig, dann kannst du folgendes machen:

Dieser Text ist rechts neben dem Bild <img src="/img/logo.png" align="left">

Wenn du es rechtsbündig möchtest, dann nutzt du innerhalb des „align“ Parameter einfach „right“. Ich denke es ist selbsterklärend und einfach anwendbar.

Breite und Höhe einstellen

Es gibt noch zwei weitere Parameter, die für dich interessant sein werden: „width“ und „height“. Damit kannst du die Größe des Bildes anpassen und somit kleinere Fotos vergrößern oder größere verkleinern.

<img src="/img/logo.png" height="300" width="300">

Wie du oben siehst setze ich das Bild auf 300px Breite und 300px Höhe.

Wichtig: Bitte vergiss nicht, dass beim vergrößern oder verkleinern, die Bildqualität sinkt.

Also schau, dass du von anfang an Bilder mit höchste Qualität nutzt, denn deine Besucher werden es dir danken.

Wofür Bildbeschreibung?

Zuguterletzt noch einen kleinen Abschnitt bezüglich Bildbeschreibung. Bevor ich weitere Worte abgebe, zeige ich dir erstmal ein Beispiel:

<img src="/img/logo.png" alt="Das Logo von GuthDev">

Mit dem Parameter „alt“ kannst du dem Bild eine Beschreibung zuweisen.

Technisch gesehen benötigst du nicht zwingend eine Beschreibung, aber solltest du Behinderte Besucher haben oder deine Webseite Suchenmaschinenoptimiert gestalten, dann nutze sie aufjedenfall.

Bonus: Bilder als Aufzählung

Als kleines Bonbon zeige ich dir noch eine HTML Aufzählung mit Bildern.

<ul>
<li><img src="https://image.flaticon.com/icons/svg/340/340334.svg" width="16" height="16"> Rang 1</li>
<li><img src="https://image.flaticon.com/icons/svg/1486/1486474.svg" width="16" height="16"> Rang 2</li>
<li><img src="https://image.flaticon.com/icons/svg/340/340339.svg" width="16" height="16"> Rang 3</li>
</ul>

>