Bilder In HTML Einfügen - So Funktioniert Es

COMPUTER BILD Logo

• Tests & Ratgeber

  • Handys

  • Fernseher

  • Notebooks

  • PC & Hardware

  • DSL & WLAN

  • DSL-Speedtest

  • Tablets

  • Gutscheine

    Anzeige

  • VPN

  • Software

  • Downloads

  • Streaming

  • Sicherheit

  • Haus & Garten

  • Finanzen

  • New Mobility

• Bestenlisten
• News-IconNews
• Aktionen

  • Abo & Shop

  • Newsletter

  • Top-Deals

  • Tarife

  • Sicherheits-Center

  • Nachhaltigkeit

  • Digital Lifestyle

  • Goldener Computer

  • Alle Gutscheine

    Anzeige

  • Saturn Gutscheine

  • OTTO Gutscheine

  • ebay Gutscheine

  • Amazon Gutscheine

  • Galaxus Gutscheine

  • Samsung Gutscheine

  • Browsergames

• Club

  • Mitglied werden

  • Kaufberatung

  • E-Paper

  • Gewinnspiele & Events

  • VIP-Angebote & Rabatte

  • Rätselspaß

  • Vorteilcenter

• Home
• Tests & Ratgeber
• Internet
• Tipps

Eine Grafik in HTML einfügen

HTML: Bilder einfügenWie Sie in HTML Bilder einfügen, erklärt COMPUTER BILD Schritt für Schritt. Foto: iStock.com/kaipong

07.09.2023, 14:23 Uhr

Andre Hesel

Die manuelle Einbettung von Grafiken innerhalb von Webseiten ist nicht schwer. Lesen Sie hier, wie Sie per <img>-Tag in HTML Bilder einfügen.Wer eine Internetseite gestalten und erstellen möchte, macht es sich mit WYSIWYG-Editoren recht einfach. Ähnlich wie bei Texten in Word sieht man die Webseite dort in der fertigen Formatierung (What you see is what you get) samt Bildern oder Tabellen und muss sich nicht mit dem dahinterliegenden Code – in diesem Fall HTML – herumplagen. Noch komfortabler sind Homepage-Baukästen, die sich zudem um die Veröffentlichung der Webseite und das Hosting (Bereitstellung auf einem Server) kümmern. Wer sich ein wenig mit HTML auskennt, kann Webseiten nach wie vor in einem simplen Texteditor bearbeiten. Möchten Sie in HTML Bilder einfügen, müssen Sie nur darauf achten, dass die Grafik richtig formatiert ist. So funktioniert es:

Die besten Homepage-Baukästen

Platz 1

Testnote

1,9

gut

IONOSIONOS MyWebsite Now Shop PlusZum Angebot

Zum Anbieter

Platz 2

Testnote

2,3

gut

StratoStrato Webshop Now PlusZum Angebot

Zum Anbieter

Platz 3

Testnote

2,4

gut

WixWix CoreZum Angebot

Zum Anbieter

Platz 4

Testnote

3,0

befriedigend

JimdoJimdo BusinessZum Angebot

Zum Anbieter

Platz 5

Testnote

3,4

befriedigend

SquarespaceSquarespace E-Commerce BasisZum Angebot

Zum Anbieter

Platz 6

Testnote

3,6

ausreichend

GoDaddyGoDaddy E-CommerceZum Angebot

Zum Anbieter

Platz 7

Testnote

4,4

ausreichend

SquareWeebly ProfessionalZum Angebot

Zum Anbieter

PfeilPfeilKomplette Liste: Die besten Homepage-Baukästen

HTML: Bilder einfügen

Wie Ihnen vielleicht schon bekannt ist, wird in HTML jedes Element durch seinen entsprechenden Tag eingeleitet.

