Bilder in Markdown hinzufügen: Eine einfache Anleitung für visuelle Inhalte

Einleitung

Sie können Bilder in Markdown mithilfe der Syntax [Alt-Text](Bild-URL) hinzufügen. Lassen Sie uns sehen, wie das funktioniert. Diese einfache Syntax macht es einfach, visuelle Inhalte in Ihre Markdown-Dateien zu integrieren. Bilder verbessern die Lesbarkeit, fördern das Verständnis und machen Ihren Inhalt optisch ansprechender. Der Alt-Text beschreibt das Bild und stellt sicher, dass es für Benutzer mit Screenreadern zugänglich ist. Ein beschreibender Titel ist optional, kann jedoch zusätzlichen Kontext bieten. Die Einfachheit von Markdown macht es zu einer großartigen Wahl für Dokumentationen und Blogs. Mit den richtigen Bild-URLs können Sie beliebige visuelle Inhalte einbetten. Üben Sie mit verschiedenen Alt-Texten und Titeln, um die Benutzererfahrung zu optimieren.

Voraussetzungen für Bilder in Markdown

Grundkenntnisse in HTML5. Für einen umfassenden Überblick über die HTML5-Auszeichnungssprache, sehen Sie sich unsere Serie Wie man eine Website in HTML erstellt an.

Bilder in Markdown hinzufügen

Hier ist die Syntax, um Bilder in Markdown hinzuzufügen. Der Titel ist optional:

