Bilder

Bild einfügen

Hauche deiner Seite visuelles Leben ein

Das <img>-Element ist wie der treue Begleiter eines reiselustigen Abenteurers, der seine besten Fotografien stolz präsentiert. Mit diesem kleinen Helfer bringst du Bilder auf deine Seite, die förmlich vor Lebendigkeit strotzen. Es schließt sich selbst, wie ein höflicher Gast, der die Tür leise hinter sich zuzieht, typisch self-closing-Element.

<img>

Bilder & Attribute

Die magischen Werkzeuge der Bildzauberei

Damit dein Bild so strahlt, wie es sollte, brauchst du
die richtigen Zaubersprüche, auch bekannt als Attribute.

• src: Der magische Pfad zu deinem Bild, sei es aus fernen Serverreichen oder dem heimischen Ordner.
• alt: Dein unsichtbarer Erzähler, der einspringt, wenn das Bild mal verschollen ist. Es ist auch wichtig für Suchmaschinen und Screenreader.
• width & height: Die Maße deines Bildes, die du am besten mit CSS festlegst, um es flexibel zu halten.
• class und id: Die geheimen Kategorisierungs-Talente, die dein Bild später gezielt verzaubern lassen.

<img src="img/unicorn.jpg" alt="Ein majestätisches Einhorn im Wald" class="img-fluid">

Bildunterschrift

Die Worte hinter dem Bild

Mit <figure> und <figcaption> setzt du deinem Bild noch die Krone auf. Der <figure>-Rahmen hält dein Bild fest, während <figcaption> die passende Geschichte dazu erzählt, perfekt für den Abenteurer, der seinen Bildern immer eine kleine Anekdote beifügen will.

<figure>
    <img src="img/blackbird.jpg" alt="Die Amsel singt leise" width="300">
    <figcaption>Eine Amsel</figcaption>
</figure>

Das picture-Element

Flexibilität für deine visuellen Abenteuer

Das <picture>-Element ist wie der Multitool-Zauber für wechselnde Bildgrößen. Je nach Bildschirm und Auflösung zeigt es genau das Bild, das am besten passt. Deine Webseite bleibt immer gestochen scharf – egal, ob auf dem Handy oder dem Drachensimulator.

<picture>
    <source srcset="img/fliegenpilz.jpg" media="(min-width: 800px)">
    <source srcset="img/fliegenpilz-klein.jpg" media="(max-width: 799px)">
    <img src="img/fliegenpilz-normal.jpg" alt="Eine Zeichnung von einem Fliegenpilz">
</picture>

Die Kunst der Bildoptimierung

JPEG: Ideal für Fotos von Landschaften, Portraits und epischen Abenteuern, super komprimierbar!
PNG: Perfekt für Grafiken, die durchsichtig bleiben sollen, wie der unsichtbare Umhang eines Zauberers.
SVG: Dein unermüdlicher Held für Logos und Vektorgrafiken, denn es bleibt immer in Bestform, egal wie groß skaliert es immer ohne zu verpixeln.
WebP: Der flinke und platzsparende Herausforderer des JPEG, immer bereit für das nächste Abenteuer.
Halte die Dateigröße klein, damit deine Seite so schnell wie ein Gepard lädt.

Tipps zur Bildbenennung

• Verwende beschreibende Dateinamen, die so eindeutig sind wie „einhorn-im-wald.jpg“.
• Keine Leerzeichen und Sonderzeichen – die sind wie Stolpersteine im Zauberfluss, nutze statt- dessen Bindestriche (-), wenn du trennen musst.
• Du kannst Dateinamen in Kleinbuchstaben schreiben, um die universellen alten Gesetze des Internets zu ehren.