Bilder In HTML Einfügen - So Funktioniert Es

• Tests & Ratgeber

  • Handys

  • Xiaomi-News

    Anzeige

  • Fernseher

  • Notebooks

  • PC & Hardware

  • DSL & WLAN

  • VPN

  • DSL-Speedtest

  • Tablets

  • Software

  • Downloads

  • Streaming

  • Sicherheit

  • Haus & Garten

  • Küche

  • Finanzen

  • Tarife

  • New Mobility

  • So testet COMPUTER BILD

• Bestenlisten

  • Alle Bestenlisten

  • Antivirenprogramm-Test

  • VPN-Test

  • Drucker-Test

  • Desktop-PC-Test

  • Laptop-Test

  • Macbook-Test

  • Smartphone-Test

  • iPhone-Test

  • Akkustaubsauger-Test

  • Kopfhörer-Test

• News-IconNews
• Aktionen

  • Abo & Shop

  • Newsletter

  • Top-Deals

  • Adventskalender

  • Handytarifrechner

  • Sicherheits-Center

  • Nachhaltigkeit

  • Digital Lifestyle

  • Shark

    Anzeige

  • Xiaomi-News

    Anzeige

  • Gutscheine

  • Browsergames

  • Online-Casinos

    Anzeige

  • Online-Slots

    Anzeige

  • Kreditkarten

  • Lotto

• Club

  • CLUB kostenlos testen

  • Kaufberatung

  • E-Paper

  • Gewinnspiele & Events

  • VIP-Angebote & Rabatte

  • Rätselspaß

  • Vorteilcenter

• Home
• Tests & Ratgeber
• Internet
• Tipps

Grafik in den HTML-Code einfügen

HTML: Bilder einfügen – so klappt esWie Sie in HTML Bilder einfügen, erklärt dieser Ratgeber Schritt für Schritt. Foto: iStock.com/kaipong

14.11.2025, 08:00 Uhr

Andre Hesel

Die manuelle Einbettung von Grafiken innerhalb von Webseiten ist nicht schwer. Lesen Sie hier, wie Sie mit dem <img>-Tag in HTML Bilder einfügen.Wer eine Webseite gestalten und erstellen möchte, macht es sich mit WYSIWYG-Editoren wie Dreamweaver 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 darin enthaltenen Bildern oder Tabellen und muss sich nicht mit dem dahinterliegenden Code – in diesem Fall HTML – herumplagen. Noch komfortabler sind Homepage-Baukästen, die sich zusätzlich um die Veröffentlichung der Webseite und das Hosting (Bereitstellung auf einem Server) kümmern. Wer sich 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 klappt es:

Die besten Homepage-Baukästen

Platz 1

Testnote

2,1

gut

Externer Link IconTestsiegerIONOSIONOS MyWebsite Now Shop PlusZum AngebotAffiliate Info

Zum Anbieter

Platz 2

Testnote

2,2

gut

Externer Link IconStratoStrato SmartWebshop PlusZum AngebotAffiliate Info

Zum Anbieter

Platz 3

Testnote

2,3

gut

Externer Link IconWixWix CoreZum AngebotAffiliate Info

Zum Anbieter

Platz 4

Testnote

3,1

befriedigend

Externer Link IconSquarespaceSquarespace E-Commerce BasisZum AngebotAffiliate Info

Zum Anbieter

Platz 5

Testnote

3,2

befriedigend

Externer Link IconWebadorWebador BusinessZum AngebotAffiliate Info

Zum Anbieter

Platz 6

Testnote

3,4

befriedigend

Externer Link IconJimdoJimdo BusinessZum AngebotAffiliate Info

Zum Anbieter

Platz 7

Testnote

3,5

ausreichend

Externer Link IconGoDaddyGoDaddy E-CommerceZum AngebotAffiliate Info

Zum Anbieter

Platz 8

Testnote

4,2

ausreichend

Externer Link IconSquareWeebly ProfessionalZum AngebotAffiliate Info

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 dazugehörige HTML-Seite, lautet der Befehl <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 die 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 wie oben gezeigt 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.Bestenlisten

• Laptops im Test
• WLAN-Router im Test
• Smartphones im Test
• 55-Zoll Fernseher im Test
• Akku-Staubsauger im Test

Bestenlisten

• Wischroboter im Test
• 17-Zoll-Laptop im Test
• 65-Zoll-Fernseher im Test
• Tintentank-Drucker im Test
• Smartwatches im Test 

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-Icon

• Kontakt
• Jobs
• Impressum
• AGB
• Widerrufsbelehrung
• Widerruf Nutzerkennungen
• Utiq verwalten
• Datenschutz
• Privacy-Manager
• Barrierefreiheit
• Widerruf Tracking und Cookies
• Jugendschutz
• Transparenz
• Verantwortung
• Media
• Einfach werben auf COMPUTER BILD
• So testet COMPUTER BILD
• Bildnachweise