document.md ![Alt-Text](https://bilder.centron.de/tutorials/bild.svg "ein Titel")

Dies ergibt folgendes HTML:

<img title="ein Titel" alt="Alt-Text" src="/images/bild.svg">

Verlinkte Bilder

Mit der Markdown-Syntax für Links können Sie ein verlinktes Bild erstellen:

document.md [![Cloud GPU](https://bilder.centron.de/cloud-gpu.png)](/en/cloud-gpu-server-mieten)

Fazit zu Bildern in Markdown

Das <img>-Element ist ein nützliches Feature von HTML. Es ermöglicht das effektive Einbetten von Bildern in Webseiten. Durch die Angabe des src-Attributs definieren Sie den Pfad zur Bilddatei. Das alt-Attribut bietet eine textliche Alternative und verbessert die Zugänglichkeit für Benutzer mit Screenreadern. Das Hinzufügen eines title-Attributs erhöht die Benutzerfreundlichkeit, indem es zusätzlichen Kontext bietet. Sie können das <img>-Element mithilfe von CSS stylen, um Dimensionen, Ausrichtung oder Rahmen anzupassen. Bilder können mit anderen Ressourcen verlinkt werden, wodurch sie interaktiv und nützlich für die Navigation sind. Die Kombination des <img>-Elements mit Techniken des responsiven Designs sorgt für ein optimales Nutzererlebnis auf verschiedenen Geräten.

%3Cscript%20type%3D%22application%2Fld%2Bjson%22%3E%0D%0A%7B%0D%0A%20%20%22%40context%22%3A%20%22https%3A%2F%2Fschema.org%22%2C%0D%0A%20%20%22%40type%22%3A%20%22HowTo%22%2C%0D%0A%20%20%22name%22%3A%20%22Bilder%20in%20Markdown%20hinzuf%C3%BCgen%3A%20Eine%20einfache%20Anleitung%20f%C3%BCr%20visuelle%20Inhalte%22%2C%0D%0A%20%20%22description%22%3A%20%22Diese%20Anleitung%20zeigt%2C%20wie%20Sie%20Bilder%20in%20Markdown%20einf%C3%BCgen%2C%20optional%20einen%20Titel%20hinzuf%C3%BCgen%2C%20das%20daraus%20erzeugte%20HTML%20verstehen%20und%20verlinkte%20Bilder%20mit%20Markdown%20erstellen.%22%2C%0D%0A%20%20%22inLanguage%22%3A%20%22de-DE%22%2C%0D%0A%20%20%22tool%22%3A%20%5B%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTool%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Markdown-Editor%22%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTool%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22HTML5%22%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTool%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Browser%22%0D%0A%20%20%20%20%7D%0D%0A%20%20%5D%2C%0D%0A%20%20%22supply%22%3A%20%5B%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSupply%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Markdown-Datei%22%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSupply%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Bild-URL%22%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSupply%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Alt-Text%20f%C3%BCr%20das%20Bild%22%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSupply%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Optionaler%20Bildtitel%22%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSupply%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Optional%3A%20Ziel-URL%20f%C3%BCr%20ein%20verlinktes%20Bild%22%0D%0A%20%20%20%20%7D%0D%0A%20%20%5D%2C%0D%0A%20%20%22step%22%3A%20%5B%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSection%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Voraussetzungen%20pr%C3%BCfen%22%2C%0D%0A%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Grundkenntnisse%20in%20HTML5%20mitbringen%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Stellen%20Sie%20sicher%2C%20dass%20Sie%20grundlegende%20HTML5-Konzepte%20kennen%2C%20da%20Markdown-Bilder%20beim%20Rendern%20in%20ein%20HTML-img-Element%20umgewandelt%20werden.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Bild-URL%20vorbereiten%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Legen%20Sie%20die%20URL%20des%20Bildes%20fest%2C%20das%20Sie%20in%20Ihre%20Markdown-Datei%20einbetten%20m%C3%B6chten.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTip%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Verwenden%20Sie%20eine%20stabile%20und%20erreichbare%20Bild-URL%2C%20damit%20das%20Bild%20zuverl%C3%A4ssig%20angezeigt%20wird.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSection%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Bild%20in%20Markdown%20hinzuf%C3%BCgen%22%2C%0D%0A%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Markdown-Bildsyntax%20verwenden%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22F%C3%BCgen%20Sie%20ein%20Bild%20mit%20der%20Markdown-Syntax%20%21%5BAlt-Text%5D%28Bild-URL%29%20ein.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTip%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Der%20Alt-Text%20beschreibt%20das%20Bild%20und%20verbessert%20die%20Barrierefreiheit%20f%C3%BCr%20Nutzer%20mit%20Screenreadern.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Optionalen%20Titel%20erg%C3%A4nzen%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Erg%C3%A4nzen%20Sie%20optional%20einen%20Titel%20in%20Anf%C3%BChrungszeichen%20hinter%20der%20Bild-URL%2C%20zum%20Beispiel%20%21%5BAlt-Text%5D%28https%3A%2F%2Fbilder.centron.de%2Ftutorials%2Fbild.svg%20%5C%22ein%20Titel%5C%22%29.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTip%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Ein%20Titel%20kann%20zus%C3%A4tzlichen%20Kontext%20liefern%20und%20je%20nach%20Browser%20oder%20Umgebung%20als%20Tooltip%20angezeigt%20werden.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%223%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Gerendertes%20HTML%20verstehen%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Beachten%20Sie%2C%20dass%20Markdown%20beim%20Rendern%20ein%20HTML-img-Element%20erzeugt%2C%20bei%20dem%20Bild-URL%2C%20Alt-Text%20und%20optionaler%20Titel%20als%20src-%2C%20alt-%20und%20title-Attribute%20erscheinen.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSection%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Verlinkte%20Bilder%20in%20Markdown%20erstellen%22%2C%0D%0A%20%20%20%20%20%20%22position%22%3A%20%223%22%2C%0D%0A%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Bild%20in%20Link-Syntax%20einbetten%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Umschlie%C3%9Fen%20Sie%20die%20Markdown-Bildsyntax%20mit%20der%20Markdown-Linksyntax%2C%20um%20ein%20klickbares%20Bild%20zu%20erstellen.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Ziel-URL%20hinzuf%C3%BCgen%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Verwenden%20Sie%20das%20Muster%20%5B%21%5BAlt-Text%5D%28Bild-URL%29%5D%28Ziel-URL%29%2C%20zum%20Beispiel%20%5B%21%5BCloud%20GPU%5D%28https%3A%2F%2Fbilder.centron.de%2Fcloud-gpu.png%29%5D%28https%3A%2F%2Fwww.centron.de%2Fproducts%2Fcloud-gpu-server-mieten%2F%29.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTip%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Verlinkte%20Bilder%20eignen%20sich%20f%C3%BCr%20Call-to-Action-Grafiken%2C%20Produktbilder%20oder%20visuelle%20Navigationselemente.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%22%40type%22%3A%20%22HowToSection%22%2C%0D%0A%20%20%20%20%20%20%22name%22%3A%20%22Barrierefreiheit%20und%20Nutzererfahrung%20verbessern%22%2C%0D%0A%20%20%20%20%20%20%22position%22%3A%20%224%22%2C%0D%0A%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Beschreibenden%20Alt-Text%20verwenden%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Formulieren%20Sie%20den%20Alt-Text%20so%2C%20dass%20er%20den%20Inhalt%20oder%20Zweck%20des%20Bildes%20verst%C3%A4ndlich%20beschreibt.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTip%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Vermeiden%20Sie%20generische%20Alt-Texte%20wie%20Bild%20oder%20Grafik%2C%20wenn%20das%20Bild%20eine%20konkrete%20Bedeutung%20hat.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Optionalen%20Titel%20sinnvoll%20einsetzen%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Nutzen%20Sie%20den%20optionalen%20Titel%20nur%20dann%2C%20wenn%20er%20zus%C3%A4tzlichen%20Kontext%20bietet%20und%20nicht%20lediglich%20den%20Alt-Text%20wiederholt.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToStep%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%223%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22name%22%3A%20%22Bilder%20bei%20Bedarf%20mit%20CSS%20gestalten%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%22itemListElement%22%3A%20%5B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToDirection%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%221%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Gestalten%20Sie%20das%20gerenderte%20img-Element%20bei%20Bedarf%20mit%20CSS%2C%20um%20Gr%C3%B6%C3%9Fe%2C%20Ausrichtung%2C%20Rahmen%20oder%20responsives%20Verhalten%20anzupassen.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%40type%22%3A%20%22HowToTip%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%222%22%2C%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22text%22%3A%20%22Responsive%20Bilddarstellung%20sorgt%20daf%C3%BCr%2C%20dass%20Bilder%20auf%20verschiedenen%20Ger%C3%A4ten%20optimal%20angezeigt%20werden.%22%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%5D%0D%0A%20%20%20%20%7D%0D%0A%20%20%5D%0D%0A%7D%0D%0A%3C%2Fscript%3E