• Um ein Bild einzufügen, benutzen Sie den Tag <img>.
• Innerhalb dieses Tags erwartet der Browser den Pfad zu Ihrem Bild in Anführungsstrichen. Das kann entweder ein Link sein oder der Pfad des Bildes auf dem Server: <img src="Link/Pfad hier einfügen">.
• Wichtig ist, dass Sie bei der Angabe eines Pfades auch die Dateiendung des Bildes mit angeben.
• Zwei Beispiele: Liegt das Bild im gleichen Ordner wie die bearbeitete HTML-Seite, lautet der Befehl zum Beispiel <img src="bild.png">. Liegt das Bild in einem Unterverzeichnis, geben Sie am besten die komplette URL an, zum Beispiel so: <img src="https://domain.de/pictures/bild.png">.

Um ein Bild über die URL einzufügen, müssen Sie diese Grafikadresse freilich kennen. Um sie herauszufinden, klicken Sie im Browser einfach mit der rechten Maustaste auf das Bild und wählen im Kontextmenü Grafikadresse kopieren oder Bildadresse kopieren. Den kopierten Pfad fügen Sie dann mit Strg+V in den <img>-Tag ein.

Wie kann ein Bild formatiert werden?

Für gewöhnlich findet die Formatierung innerhalb des "Cascading Style Sheet" (CSS) statt. Das ist eine eigenständige Sprache, die für die Formatierung und Gestaltung der gesamten HTML-Seite ausgelegt ist. Sie können ein Bild dank <img>-Tag aber auch direkt in HTML anpassen. Das geht so:

• Durch die Attribute "height" und "width" legen Sie die Höhe und Breite des Bildes fest: <img src="Dateiname" width="Zahl in Pixel" height="Zahl in Pixel">.
• Über das Attribut "alt" können Sie einen Text formulieren, der anstelle des Bildes angezeigt wird. Der Alt-Text ist sinnvoll für Fälle, in denen die Webseite nicht komplett dargestellt werden kann und wird auch von Screenreadern wie NVDA für Blinde ausgelesen: <img src="Dateiname" alt="Bildbeschreibungstext">.
• Mit dem Attribut "border" legen Sie außerdem einen Rand durch Angabe der Stärke in Pixel fest.
• Hier ein Beispiel für alle Formate: <img src="smiley.jpg" alt="Lustiger Smiley" width="500" height="600" border="5">.

Bei der angegebenen Höhe und Breite empfiehlt sich, das Bild entsprechend zu verkleinern oder zu vergrößern. Insbesondere Grafiken mit einer abweichenden Auflösung werden andernfalls gnadenlos verzerrt. Verwenden Sie dazu einfach eine kostenlose Bildbearbeitung. Möchten Sie dazu Windows-Bordmittel nutzen, ändern Sie die Bildgröße mit Paint.Mit Gutscheinen sparen

• Saturn Gutscheine
• Galaxus Gutscheine
• ebay Gutscheine
• Cyberport Gutscheine
• Wow Gutscheine

Mit Gutscheinen sparen

• Memory PC Gutscheine
• Euronics Gutscheine
• Avira Gutscheine
• OTTO Gutscheine
• Grover Gutscheine

Bestenlisten

• Saug-Wisch-Roboter im Test
• Multifunktionsdrucker im Test
• Mähroboter im Test
• Laptops im Test
• WLAN-Verstärker im Test

Vergleiche & Kaufberater

• Browsergames Vergleich
• Tagesgeld Vergleich
• Kreditkarten Vergleich
• Balkonkraftwerke
• Kaufberater

NewsletterFolgenFacebook-IconThreads-IconRSS-IconInstagram-IconYouTube-IconCOMPUTER BILD Logo

• Kontakt
• Jobs
• Impressum
• AGB
• Widerrufsbelehrung
• Widerruf Nutzerkennungen
• Utiq verwalten
• Datenschutz
• Privatsphäre
• Widerruf Tracking
• Jugendschutz
• Transparenz
• Verantwortung
• Media
• Einfach werben auf COMPUTER BILD
• Bildnachweise