Wie man ein Bild in HTML einfügt: Eine Schritt-für-Schritt-Anleitung
Wie fügt man ein Bild in HTML ein: Syntax und Attribute
Um ein Bild in eine HTML-Datei einzufügen, verwende das <img>
-Element. Es ist ein leeres Element, was bedeutet, dass es weder öffnende noch schließende Tags hat.
Syntax
Die grundlegende Syntax für das Einfügen eines Bildes lautet:
<img src="bildquelle" alt="alternativer Text">
Wobei:
-
src
das Attribut für die Bildquelle ist. Es kann den Pfad zu einem lokalen Bild auf deinem Computer oder die URL eines Bildes aus dem Internet angeben. -
alt
das Attribut für den alternativen Text ist. Es liefert eine textuelle Beschreibung des Bildes für Barrierefreiheit und Suchmaschinen.
Attribute
Das <img>
-Element unterstützt eine Reihe von Attributen, mit denen du das Aussehen und Verhalten des Bildes steuern kannst:
- width: Legt die Breite des Bildes in Pixeln fest.
- height: Legt die Höhe des Bildes in Pixeln fest.
- alt: Bereits beschrieben. Wichtig für Barrierefreiheit und SEO.
- title: Bietet einen Tooltip-Text, der beim Hovern über das Bild angezeigt wird.
- border: Fügt einen Rahmen um das Bild hinzu.
- hspace: Fügt horizontalen Abstand um das Bild hinzu.
- vspace: Fügt vertikalen Abstand um das Bild hinzu.
Beispiel
Um das Bild "mein-bild.jpg", das sich im selben Verzeichnis wie deine HTML-Datei befindet, einzufügen, würdest du folgenden Code verwenden:
<img src="mein-bild.jpg" alt="Bildbeschreibung">
Um dasselbe Bild aus dem Internet einzufügen, würdest du Folgendes verwenden:
<img src="https://example.com/bilder/mein-bild.jpg" alt="Bildbeschreibung">
Lokale Bilder vs. Webbilder: Quellen angeben
Wenn du ein Bild in HTML einfügen möchtest, musst du zuerst entscheiden, welche Art von Bild du verwenden möchtest: ein lokales Bild oder ein Webbild.
Lokale Bilder
- Werden auf deinem eigenen Computer gespeichert.
- Du musst den Pfad zur Bilddatei angeben, z. B.
<img src="images/meinBild.jpg">
. - Vorteil: Du hast die volle Kontrolle über das Bild und kannst es jederzeit ändern oder löschen.
Webbilder
- Werden online gespeichert, z. B. auf einem Webserver oder in einem CDN.
- Du musst die URL des Bildes angeben, z. B.
<img src="https://example.com/bilder/meinBild.jpg">
. - Vorteil: Das Bild ist sofort für alle verfügbar, die auf deine Webseite zugreifen.
Quellen angeben
Egal, ob du ein lokales oder ein Webbild verwendest, musst du immer die Quelle des Bildes angeben. Dies ist aus folgenden Gründen wichtig:
- Urheberrecht: Du musst sicherstellen, dass du die Erlaubnis hast, das Bild zu verwenden.
- Barrierefreiheit: Bildschirmlesegeräte verwenden die Quellenangabe, um das Bild zu beschreiben.
- SEO: Suchmaschinen können die Quellenangabe nutzen, um das Bild zu indizieren.
Um die Quelle anzugeben, verwendest du das Attribut src
. Der Wert des Attributs ist die URL des Bildes, z. B.:
<img src="https://example.com/bilder/meinBild.jpg">
Wenn du ein lokales Bild verwendest, musst du den Pfad zur Bilddatei angeben, z. B.:
<img src="images/meinBild.jpg">
Bildgröße festlegen: Breite und Höhe
Die Größe eines Bildes kann durch die Angabe von Breite und Höhe festgelegt werden. Dies ist wichtig, um sicherzustellen, dass das Bild auf deinem Webauftritt angemessen angezeigt wird und den verfügbaren Platz optimal nutzt.
Breite und Höhe festlegen
Um die Bildgröße in HTML festzulegen, verwendest du die Attribute width
und height
innerhalb des <img>
-Tags. Die Werte dieser Attribute werden in Pixel angegeben:
<img src="bild.jpg" width="300" height="200">
Im obigen Beispiel wird das Bild mit dem Dateinamen bild.jpg
eingefügt und mit einer Breite von 300 Pixel und einer Höhe von 200 Pixel angezeigt.
Bildverhältnisse beibehalten
Wenn du die Größe eines Bildes änderst, ist es wichtig, das Bildverhältnis beizubehalten, damit das Bild nicht verzerrt aussieht. Das Bildverhältnis bezieht sich auf das Verhältnis der Breite zur Höhe.
Um das Bildverhältnis beizubehalten, kannst du die max-width
- und max-height
-Eigenschaften in CSS verwenden. Diese Eigenschaften legen die maximale Breite bzw. Höhe des Bildes fest, während das Bildverhältnis unverändert bleibt. Beispiel:
img {
max-width: 100%;
max-height: 100%;
}
Skalierung und Reaktionsfähigkeit
Mit CSS kannst du auch die Skalierung und Reaktionsfähigkeit von Bildern steuern. Die Reaktionsfähigkeit stellt sicher, dass Bilder auf verschiedenen Geräten wie Smartphones und Tablets gut dargestellt werden.
Du kannst die object-fit
-Eigenschaft verwenden, um festzulegen, wie das Bild innerhalb seines Containers skaliert wird. Beispiel:
img {
object-fit: contain;
}
Der Wert contain
skaliert das Bild so, dass es innerhalb des Containers passt, ohne das Bildverhältnis zu verzerren. Du kannst auch cover
verwenden, um das Bild so zu skalieren, dass es den gesamten Container ausfüllt.
Mit diesen Techniken kannst du die Größe von Bildern in HTML präzise steuern und dabei sicherstellen, dass sie auf deinem Webauftritt optimal angezeigt werden.
Alt-Text hinzufügen: Bildbeschreibung für Barrierefreiheit
Was ist Alt-Text?
Alt-Text (Alternativer Text) ist ein Attribut, das du zu Bild-Tags in HTML hinzufügen kannst. Er bietet eine Textbeschreibung des Bildes, die von Technologien wie Bildschirmlesegeräten verwendet wird, um sehbehinderten Nutzern den Inhalt des Bildes zu vermitteln.
Warum ist Alt-Text wichtig?
Alt-Text ist aus mehreren Gründen wichtig:
- Barrierefreiheit: Er macht Websites für alle Nutzer zugänglich, auch für diejenigen mit Sehbehinderungen.
- SEO: Alt-Texte helfen Suchmaschinen, den Inhalt von Bildern zu verstehen und sie in den Suchergebnissen anzuzeigen.
- Usability: Beim Laden von Bildern kann Alt-Text als Platzhalter angezeigt werden, wenn die Verbindung langsam ist.
So fügst du Alt-Text hinzu
Um Alt-Text zu einem Bild hinzuzufügen, verwende das alt
-Attribut im img
-Tag:
<img src="bild.jpg" alt="Beschreibung des Bildes">
Best Practices für Alt-Text
- Sei prägnant: Beschreibe das Bild in wenigen prägnanten Wörtern.
- Sei spezifisch: Erläutere den Inhalt und Zweck des Bildes.
- Verwende keine Phrasen wie "Bild von": Bildschirmlesegeräte erkennen solche Phrasen.
- Wenn das Bild dekorativen Charakter hat, verwende "leer": Dies weist Bildschirmlesegeräte an, das Bild zu ignorieren.
- Benutze keine Schlüsselwörter: Alt-Text sollte nicht zur Optimierung für Suchmaschinen verwendet werden.
Fortgeschrittene Tipps
-
Nutze aria-label für komplexe Bilder: Für komplexe Bilder, die durch eine Kombination aus HTML und CSS erstellt werden, kannst du das
aria-label
-Attribut verwenden, um eine alternative Beschreibung bereitzustellen. - Überprüfe deinen Alt-Text mit einem Bildschirmleser: Teste deinen Alt-Text mit einem Bildschirmleser wie NVDA oder JAWS, um sicherzustellen, dass er richtig vorgelesen wird.
- Optimiere deinen Alt-Text kontinuierlich: Überprüfe deinen Alt-Text regelmäßig und aktualisiere ihn bei Bedarf, um Barrierefreiheit und SEO zu gewährleisten.
Bilder zentrieren oder ausrichten
Wenn du dein Bild in der Mitte des Textes platzieren möchtest, kannst du das Attribut align
verwenden. Setze den Wert auf center
, um das Bild zu zentrieren.
<img src="bild.jpg" alt="Beschreibung" align="center">
Bilder nach links oder rechts ausrichten
Um ein Bild nach links oder rechts auszurichten, kannst du das CSS-Attribut float
verwenden. Setze den Wert auf left
oder right
, um das Bild entsprechend auszurichten.
<img src="bild.jpg" alt="Beschreibung" style="float: left;">
Ausrichtung mit Textumbruch
Wenn du möchtest, dass Text um dein Bild herum fließt, kannst du das Attribut wrap
verwenden. Setze den Wert auf left
oder right
, um den Textumfluss entsprechend zu gestalten.
<img src="bild.jpg" alt="Beschreibung" style="float: left; margin: 0 10px 10px 0;">
Horizontale Zentrierung mit text-align
Alternativ kannst du die horizontale Zentrierung auch mit dem CSS-Attribut text-align
erreichen. Setze den Wert auf center
für den entsprechenden Container.
<div style="text-align: center;">
<img src="bild.jpg" alt="Beschreibung">
</div>
Vorschaubilder erstellen: Thumbnail-Bilder
Thumbnail-Bilder, auch Miniaturansichten genannt, sind kleinere Versionen größerer Bilder, die als Platzhalter oder zur Vorschau dienen. Sie werden häufig auf Websites verwendet, um Speicherplatz zu sparen, Ladezeiten zu verkürzen und Benutzern eine Vorschau auf das Bild in voller Größe zu geben.
So erstellst du ein Thumbnail-Bild
Um ein Thumbnail-Bild zu erstellen, verwende die width
- und height
-Attribute des img
-Tags. Hier ist ein Beispiel:
<img src="bild.jpg" width="100" height="100" alt="Beschreibung des Bildes">
In diesem Beispiel wird das Bild bild.jpg
als Thumbnail mit einer Breite und Höhe von 100 Pixeln angezeigt.
Verwendung von object-fit
Du kannst auch das object-fit
-Attribut verwenden, um festzulegen, wie das Bild in den Thumbnail-Bereich passt. Dies sind die gängigsten Optionen:
-
contain
: Das Bild wird so skaliert, dass es in den Thumbnail-Bereich passt, ohne abgeschnitten zu werden. -
cover
: Das Bild wird so skaliert, dass es den gesamten Thumbnail-Bereich ausfüllt, auch wenn Teile des Bildes abgeschnitten werden.
Vorteile von Thumbnail-Bildern
Thumbnail-Bilder bieten mehrere Vorteile:
- Geringere Ladezeiten: Kleinere Bilder werden schneller geladen, was die Ladezeiten der Website verkürzt.
- Speicherplatzeinsparung: Thumbnail-Bilder belegen weniger Speicherplatz als Bilder in voller Größe.
- Benutzerfreundlichkeit: Thumbnails geben Benutzern eine Vorschau auf das Bild in voller Größe und helfen ihnen, sich auf Websites zu orientieren.
- Verbesserte SEO: Thumbnail-Bilder können als alternative Inhalte für Bilder in voller Größe dienen, was deine Website für Suchmaschinen optimiert.
Best Practices für Thumbnail-Bilder
Hier sind einige Best Practices für die Verwendung von Thumbnail-Bildern:
- Erstelle Thumbnails in konsistenten Größen.
- Biete Thumbnails in verschiedenen Auflösungen für unterschiedliche Geräte an.
- Verwende komprimierte Bilder, um die Ladezeiten zu verkürzen.
- Füge Alt-Text hinzu, um Thumbnail-Bilder für Benutzer mit Sehbehinderungen zugänglich zu machen.
Verknüpfte Bilder erstellen: Links zu anderen Seiten
Wenn du ein Bild anklickbar machen möchtest, kannst du es mit einer Webadresse verknüpfen. Dies ist nützlich, um Benutzer zu anderen Seiten oder Ressourcen auf deiner Website weiterzuleiten.
So erstellst du ein verknüpftes Bild
Um ein verknüpftes Bild zu erstellen, füge einfach das href
-Attribut zum img
-Tag hinzu und setze es auf die URL der Zielseite.
<a href="https://beispiel.de">
<img src="bild.jpg">
</a>
Ziel-Attribute zur Steuerung des Linkverhaltens
Du kannst auch die folgenden Zielattribute verwenden, um das Verhalten des Links zu steuern:
-
target: Bestimmt, in welchem Frame oder Fenster der Link geöffnet wird. Optionen sind
_self
,_blank
,_parent
und_top
. -
rel: Bietet zusätzliche Informationen über die Beziehung zwischen dem Link und der Zielseite. Optionen sind
nofollow
,noreferrer
undnoopener
.
Anwendungsfälle für verknüpfte Bilder
Verknüpfte Bilder können auf verschiedene Weise verwendet werden, darunter:
- Navigation: Verwende Bilder als Buttons oder Menüleisten, um Benutzer zu verschiedenen Bereichen deiner Website zu führen.
- Produktpräsentation: Verknüpfe Produktbilder mit deren Produktseiten für detaillierte Informationen.
- Marketingkampagnen: Verwende Bilder in Bannern oder Anzeigen, um Benutzer zu Landingpages mit Sonderangeboten zu leiten.
Best Practices für verknüpfte Bilder
- Verwende beschreibende Ankertexte: Der Alt-Text des Bildes sollte den Zielort des Links beschreiben.
- Optimiere Bilder für die Ladezeit: Große Bilder können die Ladezeit deiner Seite verlangsamen.
- Prüfe die Barrierefreiheit: Stelle sicher, dass Benutzer mit Behinderungen auf den Link zugreifen können, indem du einen aussagekräftigen Alt-Text bereitstellst.
Fehlerbehebung: Häufige Probleme beim Einfügen von Bildern
Wenn du Probleme beim Einfügen eines Bildes in HTML hast, sind hier einige häufige Fehler, auf die du stoßen kannst:
Bild wird nicht angezeigt
- Überprüfe den Dateipfad: Stelle sicher, dass du den korrekten Pfad zur Bilddatei angegeben hast. Wenn du ein lokales Bild verwendest, sollte der Pfad relativ zum HTML-Dokument sein.
- Überprüfe die Schreibweise: Achte auf Tippfehler im Dateinamen oder Pfad des Bildes.
- Überprüfe das Bildformat: Nicht alle Browser unterstützen alle Bildformate. Stelle sicher, dass das Bild in einem gängigen Format wie JPEG, PNG oder GIF gespeichert ist.
Bild ist verzerrt oder verschwommen
- Überprüfe die Bildgröße: Wenn du die Größe des Bildes mit HTML festlegst, kann dies zu Verzerrungen führen, wenn die ursprünglichen Proportionen nicht beibehalten werden.
- Verwende ein Bildbearbeitungsprogramm: Du kannst ein Bildbearbeitungsprogramm wie GIMP oder Photoshop verwenden, um das Bild in den richtigen Größenverhältnissen zu skalieren.
- Verwende CSS: Du kannst CSS verwenden, um die Größe des Bildes festzulegen und dabei die Seitenverhältnisse beizubehalten.
Alt-Text fehlt
- Alt-Text ist wichtig: Alt-Text ist eine alternative Textbeschreibung des Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann oder für Benutzer mit eingeschränkter Sichtbarkeit.
- Füge immer Alt-Text hinzu: Vergewissere dich, dass jedes Bild einen aussagekräftigen Alt-Text hat, der den Inhalt des Bildes genau beschreibt.
- Verwende ein Tool zur Alt-Text-Generierung: Wenn du Schwierigkeiten hast, Alt-Text zu schreiben, kannst du ein Tool wie WebAIMs Alt-Text Generator verwenden.
Bild ist nicht zentriert
-
Verwende CSS: Du kannst CSS verwenden, um das Bild zu zentrieren. Verwende die Eigenschaft
margin: auto;
. -
Verwende einen Wrapper: Du kannst einen Div-Wrapper um das Bild legen und die Eigenschaft
text-align: center;
auf den Wrapper anwenden. - Verwende ein Bildeditor: Du kannst ein Bildeditor-Tool wie Canva verwenden, um das Bild zu zentrieren und dann den HTML-Code zu exportieren.
Best Practices für SEO: Bilder für Suchmaschinen optimieren
Um die Sichtbarkeit deiner Website in Suchmaschinenergebnissen zu verbessern, ist es wichtig, deine Bilder für SEO zu optimieren. Hier sind einige bewährte Praktiken, die du befolgen kannst:
Dateinamen optimieren
Dateinamen sollten kurz, prägnant und beschreibend sein. Vermeide es, generische Namen wie "image.jpg" zu verwenden. Stattdessen solltest du Dateinamen verwenden, die den Inhalt des Bildes genau beschreiben, z. B. "produktschau-t-shirt-rot.jpg".
Alt-Text schreiben
Alt-Text ist ein Attribut, das eine Textbeschreibung des Bildes bereitstellt. Dies ist wichtig für die Barrierefreiheit, da es Benutzern mit Sehbehinderungen das Bild beschreibt. Suchmaschinen verwenden Alt-Text auch, um den Inhalt des Bildes zu verstehen. Achte darauf, dass dein Alt-Text genau ist und Schlüsselwörter enthält, die für dein Bild relevant sind.
Bilder komprimieren
Große Bilddateien können die Ladezeit deiner Website verlangsamen. Komprimiere deine Bilder, um ihre Größe zu reduzieren, ohne dabei wesentlich an Qualität einzubüßen. Dies kann durch Online-Tools wie TinyPNG oder Photoshop erfolgen.
Bildlegende verwenden
Eine Bildlegende ist ein kurzer Text, der unter dem Bild angezeigt wird. Sie bietet zusätzliche Informationen über das Bild und kann Schlüsselwörter enthalten, die für SEO relevant sind. Verwende Bildlegenden sparingly und sorge dafür, dass sie relevant und informativ sind.
Schemaauszeichnung hinzufügen
Schemaauszeichnung ist ein Code, der deiner Website strukturierte Daten hinzufügt. Dies hilft Suchmaschinen, den Inhalt deiner Website besser zu verstehen und kann die Sichtbarkeit deiner Bilder in Bildsuchmaschinen verbessern.
Sitemap aktualisieren
Sobald du deine Bilder für SEO optimiert hast, solltest du deine Sitemap aktualisieren, um die neuen Informationen zu erfassen. Dies stellt sicher, dass Suchmaschinen deine Bilder indizieren und in ihren Ergebnissen anzeigen können.
Cross-Posten in sozialen Medien
Das Posten deiner Bilder in sozialen Medien kann zu einer breiteren Reichweite führen und die Sichtbarkeit deiner Website erhöhen. Optimiere deine Bilder für soziale Medien, indem du ihre Größe an die jeweiligen Plattformen anpasst und beschreibende Bildunterschriften mit relevanten Hashtags hinzufügst.
Indem du diese Best Practices befolgst, kannst du deine Bilder für SEO optimieren und die Sichtbarkeit deiner Website in Suchmaschinenergebnissen verbessern. Dies wird letztendlich zu mehr Traffic auf deiner Website führen und deine Chancen erhöhen, neue Kunden zu gewinnen.
Fortgeschrittene Techniken: Bilder mit CSS gestalten
Neben den grundlegenden HTML-Attributen kannst du CSS verwenden, um Bilder noch vielseitiger zu gestalten und deine Website aufzuwerten. Hier sind einige Möglichkeiten, Bilder mit CSS anzupassen:
Bild positionieren
Mit CSS kannst du Bilder präzise positionieren, indem du die Eigenschaft position
und die zugehörigen Eigenschaften wie top
, right
, bottom
und left
verwendest. So kannst du Bilder an bestimmten Stellen auf deiner Seite platzieren, unabhängig von ihrem Textfluss.
Bild zuschneiden und skalieren
Mithilfe der CSS-Eigenschaften clip
und overflow
kannst du Bilder zuschneiden und skalieren. Dies ist nützlich, wenn du nur einen Teil eines Bildes anzeigen oder es auf eine bestimmte Größe beschränken möchtest.
Bildschatten und -rahmen hinzufügen
Du kannst mit CSS auch Schatten und Rahmen zu Bildern hinzufügen, um ihnen Tiefe und Dimension zu verleihen. Die Eigenschaften box-shadow
und border
ermöglichen es dir, verschiedene Schatteneffekte und Rahmen zu erstellen.
Bilder überlagern
Mit der CSS-Eigenschaft z-index
kannst du Bilder übereinander positionieren und deren Stapelreihenfolge bestimmen. Dies ist hilfreich, wenn du beispielsweise ein Wasserzeichen über ein Bild legen oder eine Galerie mit überlappenden Bildern erstellen möchtest.
Bilder animieren
Verwende CSS-Animationen, um Bilder zu animieren und sie dynamischer zu gestalten. Die Eigenschaften transition
und animation
ermöglichen es dir, Effekte wie Ein- und Ausblenden, Verschieben und Drehen zu erstellen.
Responsive Bilder
Mit CSS kannst du responsive Bilder erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpassen. Die Eigenschaft srcset
ermöglicht es dir, mehrere Versionen eines Bildes in verschiedenen Auflösungen anzugeben, sodass die optimale Version für den jeweiligen Bildschirm geladen wird.
Neue Posts
World of Warcraft auf Linux spielen: Eine guide für Abenteurer
Einführung in World of Warcraft
Node.js NVM: Antworten auf die häufigsten Fragen
Entwicklung
Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen
Marketingstrategien
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten
SEO-Optimierung
Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit
Online-Marketing
HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web
Einführung in HTTP-Statuscodes
Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg
SEO-Optimierung
Beschleunigen Sie die Dateneingabe mit HTML Datalist
Webentwicklung
HTML in PUG konvertieren: Einfach und schnell gemacht
Webentwicklung
Beliebte Posts
SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern
Sicherheitsrichtlinien
POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web
Webentwicklung
LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben
Dokumentenerstellung
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden
Fehlerbehebung
Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers
Fehlerbehebung
Linux Mint Themes: Personalisieren Sie Ihren Desktop
Open Source
TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose
Fehlerbehebung
Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung
Anleitungen
Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal
Open Source