Bilder Mit HTML Einfügen - So Geht's - CHIP Praxistipps

1. Praxistipps
2. Internet

Bilder mit HTML einfügen - so geht's 19.09.2024 10:05 | von Ferdinand Pönisch

Ein Bild mit HTML können Sie in wenigen Schritten über den img-Tag einfügen. Über Attribute können Sie anpassen, wie das Bild auf der Webseite erscheint.

Unabhängig und kostenlos dank Ihres Klicks

Die mit einem Symbol gekennzeichneten Links sind Affiliate-Links. Erfolgt darüber ein Einkauf, erhalten wir eine Provision ohne Mehrkosten für Sie. Die redaktionelle Auswahl und Bewertung der Produkte bleibt davon unbeeinflusst. Ihr Klick hilft bei der Finanzierung unseres kostenfreien Angebots.

Inhaltsverzeichnis

1. So fügen Sie Bilder mit HTML ein - Die Grundlagen
2. HTML-Attribute für eingebundene Bilder
3. HTML-Beispiel
4. Welches Format soll ich verwenden?

So fügen Sie Bilder mit HTML ein - Die Grundlagen

Mit dem Tag <img> können Sie Bilder per HTML-Code einfügen.

• Innerhalb des Tags wird die Bildquelle angegeben: <img src="bilder/testbild.jpg"> fügt die Datei "testbild.jpg" aus dem Unterordner "bilder" auf der Webseite ein.
• Auch externe Quellen per URL sind möglich: <img src="http://chip01.chipimages.de/i/headfoot/chip-online-logo.gif"> bindet zum Beispiel das CHIP-Logo von unseren Servern ein.

HTML-Attribute für eingebundene Bilder

Innerhalb des img-Tags lassen sich zahlreiche Attribute ergänzen:

• width="X": Hiermit geben Sie die Breite des Bildes in Pixeln an. Das ist wichtig, damit Ihr Browser einen Platzhalter vorsieht, während das Bild noch nicht geladen hat.
• height="Y": Mit diesem Attribut geben Sie die Höhe des Bildes an. Auch hier kann so der Browser einen Platzhalter einhalten, wenn das Bild noch nicht übertragen ist.
• hspace="X": Damit geben Sie den horizontalen Abstand links und rechts vom Bild zu anderen Seitenelementen ein.
• vspace="Y": Hiermit geben Sie den vertikalen Abstand oben und unten vom Bild in Pixeln an.
• border="Z": Hiermit fügen Sie einen Rand um das Bild ein. Je höher Sie die angegebene Pixelzahl, desto dicker wird der Rand.
• alt="ERKLÄRUNG ZUM BILD": Der Alternativtext wird angezeigt, wenn das jeweilige Bild nicht geladen werden kann. Aber auch für Sehbehinderte ist der Alternativtext wichtig, sowie für die Suchmaschinen, die ebenfalls den Text indizieren.
• title="TOOLTIP FÜR MAUSBERÜHRUNG": Hiermit legen Sie den Text fest, der erscheinen soll, wenn der Nutzer mit der Maus über das Bild fährt.
• align="TOP/BOTTOM/RIGHT/MIDDLE/CENTER/LEFT": Diesen Befehl können Sie zum einfachen Ausrichten des Bildes verwenden. Dabei sind die Attribute "bottom", "top", "right", "middle", "center" und "left" erlaubt.

Buchtipp: HTML & CSS für Dummies

HTML-Beispiel

Ein Beispiel für einen HTML-Code ist: <img src="http://chip01.chipimages.de/i/headfoot/chip-online-logo.gif" height="100" width="200" alt="CHIP-Logo" border="2" align="right" hspace="50" vspace="50">

• Hierdurch wird das CHIP-Logo von unserer Webseite eingebunden.
• Es wird mit einer Höhe von 100 Pixeln und einer Breite von 200 Pixeln dargestellt.
• Kann es nicht geladen werden, wird "CHIP-Logo" als Blanktext angezeigt.
• Das Bild wird von einem zwei Pixel breiten Rahmen umrandet.
• Es ist rechtsbündig platziert und hat zu anderen Seitenelementen einen Abstand von je 50 Pixeln.

Welches Format soll ich verwenden?

Es gibt verschiedene Bildformate, die Sie in den HTML-Code einbinden können.

• JPG: Am häufigsten werden Bilder im JPG-Format für Seiten im Internet verwendet. Dieses Format stellt 16,7 Millionen Farben dar. Zudem lässt sich ein JPG sehr gut komprimieren. Die Bilddatei können Sie also sehr klein machen, was eine schnelle Ladezeit ermöglicht.
• PNG: Auch das PNG-Format kann 16,7 Millionen Farben darstellen und lässt sich komprimieren. Der Vorteil gegenüber dem JPG-Format liegt darin, dass die Komprimierung ohne Verluste möglich ist.
• Zudem können im PNG-Format festgelegte Bereiche transparent dargestellt werden. Allerdings haben sehr alte Browser Probleme mit der Darstellung von Transparenzen.
• GIF: Möchten Sie bewegte Bilder mit HTML einfügen, eignet sich dafür das GIF-Format. Es werden dafür in diesem Format nur 256 Farben dargestellt und eine Kompression erfolg automatisch ohne Einstellungsmöglichkeiten.
• Das GIF-Format eignet sich am besten für kleine, animierte Grafiken oder Logos. Damit sich gerade Logos harmonisch in eine Seite einpassen, können im GIF-Format wie bei einem PNG Transparenzen genutzt werden.
• Ein weiterer Vorteil bei einem GIF ist, dass es sich stufenweise aufbaut. Dadurch erscheint dem Betrachter die Ladezeit nicht so lange. Das Bild ist zuerst unscharf, aber schon erkennbar.

(Tipp ursprünglich verfasst von: Pascal Thiele)

Beliebteste Internet-Tipps

Beliebteste Internet-Tipps

Beliebteste Internet-Tipps

• Amazon Hotline: So erreichen Sie den Kundenservice
• Payback-Punkte auf Konto überweisen lassen - so einfach geht's
• Kostenlos E-Mail-Adresse erstellen: 5 Anbieter im Vergleich

• Onlyfans: Was das ist und wie das Portal funktioniert
• DHL Kundenservice: So erreichen Sie die DHL-Hotline
• WLAN verbunden aber kein Internet: Daran kann's liegen

Weitere beliebte Tipps

Neueste Internet-Tipps

Neueste Internet-Tipps

Neueste Internet-Tipps

• Family Link umgehen: Darauf sollten Eltern achten
• Chromium vs. Chrome: Das sind die Unterschiede
• ASOS kontaktieren: So erreichen Sie den Kundendienst

• Dateien auf Google Drive teilen
• Was ist eine Doodle-Umfrage und wie funktioniert sie?
• Audible-Abo: Pause einlegen

Weitere neue Tipps

Die besten Shopping-Gutscheine

Die besten Shopping-Gutscheine

Die besten Shopping-Gutscheine

• Gutscheine von OTTO
• Deinhandy.de-Gutscheine
• Rabatte bei Saturn

Weitere Gutscheine